当我看到网站的初始代码和示例时，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" />
当前回答
除了其他答案....国际化。
根据内容语言的不同，通常需要调整元素的样式。
一个明显的例子就是从右向左的语言。
假设你使用你的代码:
<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
其他回答
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.
这只适用于手写代码。如果您生成代码，我认为可以在这里使用内联样式，特别是在元素和控件需要特殊处理的情况下。
对于手写代码来说，DRY是一个很好的概念，但对于机器生成的代码，我选择了“得墨忒耳定律”:“属于一起的东西必须保持在一起”。操作生成Style标签的代码比在不同的“远程”CSS文件中第二次编辑全局样式要容易得多。
你问题的答案是:视情况而定……
使用内联CSS更难维护。
对于您想要更改的每个属性，使用内联CSS要求您查找相应的HTML代码，而不是只在定义清晰且结构良好的CSS文件中查找。
除了其他答案，你不能针对内联CSS中的伪类或伪元素
当你想让网站看起来不一样时，不得不修改100行代码。这可能不适用于你的例子，但如果你使用内联css的事情
<div style ="font-size:larger; text-align:center; font-weight:bold">
在每个页面上表示一个页眉，这样维护起来会容易得多
<div class="pageheader">
如果pageheader定义在一个单独的样式表中，那么如果你想改变整个站点的页面header的外观，你只需在一个地方更改CSS。
然而，我要说的是，在你的例子中，我认为没有问题。您针对的是单个图像的行为，它可能必须在单个页面上显示正确，因此将实际的css放在样式表中可能会过度。
