当我看到网站的初始代码和示例时，CSS总是在一个单独的文件中，命名为“main.css”，“default.css”或“Site.css”。然而，当我编写一个页面时，我经常试图将CSS与DOM元素放在一起，例如在图像上设置“float: right”。我觉得这是“糟糕的编码”，因为在示例中很少这样做。
我明白，如果样式将应用于多个对象，明智的做法是遵循“不要重复自己”(Don't Repeat Yourself, DRY)，并将其分配给每个元素引用的CSS类。然而，如果我不会在另一个元素上重复CSS，为什么不内联CSS，因为我写HTML?
问题是:使用内联CSS被认为是不好的，即使它只用于该元素?如果有，为什么?
例子(这样不好吗?)
<img src="myimage.gif" style="float:right" />
当前回答
使用内联样式违反了关注点分离原则，因为您实际上是在同一个源文件中混合了标记和样式。在大多数情况下，它也违反了DRY(不要重复自己)原则，因为它们只适用于单个元素，而一个类可以应用于其中的几个元素(甚至可以通过CSS规则的魔力进行扩展!)
此外，如果站点包含脚本，明智地使用类是有益的。例如，一些流行的JavaScript库(如JQuery)严重依赖类作为选择器。
最后，使用类可以增加DOM的清晰度，因为可以有效地使用描述符告诉您其中给定节点是哪种元素。例如:
<div class="header-row">It's a row!</div>
表达能力比:
<div style="height: 80px; width: 100%;">It's...something?</div>
其他回答
使用内联样式违反了关注点分离原则，因为您实际上是在同一个源文件中混合了标记和样式。在大多数情况下，它也违反了DRY(不要重复自己)原则，因为它们只适用于单个元素，而一个类可以应用于其中的几个元素(甚至可以通过CSS规则的魔力进行扩展!)
此外，如果站点包含脚本，明智地使用类是有益的。例如，一些流行的JavaScript库(如JQuery)严重依赖类作为选择器。
最后，使用类可以增加DOM的清晰度，因为可以有效地使用描述符告诉您其中给定节点是哪种元素。例如:
<div class="header-row">It's a row!</div>
表达能力比:
<div style="height: 80px; width: 100%;">It's...something?</div>
除了其他答案....国际化。
根据内容语言的不同，通常需要调整元素的样式。
一个明显的例子就是从右向左的语言。
假设你使用你的代码:
<img src="myimage.gif" style="float:right" />
现在假设你想让你的网站支持rtl语言——你需要:
<img src="myimage.gif" style="float:left" />
现在，如果你想同时支持两种语言，没有办法用内联样式来赋值给float。
在CSS中，lang属性很容易解决这个问题
所以你可以这样做:
img {
float:right;
}
html[lang="he"] img { /* Hebrew. or.. lang="ar" for Arabic etc */
float:left;
}
Demo
我们已经创建了一个模板驱动的工件生成器，它为任何类型的文本工件——HTML、XML、计算机语言、非结构化文本、DSV等——提供了包含文件的功能(例如，它非常适合处理普通Web或手动页面的页眉和页脚，而无需脚本)。
一旦你有了它，并使用它在你的“head”标签中提供“style”标签，“关注点分离”参数就消失了，取而代之的是“我们必须在对模板的每次更改后重新生成”和“我们必须从它生成的内容中调试模板”。自从第一种计算机语言获得预处理器(或者有人开始使用M4)以来，这些抱怨就一直存在。
总的来说，我们认为CSS文件或“style”标签的元化功能比元素级样式化更简洁，更不容易出错。但这确实需要一些专业判断，所以新手和散漫的人不必费心。
即使你只在这个例子中使用了一次样式，你仍然混合了CONTENT和DESIGN。查找“关注点分离”。
页面内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文件(从而最小化检索/呈现时间)，因为所有内容都是由php一次性交付的。
实现此功能后，可以在需要的地方手动编码单独的一次性样式。
