当我看到网站的初始代码和示例时，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>元素，我们现在有了替代方案。
其他回答
快速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。
Code how you like to code, but if you are passing it on to someone else it is best to use what everyone else does. There are reasons for CSS, then there are reasons for inline. I use both, because it is just easier for me. Using CSS is wonderful when you have a lot of the same repetition. However, when you have a bunch of different elements with different properties then that becomes a problem. One instance for me is when I am positioning elements on a page. Each element as a different top and left property. If I put that all in a CSS that would really annoy the mess out of me going between the html and css page. So CSS is great when you want everything to have the same font, color, hover effect, etc. But when everything has a different position adding a CSS instance for each element can really be a pain. That is just my opinion though. CSS really has great relevance in larger applications when your having to dig through code. Use Mozilla web developer plugin and it will help you find the elements IDs and Classes.
使用内联CSS更难维护。
对于您想要更改的每个属性，使用内联CSS要求您查找相应的HTML代码，而不是只在定义清晰且结构良好的CSS文件中查找。
我们已经创建了一个模板驱动的工件生成器，它为任何类型的文本工件——HTML、XML、计算机语言、非结构化文本、DSV等——提供了包含文件的功能(例如，它非常适合处理普通Web或手动页面的页眉和页脚，而无需脚本)。
一旦你有了它，并使用它在你的“head”标签中提供“style”标签，“关注点分离”参数就消失了，取而代之的是“我们必须在对模板的每次更改后重新生成”和“我们必须从它生成的内容中调试模板”。自从第一种计算机语言获得预处理器(或者有人开始使用M4)以来，这些抱怨就一直存在。
总的来说，我们认为CSS文件或“style”标签的元化功能比元素级样式化更简洁，更不容易出错。但这确实需要一些专业判断，所以新手和散漫的人不必费心。
