Question

当我看到网站入门代码和示例时，CSS总是在一个单独的文件中，名称类似于“main.css”，“default.css”或“Site.css”。但是，当我编写一个页面时，我经常试图将CSS与DOM元素内联，例如在图像上设置“float：right”。我觉得这是“糟糕的编码”，因为在例子中很少这样做。

我理解如果样式将应用于多个对象，则明智地遵循“不要重复自己”（DRY）并将其分配给CSS类以供每个元素引用。但是，如果我不会在另一个元素上重复CSS，为什么不在编写HTML时插入CSS呢？

问题：使用内联CSS是否被认为是坏的，即使它只会在该元素上使用？如果是这样，为什么？

示例（这很糟糕吗？）：

<img src="myimage.gif" style="float:right" />

Answer 1

当您想要使网站看起来不同时，必须更改100行代码。这可能不适用于您的示例，但如果您使用内联css来执行

之类的操作

<div style ="font-size:larger; text-align:center; font-weight:bold">

在每个页面上表示页眉，它将更容易维护

<div class="pageheader">

如果在单个样式表中定义了页眉，那么如果要更改页眉在整个站点中的显示方式，可以在一个位置更改css。

然而，我会成为一个异教徒，并说在你的例子中，我认为没有问题。您的目标是单个图像的行为，可能必须在单个页面上查看，因此将实际的css放在样式表中可能会有点过分。

Answer 2

拥有不同css文件的优点是

轻松维护您的HTML页面
更改外观将非常简单，您可以在页面上支持许多主题。
您的css文件将在浏览器端缓存。因此，每次刷新页面或用户浏览您的网站时，您都不会加载一些kbs的数据，从而为互联网流量做出贡献。

Answer 3

快速css原型的html5方法

或：<style>标签不再仅限于头部了！

黑客CSS

假设您正在调试，并希望修改您的page-css，使某个部分看起来更好。不是以快速，肮脏和不可维护的方式创建你的样式，你可以做我现在做的事情并采取分阶段的方法。

没有内联样式属性

永远不要创建你的css内联，我的意思是：<element style='color:red'>或者<img style='float:right'>它非常方便，但是后来在实际的css文件中没有反映出实际的选择器特异性，如果你保留它，你会后悔维修负担。

原型`<style>`代替

您将使用内联css，而是使用页内<style>元素。试试吧！它适用于所有浏览器，因此非常适合测试，但允许您在需要时随时将此类css优先移动到全局css文件中！（*请注意选择器只有页面级特异性，而不是站点级别的特异性，所以要小心过于笼统）就像在css文件中一样干净：

<style>
.avatar-image{
    float:right
}
.faq .warning{
    color:crimson;
}
p{
    border-left:thin medium blue;
    // this general of a selector would be very bad, though.
    // so be aware of what'll happen to general selectors if they go
    // global
}
</style>

重构其他人的内联css

有时你甚至不是问题，而且你正在与别人的内联css打交道，你必须重构它。这是页面中<style>的另一个重要用途，因此您可以直接剥离内联css，并在重构时立即将其放在类或ID或选择器中的页面上。如果您对选择器的使用非常谨慎，那么您可以将最终结果移动到最后的全局css文件中，只需复制一份＆amp;糊。

将css的每个位的立即传输到全局css文件有点困难，但是使用页内<style>元素，我们现在有了替代方案。

Answer 4

除了其他答案.... Internationalization 。

根据内容的语言 - 您经常需要调整元素的样式。

一个明显的例子是从右到左的语言。

假设您使用了代码：

<img src="myimage.gif" style="float:right" />

现在说你希望你的网站支持rtl语言 - 你需要：

<img src="myimage.gif" style="float:left" />

现在，如果您想支持这两种语言，则无法使用内联样式为浮点值赋值。

使用CSS可以轻松使用lang属性

所以你可以这样做：

img {
  float:right;
}
html[lang="he"] img { /* Hebrew. or.. lang="ar" for Arabic etc */
  float:left;
}

<强> Demo

Answer 5

内联CSS始终优先于任何链接样式表CSS。如果你去写一个合适的级联样式表，并且你的属性没有正确应用，这会给你带来巨大的麻烦。

它还会在语义上损害您的应用程序：CSS是关于将表示与标记分离。当你把两者纠缠在一起时，事情变得更加难以理解和维护。这与在服务器端将数据库代码与控制器代码分离的原理类似。

最后，想象一下你有20个这样的图像标签。当你决定将它们漂浮在左边时会发生什么？

Answer 6

使用内联CSS更难维护。

对于您想要更改的每个属性，使用内联CSS要求您查找相应的HTML代码，而不是只查看明确定义且希望结构良好的CSS文件。

Answer 7

CSS的重点是将内容与其演示文稿分开。因此，在您的示例中，您将内容与演示文稿混合在一起，这可能会“被视为有害”。

Answer 8

这仅适用于手写代码。如果你生成代码，我认为在这里使用内联样式是可以的，特别是在元素和控件需要特殊处理的情况下。

DRY是手写代码的一个很好的概念，但在机器生成的代码中，我选择“Demeter法则”：“什么属于一起，必须保持在一起”。操作生成Style标签的代码比在另一个“远程”CSS文件中第二次编辑全局样式更容易。

你的问题的答案：这取决于......

Answer 9

