内联 CSS 有什么不好？

What's so bad about in-line CSS?

提问by ChessWhiz

When I see website starter code and examples, the CSS is always in a separate file, named something like "main.css", "default.css", or "Site.css". However, when I'm coding up a page, I'm often tempted to throw the CSS in-line with a DOM element, such as by setting "float: right" on an image. I get the feeling that this is "bad coding", since it's so rarely done in examples.

当我看到网站入门代码和示例时，CSS 总是在一个单独的文件中，命名为“main.css”、“default.css”或“Site.css”。然而，当我编写一个页面时，我经常想将 CSS 与 DOM 元素放在一起，例如通过在图像上设置“float: right”。我觉得这是“糟糕的编码”，因为在示例中很少这样做。

I understand that if the style will be applied to multiple objects, it's wise to follow "Don't Repeat Yourself" (DRY) and assign it to a CSS class to be referenced by each element. However, if I won't be repeating the CSS on another element, why not in-line the CSS as I write the HTML?

我知道如果样式将应用于多个对象，那么遵循“不要重复自己”（DRY）并将其分配给每个元素引用的 CSS 类是明智的。但是，如果我不想在另一个元素上重复 CSS，为什么不在我编写 HTML 时内嵌 CSS？

The question: Is using in-line CSS considered bad, even if it will only be used on that element? If so, why?

问题：使用内联 CSS 是否被认为是不好的，即使它只会用于该元素？如果是这样，为什么？

Example (is this bad?):

示例（这很糟糕吗？）：

<img src="myimage.gif" style="float:right" />

回答by David

Having to change 100 lines of code when you want to make the site look different. That may not apply in your example, but if you're using inline css for things like

当您想让网站看起来不同时，必须更改 100 行代码。这可能不适用于您的示例，但是如果您将内联 css 用于诸如

<div style ="font-size:larger; text-align:center; font-weight:bold">

on each page to denote a page header, it would be a lot easier to maintain as

在每个页面上表示一个页眉，维护起来会容易得多

<div class="pageheader">  

if the pageheader is defined in a single stylesheet so that if you want to change how a page header looks across the entire site, you change the css in one place.

如果 pageheader 是在单个样式表中定义的，因此如果您想更改页面标题在整个站点中的外观，您可以在一个地方更改 css。

However, I'll be a heretic and say that in your example, I see no problem. You're targeting the behavior of a single image, which probably has to look right on a single page, so putting the actual css in a stylesheet would probably be overkill.

但是，我将成为异端并说在您的示例中，我认为没有问题。您的目标是单个图像的行为，它可能必须在单个页面上看起来正确，因此将实际的 css 放在样式表中可能会矫枉过正。

回答by vijay.shad

The advantage for having a different css file are

拥有不同 css 文件的优点是

1. Easy to maintain your html page
2. Change to the Look and feel will be easy and you can have support for many themes on your pages.
3. Your css file will be cached on the browser side. So you will contribute a little on internet traffic by not loading some kbs of data every time a the page is refreshed or user navigates your site.

1. 易于维护您的 html 页面
2. 更改外观会很容易，并且您可以在页面上获得对许多主题的支持。
3. 您的 css 文件将被缓存在浏览器端。因此，每次刷新页面或用户浏览您的网站时，您都不会加载一些 kb 的数据，从而对互联网流量做出一些贡献。

回答by Kzqai

The html5 approach to fast css prototyping

快速 css 原型设计的 html5 方法

or: <style>tags are no longer just for the head any more!

或：<style>标签不再仅用于头部！

Hacking CSS

黑客 CSS

Let's say you're debugging, and want to modify your page-css, make a certain section only look better. Instead of creating your styles inline the quick and dirty and un-maintainable way, you can do what I do these days and take a staged approach.

假设您正在调试，并且想要修改您的页面 css，使某个部分看起来更好。与其以快速、肮脏和不可维护的方式内联创建样式，您可以做我现在所做的事情并采取分阶段的方法。

No inline style attribute

没有内联样式属性

Never create your css inline, by which I mean: <element style='color:red'>or even <img style='float:right'>It's very convenient, but doesn't reflect actual selector specificity in a real css file later, and if you keep it, you'll regret the maintenance load later.

永远不要创建你的 css 内联，我的意思是： <element style='color:red'>或者甚至<img style='float:right'>它非常方便，但不会在以后的真实 css 文件中反映实际的选择器特异性，如果你保留它，你会后悔以后的维护负载。

Prototype with <style>instead

<style>相反的原型

Where you would have used inline css, instead use in-page <style>elements. Try that out! It works fine in all browsers, so is great for testing, yet allows you to gracefully move such css out to your global css files whenever you want/need to! ( *just be aware that the selectors will only have page-level specificity, instead of site-level specificity, so be wary of being too general) Just as clean as in your css files:

在您将使用内联 css 的地方，请使用页内<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>

Refactoring other people's inline css

重构别人的内联css

Sometimes you're not even the problem, and you're dealing with someone else's inline css, and you have to refactor it. This is another great use for the <style>in page, so that you can directly strip the inline css and immediate place it right on the page in classes or ids or selectors while you're refactoring. If you are careful enough with your selectors as you go, you can then move the final result to the global css file at the end with just a copy & paste.

有时你甚至不是问题，你正在处理别人的内联css，你必须重构它。这是<style>in 页面的另一个很好的用途，因此您可以在重构时直接剥离内联 css 并立即将其放置在类或 id 或选择器中的页面上。如果您在使用选择器时足够小心，则只需复制和粘贴即可将最终结果移动到最后的全局 css 文件中。

