当我看到网站的初始代码和示例时，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" />
当前回答
使用内联CSS更难维护。
对于您想要更改的每个属性，使用内联CSS要求您查找相应的HTML代码，而不是只在定义清晰且结构良好的CSS文件中查找。
其他回答
内联CSS总是优先于任何链接样式表CSS。如果您编写了一个合适的级联样式表，而您的属性没有正确应用，这会让您非常头疼。
它还在语义上损害了应用程序:CSS是关于将表示与标记分离的。当您将两者纠缠在一起时，事情就变得更加难以理解和维护。这与在服务器端将数据库代码与控制器代码分离的原理类似。
最后，假设您有20个这样的图像标记。当你决定它们应该向左浮动时会发生什么?
即使你只在这个例子中使用了一次样式，你仍然混合了CONTENT和DESIGN。查找“关注点分离”。
尽管我完全同意上面给出的所有答案，在一个单独的文件中编写CSS从代码可重用性、可维护性和更好的关注点分离来看总是更好的，但在许多情况下，人们更喜欢在生产代码中使用内联CSS
The external CSS file causes one extra HTTP call to browser and thus additional latency. Instead if the CSS is inserted inline then browser can start parsing it right away. Especially over SSL HTTP calls are more costly and adds up additional latency to the page. There are many tools available that helps to generate static HTML pages (or page snippet) by inserting external CSS files as inline code. These tools are used at the Build and Release phase where the production binary is generated. This way we get all the advantages of external CSS and also the page becomes faster.
根据AMP HTML规范，为了性能目的，有必要将CSS放在HTML文件中(而不是外部样式表)。这并不意味着内联CSS，但它们确实没有指定外部样式表。
这样一个服务系统可能做的优化的不完整列表是: 将图像引用替换为符合查看器视口大小的图像。 内联图像在折页上方可见。 内联CSS变量。 预加载扩展组件。 精简HTML和CSS。
除了其他答案....国际化。
根据内容语言的不同，通常需要调整元素的样式。
一个明显的例子就是从右向左的语言。
假设你使用你的代码:
<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
