内嵌CSS有什么不好?

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”、“违约。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" />

16 个解决方案

#1

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

在每个页面上表示一个页眉，维护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.

如果页面头是在一个样式表中定义的，那么如果您想要改变页面头在整个站点上的外观，您可以在一个地方修改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放在样式表中可能会有些过分。

#2

The advantage for having a different css file are

拥有不同的css文件的优点是

1. Easy to maintain your html page
2. 易于维护html页面
3. Change to the Look and feel will be easy and you can have support for many themes on your pages.
4. 改变外观和感觉将很容易，你可以支持许多主题在你的页面。
5. 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.
6. css文件将缓存在浏览器端。因此，每次刷新页面或用户浏览站点时，不加载一些kbs数据，就会对网络流量产生一定的影响。

#3

The html5 approach to fast css prototyping

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

或者:

Hacking 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，我的意思是: ，甚至 .它非常方便，但是以后在真正的css文件中不会反映实际的选择器特性，如果您保留它，您将会后悔以后的维护负载。

Prototype with <style> instead

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>
.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

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，你必须重构它。这是页面中

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

要立即将css的每个部分转移到全局css文件中有点困难，但是有了页面内的

#4

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.

所以现在，如果您想同时支持这两种语言，就没有办法使用内联样式为浮动赋值。

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

演示

#5

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个这样的图像标记。当你决定它们应该向左浮动时会发生什么?

#6

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文件。

#7

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的整个要点是将内容与它的表示分离开来。所以在你的例子中，你把内容和呈现混合在一起，这可能被认为是有害的。

#8

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是一个很好的手写代码的概念，但是在机器生成的代码中，我选择了“Demeter定律”:“属于一起的，必须保持在一起”。操作生成样式标签的代码要比第二次在不同的“远程”CSS文件中编辑全局样式容易得多。

The answer to your question: it depends...

你的问题的答案是:这取决于……

#9

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是很棒的。然而，当你有一堆不同的元素具有不同的属性时，这就成了一个问题。我的一个例子是当我在页面上定位元素时。每个元素作为不同的顶部和左侧属性。如果我把所有这些都放在CSS中，这就会使我在html和CSS页面之间的混乱不堪。所以CSS很好，当你想要所有的东西都有相同的字体，颜色，悬停效果等等，但是当所有的东西都有不同的位置时为每个元素添加一个CSS实例真的很痛苦。这只是我的看法。当您需要深入研究代码时，CSS在大型应用程序中确实有很大的相关性。使用Mozilla web developer插件，它将帮助您找到元素id和类。

#10

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文件中定义了样式，那么您只需要在那里进行更改，并且它将反映在所有页面的相同元素中，从而避免了您的麻烦。:-)

#11

Even if you only use the style once as in this example you've still mixed CONTENT and DESIGN. Lookup "Separation of concerns".

即使您只使用一次样式(如本例中所示)，您仍然混合了内容和设计。查找“关注点分离”。

#12

