在线CSS有什么不好？
当我看到网站的起始代码和例子时，CSS总是在一个单独的文件中，命名为“main.css”，“default.css”或“Site.css”。 但是，当我编写一个页面时，我常常想把CSS放在一个DOM元素上，例如在图像上设置“float：right”。 我觉得这是“糟糕的编码”，因为在例子中很less这样做。
我明白，如果样式将应用于多个对象，那么遵循“不要重复自己”（DRY）并将其分配给每个元素所引用的CSS类是明智的。 但是，如果我不会在另一个元素上重复使用CSS，那么为什么不在我编写HTML时使用CSS呢？
问题：使用内联CSS认为是不好的，即使它只用于该元素？ 如果是这样，为什么？
例子（这是不好的？）：
<img src="myimage.gif" style="float:right" /> 当你想使网站看起来不同时，必须更改100行代码。 这可能不适用于你的例子，但如果你正在使用内联的CSS的东西
<div style ="font-size:larger; text-align:center; font-weight:bold">
在每个页面上表示一个页眉，维护起来要容易得多
<div class="pageheader">
如果pageheader是在单个样式表中定义的，那么如果要更改整个站点中页面标题的显示方式，则可以在一个位置更改css。
但是，我会成为一个异端，并说在你的例子中，我没有看到任何问题。 您将目标locking为单个图片的行为，可能需要在单个页面上正确显示，因此将实际的css放在样式表中可能会过度。
有一个不同的CSS文件的好处是
- 易于维护您的HTML页面
- 更改外观将很容易，您可以支持您的网页上的许多主题。
- 你的CSS文件将被caching在浏览器端。 因此，您每次刷新页面或用户导航您的网站时，都不会加载一些kbs数据，因此您将对互联网stream量做出贡献。
快速的CSS原型的html5方法
或者： <style>标签不再仅仅是头部！
黑客的CSS
假设你正在debugging，并且想要修改你的page-css，使某个部分看起来更好。 而不是创build你的风格内嵌快速，肮脏和不可维护的方式，你可以做我现在做什么，采取分阶段的方法。
没有内联样式属性
不要创build你的CSS内联，我的意思是： <element style='color:red'>甚至<img style='float:right'>这是非常方便的，但并不反映真正的select器的特殊性在一个真正的CSS文件以后，如果你保留它，你会后悔的维护负荷。
用<style>替代原型
在哪里你会使用内联的CSS，而不是使用页面内<style>元素。 试试看！ 它在所有浏览器中都能正常工作，所以对于testing非常有用，而且可以随时将这些css文件移动到全局css文件中。 （*只是要知道，select器将只有页面级别的特异性，而不是站点级别的特异性，所以要谨慎的是太笼统）就像在你的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或者select器中。 如果您对select器的操作足够小心，则可以将最终结果移动到全局css文件中，最后只需复制并粘贴即可。
把每一个 css立即转移到全局的css文件是有点困难的，但是对于页面内的<style>元素，我们现在有了其他select。
内联CSS总是胜于任何链接样式表CSS。 这可能会导致你头痛，如果你去写一个适当的级联样式表，并且你的属性没有正确应用。
它也会在语义上伤害你的应用程序：CSS是关于将表示与标记分离的。 当你把两者混淆在一起的时候，事情变得更加难以理解和维护。 这与将数据库代码与服务器端的控制器代码分开的原理类似。
最后，想象一下你有20个图像标签。 当你决定把它们放到左边时会发生什么？
除了其他的答案…. 国际化 。
根据内容的语言不同，您经常需要调整元素的样式。
一个明显的例子是从右到左的语言。
假设你使用了你的代码：
<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; }
演示
使用内联CSS更难以维护。
对于每一个你想要改变的属性，使用内联CSS都要求你查找相应的HTML代码，而不是只是在清晰的，有希望的结构化CSS文件中查找。
CSS的重点是将内容与演示分开。 所以在你的例子中，你将内容和表示混合在一起，这可能被认为是有害的。
这只适用于手写代码。 如果你生成代码，我认为可以在这里使用内联样式。 尤其是在要素和控制需要特殊处理的情况下。
DRY对于手写代码是一个很好的概念，但是在机器生成的代码中，我select了“demeter法则”。 “一起属于什么，必须在一起”。 因此，处理生成“样式”标记的代码比在另一个“远程”css文件中第二次编辑全局样式更容易。
所以，这个问题的答案必须是：这取决于…
我认为即使如果你想有一个元素的风格，如果你想在同一个元素上应用相同的样式在多个页面，一个好日子有人要求改变或添加更多样式到同一个元素所有的网页？ 在这种情况下，如果风格类中定义了样式，并且在.css文件中定义了样式，那么只需更改.css文件即可使其反映在所有页面中的相同元素中，并避免头痛。 🙂
编码代码如何编写，但是如果将它传递给其他人，最好使用其他人所做的工作。 有CSS的原因，那么有内联的原因。 我用两个，因为这对我来说更简单。 当你有很多相同的重复使用CSS是美好的。 但是，当你有一堆不同的属性具有不同的属性，那就成了一个问题。 对我来说，一个例子是当我在页面上定位元素。 每个元素作为不同的顶部和左侧属性。 如果我把这一切都放在一个CSS，这将真正干扰我的HTML和CSS页面之间的混乱。 所以当你想要所有的东西都具有相同的字体，颜色，hover效果等等时，CSS是非常棒的。但是当每个东西都有不同的位置时，为每个元素添加一个CSS实例真的很痛苦。 这只是我的意见。 当你不得不钻研代码的时候，CSS在大型应用程序中的确具有重要的意义。 使用Mozilla的Web开发插件，它将帮助您find元素ID和类。
即使你只是在这个例子中使用一次风格，你仍然混合了CONTENT和DESIGN。 查找“分离关注点”。
使用内联样式违反了分离关注原则，因为您在同一个源文件中有效地混合了标记和样式。 在大多数情况下，它也违反了DRY（Do not Repeat Yourself）原则，因为它们只适用于单个元素，而一个类可以适用于其中的几个（甚至可以通过CSS规则的魔法来扩展！ ）。
此外，如果您的站点包含脚本，则明智地使用类是有益的。 例如，一些stream行的JavaScript库（如JQuery）在很大程度上依赖于类作为select器。
最后，使用类为您的DOM增加了更多的清晰度，因为您有效地使用描述符来告诉您其中给定节点是哪种元素。 例如：
<div class="header-row">It's a row!</div>
比以下更具performance力：
<div style="height: 80px; width: 100%;">It's...something?</div>
目前页面内的CSS是内容，因为Google将其评价为提供比从单独文件加载的CSS更好的用户体验。 一个可能的解决scheme是把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一次交付。
已经实现了这一点，个别一次性风格可以手动编码在需要的地方。
内联CSS适用于机器生成的代码，当大多数访问者只浏览网站上的一个页面时可以很好，但是不能做的一件事是处理媒体查询，以允许不同大小的屏幕显示不同的外观。 为此，您需要将CSS包含在外部样式表或内部样式标记中。
即使我完全同意上面给出的所有答案，在独立文件中编写CSS从代码的可重用性，可维护性，更好的关注分离总是更好，但是有很多情况下，人们更喜欢在生产代码中内联CSS，
外部CSS文件导致一个额外的HTTP调用浏览器，从而额外的延迟。 相反，如果CSS内联插入，浏览器可以立即开始parsing。 特别是在SSL HTTP调用上更加昂贵，并为页面增加了额外的延迟。 有许多工具可以帮助通过插入外部CSS文件作为内联代码来生成静态HTML页面（或页面代码片段）。 这些工具用于生成生产二进制文件的构build和发布阶段。 这样我们就可以获得外部CSS的所有优点，并且页面也变得更快。