编码您希望如何编码，但如果您将其传递给其他人，最好使用其他人所做的事情。 CSS有原因，那么有内联的原因。我使用两者，因为它对我来说更容易。当你有很多相同的重复时，使用CSS是很棒的。但是，当你有一堆具有不同属性的不同元素时，那就成了一个问题。我的一个例子就是当我在页面上定位元素时。每个元素作为不同的顶部和左侧属性。如果我把它全部放在一个CSS中，那真的会让我在html和css页面之间乱七八糟。因此，当你希望所有东西都具有相同的字体，颜色，悬停效果等时，CSS非常棒。但是当一切都有不同的位置时，为每个元素添加一个CSS实例真的很痛苦。这只是我的观点。当你不得不挖掘代码时，CSS在大型应用程序中确实具有很大的相关性。使用Mozilla Web开发人员插件，它将帮助您找到元素ID和类。

Answer 10

我认为即使你想为一个元素设置某种风格，你也必须考虑你可能想要在不同页面上的同一元素上应用相同的风格。

有一天，有人可能会要求在每个页面上更改或添加更多样式更改到同一元素。如果您在外部CSS文件中定义了样式，那么您只需要在那里进行更改，并且它将反映在所有页面中的相同元素中，从而避免让您头疼。： - ）

Answer 11

即使你只使用这个样式一次，你仍然混合了CONTENT和DESIGN。查找“关注点分离”。

Answer 12

使用内联样式违反了“关注分离”原则，因为您在同一源文件中有效地混合了标记和样式。在大多数情况下，它也违反了DRY（不要重复自己）原则，因为它们只适用于单个元素，而类可以应用于其中的几个（甚至可以通过CSS的魔力扩展）规则！）。

此外，如果您的网站包含脚本，则明智地使用类是有益的。例如，几个流行的JavaScript库（如JQuery）在很大程度上依赖于类作为选择器。

最后，使用类可以为DOM增加额外的清晰度，因为您实际上有描述符告诉您其中的给定节点是什么类型的元素。例如：

<div class="header-row">It's a row!</div>

比表达更具表现力：

<div style="height: 80px; width: 100%;">It's...something?</div>

Answer 13

页内广告css是目前的事物，因为谷歌将其视为提供比从单独文件加载的css更好的用户体验。一种可能的解决方案是将css放入文本文件中，使用php即时加载，然后将其输出到文档头中。在<head>部分中包含以下内容：

<head> ...

<?php
$codestring = file_get_contents("styles/style1.txt");
echo "<style>" . $codestring . "</style>";
?>

... </head>

将所需的css放在styles / style1.txt中，它会在文档的<head>部分中显示出来。通过这种方式，您将拥有使用样式模板style1.txt的页内css，该样式模板可以由任何页面共享，从而允许仅通过该文件进行站点范围的样式更改。此外，此方法不要求浏览器从服务器请求单独的css文件（从而最小化检索/呈现时间），因为所有内容都是由php一次传递的。

实施此功能后，可以根据需要手动编码单独的一次性样式。

Answer 14

内联CSS适用于机器生成的代码，并且当大多数访问者只浏览网站上的一个页面时可以很好，但有一件事是它不能处理媒体查询以允许不同大小的屏幕的不同外观。为此，您需要将CSS包含在外部样式表或内部样式标记中。

Answer 15

尽管我完全赞同上面给出的所有答案，但是在单独的文件中编写CSS总是比代码可重用性，可维护性，更好的关注点分离更好，有许多场景，人们更喜欢生产代码中的内联CSS -

外部CSS文件会导致对浏览器进行一次额外的HTTP调用，从而导致额外的延迟。相反，如果CSS是内联插入的，那么浏览器可以立即开始解析它。特别是在SSL上，HTTP调用成本更高，并且会增加页面的额外延迟。有许多工具可以通过插入外部CSS文件作为内联代码来帮助生成静态HTML页面（或页面片段）。这些工具用于生成生成二进制文件的构建和发布阶段。这样我们就可以获得外部CSS的所有优势，而且页面变得更快。

Answer 16

根据AMP HTML Specification，为了提高性能，有必要将CSS放在HTML文件中（与外部样式表相对）。这并不意味着内联CSS，而是they do specify no external stylesheets。

服务系统可能做的优化列表不完整：


将图像引用替换为尺寸与查看器视口相对应的图像。

在首屏上可见的内嵌图像。

内联CSS变量。

预加载扩展组件。

缩小HTML和CSS。

Answer 17

除了其他答案外，您不能定位嵌入式CSS中的伪类或伪元素

Answer 18

我们创建了一个模板驱动的工件生成器，该生成器为任何类型的文本工件提供了包含文件的功能-HTML，XML，计算机语言，非结构化文本，DSV等。（例如，对于处理常见的Web或无需脚本的手动页眉和页脚。）

一旦有了它，并使用它在“ head”标签内提供“ style”标签，“关注点分离”参数就消失了，取而代之的是“我们必须在每次更改模板后重新生成”， “我们必须根据其生成的内容调试模板”。自从第一种获得预处理器（或某人开始使用M4）的计算机语言以来，这些困扰就一直存在。

总的来说，我们认为CSS文件或“样式”标签的元化能力比元素级样式更干净，并且更不容易出错。但这确实需要一些专业的判断，因此，新手和分散的大脑都不会打扰。

Answer 19

除了其他答案外，另一个问题是它违反了MDN https://infosec.mozilla.org/guidelines/web_security#content-security-policy

推荐的内容安全政策。

他们使用的理由是内联 javascript 是有害的，XSS等，但这并不能证明为什么也应该禁用内联样式。也许有人可以评论原因，但是在那之前，我只能依靠对权威的呼吁并声称：避免内联样式是一种安全性最佳实践。

在线CSS有什么坏处？

19 个答案:

快速css原型的html5方法

黑客CSS

没有内联样式属性

原型`<style>`代替

重构其他人的内联css

在线CSS有什么坏处？

19 个答案:

快速css原型的html5方法

黑客CSS

没有内联样式属性

原型<style>代替

重构其他人的内联css

原型`<style>`代替