当我看到网站的初始代码和示例时，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" />
当前回答
除了其他答案....国际化。
根据内容语言的不同，通常需要调整元素的样式。
一个明显的例子就是从右向左的语言。
假设你使用你的代码:
<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
其他回答
使用内联样式违反了关注点分离原则，因为您实际上是在同一个源文件中混合了标记和样式。在大多数情况下，它也违反了DRY(不要重复自己)原则，因为它们只适用于单个元素，而一个类可以应用于其中的几个元素(甚至可以通过CSS规则的魔力进行扩展!)
此外，如果站点包含脚本，明智地使用类是有益的。例如，一些流行的JavaScript库(如JQuery)严重依赖类作为选择器。
最后，使用类可以增加DOM的清晰度，因为可以有效地使用描述符告诉您其中给定节点是哪种元素。例如:
<div class="header-row">It's a row!</div>
表达能力比:
<div style="height: 80px; width: 100%;">It's...something?</div>
内联CSS总是优先于任何链接样式表CSS。如果您编写了一个合适的级联样式表，而您的属性没有正确应用，这会让您非常头疼。
它还在语义上损害了应用程序:CSS是关于将表示与标记分离的。当您将两者纠缠在一起时，事情就变得更加难以理解和维护。这与在服务器端将数据库代码与控制器代码分离的原理类似。
最后，假设您有20个这样的图像标记。当你决定它们应该向左浮动时会发生什么?
我认为，即使您希望对一个元素具有某种样式，也必须考虑到可能希望对不同页面上的同一元素应用相同样式的可能性。
有一天，有人可能会要求对每页上的同一元素进行更多的风格更改。如果您在外部CSS文件中定义了样式，那么您只需在那里进行更改，并且它将反映在所有页面的相同元素中，从而为您省去了麻烦。: -)
这只适用于手写代码。如果您生成代码，我认为可以在这里使用内联样式，特别是在元素和控件需要特殊处理的情况下。
对于手写代码来说，DRY是一个很好的概念，但对于机器生成的代码，我选择了“得墨忒耳定律”:“属于一起的东西必须保持在一起”。操作生成Style标签的代码比在不同的“远程”CSS文件中第二次编辑全局样式要容易得多。
你问题的答案是:视情况而定……
内联CSS适用于机器生成的代码，在大多数访问者只浏览站点上的一个页面时也可以，但它不能处理媒体查询以允许不同大小的屏幕具有不同的外观。为此，您需要在外部样式表或内部样式标记中包含CSS。