It's a little hard to transfer everybit of css immediately to the global css file, but with in-page <style>elements, we now have alternatives.

将css 的每一点都立即传输到全局 css 文件有点困难，但是对于页内<style>元素，我们现在有了替代方案。

回答by Danield

In addition to other answers.... Internationalization.

除了其他答案....国际化。

Depending of the language of the content - you often need to adapt the styling of an element.

根据内容的语言 - 您通常需要调整元素的样式。

One obvious example would be right-to-left languages.

一个明显的例子是从右到左的语言。

Let's say you used your code:

假设您使用了您的代码：

<img src="myimage.gif" style="float:right" />

Now say you want your website to support rtl languages - you would need:

现在假设您希望您的网站支持 rtl 语言 - 您需要：

<img src="myimage.gif" style="float:left" />

So now, if you want to support both languages, there's no way to assign a value to float using inline styling.

所以现在，如果您想同时支持这两种语言，则无法使用内联样式为 float 分配值。

With CSS this is easily taken care of with the lang attribute

使用 CSS 可以轻松处理 lang 属性

So you could do something like this:

所以你可以做这样的事情：

img {
  float:right;
}
html[lang="he"] img { /* Hebrew. or.. lang="ar" for Arabic etc */
  float:left;
}

Demo

演示

回答by issa marie tseng

Inline CSS will always, always win in precedence over any linked-stylesheet CSS. This can cause enormous headache for you if and when you go and write a proper cascading stylesheet, and your properties aren't applying correctly.

内联 CSS 将始终优先于任何链接样式表 CSS。如果您开始编写正确的级联样式表，并且您的属性没有正确应用，这可能会给您带来巨大的麻烦。

It also hurts your application semantically: CSS is about separating presentation from markup. When you tangle the two together, things get much more difficult to understand and maintain. It's a similar principle as separating database code from your controller code on the server side of things.

它还会在语义上损害您的应用程序：CSS 是关于将表示与标记分开。当您将两者纠缠在一起时，事情会变得更加难以理解和维护。这与将数据库代码与服务器端的控制器代码分离的原理类似。

Finally, imagine that you have 20 of those image tags. What happens when you decide that they should be floated left?

最后，假设您有 20 个这样的图像标签。当您决定将它们向左浮动时会发生什么？

回答by Sylvain

Using inline CSS is much harder to maintain.

使用内联 CSS 更难维护。

For every property you want to change, using inline CSS requires you to look for the corresponding HTML code, instead of just looking inside clearly-defined and hopefully well-structured CSS files.

对于您想要更改的每个属性，使用内联 CSS 需要您查找相应的 HTML 代码，而不是仅仅查看定义明确且结构良好的 CSS 文件。

回答by Sylvain

The whole point of CSS is to separate content from its presentation. So in your example you are mixing content with presentation and this may be "considered harmful".

CSS 的全部意义在于将内容与其表示分开。因此，在您的示例中，您将内容与演示文稿混合在一起，这可能“被认为是有害的”。

回答by Bruno Jennrich

This only applies to handwritten code. If you generate code, I think that it's okay to use inline styles here and then, especially in cases where elements and controls need special treatment.

这仅适用于手写代码。如果你生成代码，我认为在这里和那时使用内联样式是可以的，尤其是在元素和控件需要特殊处理的情况下。

DRY is a good concept for handwritten code, but in machine-generated code, I opt for "Law of Demeter": "What belongs together, must stay together". It's easier to manipulate code that generates Style tags than to edit a global style a second time in a different and "remote" CSS file.

DRY 是手写代码的一个很好的概念，但在机器生成的代码中，我选择了“德米特法则”：“属于一起的，必须保持在一起”。操作生成样式标记的代码比在不同的“远程”CSS 文件中再次编辑全局样式更容易。

The answer to your question: it depends...

你的问题的答案：这取决于...

回答by Ashish Gupta

I think that even if you want to have a certain style for one element, you have to consider the possibility that you may want to apply the same style on the same element on different pages.

我认为即使您想为一个元素设置某种样式，您也必须考虑您可能希望在不同页面上的同一元素上应用相同样式的可能性。

One day somebody may ask to change or add more stylistic changes to the same element on every page. If you had the styles defined in an external CSS file, you would only have to make changes there, and it would be reflected in the same element in all of the pages, thus saving you a headache. :-)

有一天，有人可能会要求对每个页面上的同一元素进行更改或添加更多样式更改。如果您在外部 CSS 文件中定义了样式，则只需在那里进行更改，它就会反映在所有页面的相同元素中，从而为您省去麻烦。:-)

回答by Noah Beach

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 是很棒的。但是，当您有一堆具有不同属性的不同元素时，这就会成为一个问题。对我来说，一个例子是当我在页面上定位元素时。每个元素作为不同的 top 和 left 属性。如果我把所有这些都放在一个 CSS 中，那真的会让我在 html 和 css 页面之间变得一团糟。所以当你希望所有东西都具有相同的字体、颜色、悬停效果等时，CSS 是很棒的。但是当所有东西都有不同的位置时，为每个元素添加一个 CSS 实例真的很痛苦。这只是我的意见。当您必须深入研究代码时，CSS 在大型应用程序中确实具有很大的相关性。使用 Mozilla Web 开发者插件，它将帮助您找到元素 ID 和类。