当我看到网站的初始代码和示例时，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原型的html5方法
或者:<style>标签不再只是用于头部!
黑客CSS
假设您正在调试，并希望修改页面css，使某个部分看起来更好。您可以像我现在所做的那样，采用分阶段的方法，而不是快速、肮脏和不可维护的方式来创建您的内联样式。
没有内联样式属性
永远不要创建你的css内联，我的意思是:<element style='color:red'>或甚至<img style='float:right'>这非常方便，但不能在以后的实际css文件中反映实际的选择器特异性，如果你保留它，你会后悔以后的维护负载。
用<style>代替原型
在使用内联css的地方，应该使用in-page <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，你必须重构它。这是page中<style>的另一个重要用途，这样当重构时，您可以直接剥离内联css并立即将其放在页面的类、id或选择器中。如果你对你的选择器足够小心，你可以把最终的结果移动到全局css文件的末尾，只需要复制和粘贴。
要立即将所有css文件传输到全局css文件中有点困难，但是使用in-page <style>元素，我们现在有了替代方案。
其他回答
这只适用于手写代码。如果您生成代码，我认为可以在这里使用内联样式，特别是在元素和控件需要特殊处理的情况下。
对于手写代码来说，DRY是一个很好的概念，但对于机器生成的代码，我选择了“得墨忒耳定律”:“属于一起的东西必须保持在一起”。操作生成Style标签的代码比在不同的“远程”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
快速css原型的html5方法
或者:<style>标签不再只是用于头部!
黑客CSS
假设您正在调试，并希望修改页面css，使某个部分看起来更好。您可以像我现在所做的那样，采用分阶段的方法，而不是快速、肮脏和不可维护的方式来创建您的内联样式。
没有内联样式属性
永远不要创建你的css内联，我的意思是:<element style='color:red'>或甚至<img style='float:right'>这非常方便，但不能在以后的实际css文件中反映实际的选择器特异性，如果你保留它，你会后悔以后的维护负载。
用<style>代替原型
在使用内联css的地方，应该使用in-page <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，你必须重构它。这是page中<style>的另一个重要用途，这样当重构时，您可以直接剥离内联css并立即将其放在页面的类、id或选择器中。如果你对你的选择器足够小心，你可以把最终的结果移动到全局css文件的末尾，只需要复制和粘贴。
要立即将所有css文件传输到全局css文件中有点困难，但是使用in-page <style>元素，我们现在有了替代方案。
内联CSS总是优先于任何链接样式表CSS。如果您编写了一个合适的级联样式表，而您的属性没有正确应用，这会让您非常头疼。
它还在语义上损害了应用程序:CSS是关于将表示与标记分离的。当您将两者纠缠在一起时，事情就变得更加难以理解和维护。这与在服务器端将数据库代码与控制器代码分离的原理类似。
最后，假设您有20个这样的图像标记。当你决定它们应该向左浮动时会发生什么?
页面内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一次性交付的。
实现此功能后，可以在需要的地方手动编码单独的一次性样式。
