当我看到网站的初始代码和示例时，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" />
当前回答
我们已经创建了一个模板驱动的工件生成器，它为任何类型的文本工件——HTML、XML、计算机语言、非结构化文本、DSV等——提供了包含文件的功能(例如，它非常适合处理普通Web或手动页面的页眉和页脚，而无需脚本)。
一旦你有了它，并使用它在你的“head”标签中提供“style”标签，“关注点分离”参数就消失了，取而代之的是“我们必须在对模板的每次更改后重新生成”和“我们必须从它生成的内容中调试模板”。自从第一种计算机语言获得预处理器(或者有人开始使用M4)以来，这些抱怨就一直存在。
总的来说，我们认为CSS文件或“style”标签的元化功能比元素级样式化更简洁，更不容易出错。但这确实需要一些专业判断，所以新手和散漫的人不必费心。
其他回答
CSS的全部意义在于将内容与其表示分开。所以在你的例子中，你把内容和表现形式混在一起了，这可能是“有害的”。
即使你只在这个例子中使用了一次样式，你仍然混合了CONTENT和DESIGN。查找“关注点分离”。
内联CSS适用于机器生成的代码，在大多数访问者只浏览站点上的一个页面时也可以，但它不能处理媒体查询以允许不同大小的屏幕具有不同的外观。为此，您需要在外部样式表或内部样式标记中包含CSS。
Personally, I think the hatred of inline css is just ridiculous. Hardcore cult behaviour, people just sheepishly repeat "Separation of concerns!". Yes, there are times where if there is a repeating element and you will need repeated styling to use a class targeted from a CSS file, but most of the time it improves speed of development and CLARITY OF CODE to put the style inline, it's great if I can look at the code and see that there is a custom margin height, it helps me picture the HTML document as a whole, instead of some named class that gives me little insight into which styles will be applied.
所以在这里我要做一个逆向的人，我要说内联css是伟大的，那些对你使用它大喊大叫的人只是在遵循他们被告知的东西，而实际上并没有给予任何原始的、公正的考虑。
快速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>元素，我们现在有了替代方案。