Using inline styles violates the Separation of Concerns principle, as you are effectively mixing markup and style in the same source file. It also, in most cases, violates the DRY (Don't Repeat Yourself) principle since they are only applicable to a single element, whereas a class can be applied to several of them (and even be extended through the magic of CSS rules!).

使用内联样式违背了关注点分离原则，因为您在同一个源文件中有效地混合了标记和样式。在大多数情况下，它也违反了DRY(不要重复自己)原则，因为它们只适用于单个元素，而类可以应用于其中的几个元素(甚至可以通过CSS规则的魔力进行扩展!)

Furthermore, judicious use of classes is beneficial if your site contains scripting. For example, several popular JavaScript libs such as JQuery depend heavily on classes as selectors.

此外，如果站点包含脚本，明智地使用类是有益的。例如，一些流行的JavaScript libs(比如JQuery)很大程度上依赖于类作为选择器。

Finally, using classes adds additional clarity to your DOM, since you effectively have descriptors telling you what kind of element a given node in it is. For example:

最后，使用类为DOM增加了额外的清晰度，因为您可以有效地让描述符告诉您给定节点的类型。例如:

<div class="header-row">It's a row!</div>

Is a lot more expressive than:

比:

<div style="height: 80px; width: 100%;">It's...something?</div>

#13

In-page css is the in-thing at the moment because Google rates it as giving a better user experience than css loaded from a separate file. A possible solution is to put the css in a text file, load it on the fly with php, and output it into the document head. In the <head> section include this:

页面内css是目前最重要的，因为谷歌认为它比从单独文件加载的css提供更好的用户体验。一个可能的解决方案是将css放入一个文本文件中，用php装载它，并将其输出到文档头部。在部分包括以下内容:

<head> ...

<?php
$codestring = file_get_contents("styles/style1.txt");
echo "<style>" . $codestring . "</style>";
?>

... </head>

Put the required css in styles/style1.txt and it'll get spat out in the <head> section of your document. This way, you'll have in-page css with the benefit of using a style template, style1.txt, which can be shared by any and all pages, allowing site-wide style changes to be made via only that one file. Furthermore, this method doesn't require the browser to request separate css files from the server (thus minimising retrieval / rendering time), since everything is delivered at once by php.

将所需的css放在styles/style1中。txt和它会在你的文件的部分被吐出来。通过这种方式，您可以使用样式模板，style1的好处来实现页面内的css。txt，它可以被任何和所有的页面共享，允许通过一个文件进行站点范围的样式更改。此外，这个方法不需要浏览器从服务器请求独立的css文件(因此最小化检索/呈现时间)，因为所有内容都是由php一次性交付的。

Having implemented this, individual one-time-only styles can be manually coded where needed.

实现了这一点后，可以在需要的地方手工编写单个的一次性样式。

#14

Inline CSS is good for machine-generated code, and can be fine when most visitors only browse one page on a site, but one thing it can't do is handle media queries to allow different looks for screens of different sizes. For that, you need to include the CSS either in an external style sheet or in an internal style tag.

内联CSS非常适合机器生成的代码，当大多数访问者只浏览一个站点上的一个页面时，内联CSS就很好了，但是它不能做的一件事是处理媒体查询，以允许不同大小的屏幕有不同的外观。为此，您需要将CSS包含在外部样式表或内部样式标记中。

#15

Even though I totally agree with all the answers given above that writing CSS in a separate file is always better from code reusability, maintainability, better separation of concerns there are many scenarios where people prefer inline CSS in their production code -

尽管我完全同意上面给出的所有答案，在一个单独的文件中编写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文件会导致对浏览器的一个额外的HTTP调用，从而导致额外的延迟。相反，如果CSS是内联插入的，那么浏览器可以立即开始解析它。特别是在SSL HTTP调用上花费更大，增加了页面的额外延迟。有许多工具可以通过插入外部CSS文件作为内联代码来帮助生成静态HTML页面(或页面片段)。这些工具用于生成生产二进制文件的构建和发布阶段。这样我们就获得了外部CSS的所有优势，而且页面也变得更快了。

#16

According to the AMP HTML Specification it is necessary to put CSS in your HTML file (vs an external stylesheet) for performance purposes. This does not mean inline CSS but they do specify no external stylesheets.

根据AMP HTML规范，为了性能目的，有必要将CSS放在HTML文件中(而不是外部样式表)。这并不意味着内联CSS，但是它们没有指定外部样式表。

An incomplete list of optimizations such a serving system might do is:

这样一种服务系统的优化列表可能是:

• Replace image references with images sized to the viewer’s viewport.
• 将图像引用替换为与查看器的viewport大小一致的图像。
• Inline images that are visible above the fold.
• 在折线上面可见的内联图像。
• Inline CSS variables.
• 内联CSS变量。
• Preload extended components.
• 预加载扩展组件。
• Minify HTML and CSS.
• 贬低HTML和CSS。