当我看到网站的初始代码和示例时，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" />
当前回答
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从代码可重用性、可维护性和更好的关注点分离来看总是更好的，但在许多情况下，人们更喜欢在生产代码中使用内联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.
使用不同的css文件的好处是
易于维护您的html页面 更改外观和感觉将很容易，您可以在您的页面上支持许多主题。 您的css文件将缓存在浏览器端。因此，你将贡献一点互联网流量，不加载一些kbs的数据，每次一个页面刷新或用户导航你的网站。
当你想让网站看起来不一样时，不得不修改100行代码。这可能不适用于你的例子，但如果你使用内联css的事情
<div style ="font-size:larger; text-align:center; font-weight:bold">
在每个页面上表示一个页眉，这样维护起来会容易得多
<div class="pageheader">
如果pageheader定义在一个单独的样式表中，那么如果你想改变整个站点的页面header的外观，你只需在一个地方更改CSS。
然而，我要说的是，在你的例子中，我认为没有问题。您针对的是单个图像的行为，它可能必须在单个页面上显示正确，因此将实际的css放在样式表中可能会过度。
页面内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一次性交付的。
实现此功能后，可以在需要的地方手动编码单独的一次性样式。
除了其他答案....国际化。
根据内容语言的不同，通常需要调整元素的样式。
一个明显的例子就是从右向左的语言。
假设你使用你的代码:
<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
