css - 内联 CSS 有什么不好？

Question

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

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

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

示例（这很糟糕吗？）：

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

score 224 · Accepted Answer

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

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

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

<div class="pageheader">

如果页眉是在单个样式表中定义的，那么如果您想更改页眉在整个站点中的外观，您可以在一个地方更改 css。

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

score 72 · Accepted Answer

拥有不同的 css 文件的好处是

易于维护您的 html 页面
更改外观将很容易，并且您可以在页面上支持许多主题。
您的 css 文件将被缓存在浏览器端。因此，您无需在每次刷新页面或用户浏览您的网站时都加载一些 kbs 数据，从而为 Internet 流量做出一点贡献。

score 31 · Accepted Answer

快速 css 原型设计的 html5 方法

或者：<style>标签不再只是头部！

破解 CSS

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

没有内联样式属性

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

原型`<style>`代替

您将使用内联 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>

重构别人的内联css

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

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

score 25 · Accepted Answer

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

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

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

假设您使用了代码：

<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;
}

演示

score 17 · Accepted Answer

内联 CSS 将始终优先于任何链接样式表 CSS。如果并且当您编写适当的级联样式表并且您的属性没有正确应用时，这可能会让您非常头疼。

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

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

score 13 · Accepted Answer

使用内联 CSS 更难维护。

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

score 12 · Accepted Answer

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

score 11 · Accepted Answer

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

DRY 对于手写代码来说是一个很好的概念，但在机器生成的代码中，我选择了“得墨忒耳法则”：“属于同一事物的事物，必须永远在一起”。操作生成样式标签的代码比在不同的“远程” CSS 文件中第二次编辑全局样式更容易。

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

score 5 · Accepted Answer

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

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

score 4 · Accepted Answer

以您喜欢的方式编写代码，但如果您将其传递给其他人，最好使用其他人所做的事情。CSS有原因，内联也有原因。我两者都用，因为这对我来说更容易。当您有很多相同的重复时，使用 CSS 非常棒。但是，当您有一堆具有不同属性的不同元素时，这就会成为一个问题。对我来说，一个例子是当我在页面上定位元素时。每个元素作为不同的 top 和 left 属性。如果我把这一切都放在一个 CSS 中，那真的会惹恼我在 html 和 css 页面之间的混乱。因此，当您希望所有内容都具有相同的字体、颜色、悬停效果等时，CSS 非常棒。但是当所有内容都有不同的位置时，为每个元素添加一个 CSS 实例真的很痛苦。这只是我的意见。当您必须深入研究代码时，CSS 在大型应用程序中确实具有很大的相关性。使用 Mozilla Web 开发者插件，它将帮助您找到元素 ID 和类。

score 3 · Accepted Answer

即使您只使用此示例中的样式一次，您仍然混合了 CONTENT 和 DESIGN。查找“关注点分离”。

score 3 · Accepted Answer

除了其他答案之外，另一个问题是它违反了 MDN 推荐的内容安全策略，https: //infosec.mozilla.org/guidelines/web_security#content-security-policy

他们使用的理由是内联javascript是有害的、XSS 等，但这并不能证明为什么内联样式也应该被禁用。也许有人可以评论为什么，但在那之前，我将只依靠上诉权威并声称：避免内联样式是一种安全最佳实践。

score 2 · Accepted Answer

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

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

最后，使用类为您的 DOM 增加了额外的清晰度，因为您实际上有描述符告诉您其中的给定节点是什么类型的元素。例如：

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

比以下更具表现力：

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

score 2 · Accepted Answer

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

score 1 · Accepted Answer

页面内 css 是目前最流行的，因为 Google 将其评为比从单独文件加载的 css 提供更好的用户体验。一种可能的解决方案是将 css 放在一个文本文件中，使用 php 动态加载它，然后将其输出到文档头中。在该<head>部分中包括以下内容：

<head> ...

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

... </head>

<head>将所需的 css 放在 styles/style1.txt 中，它会在您的文档部分中被吐出。这样，您将拥有页面内 CSS，并受益于使用样式模板 style1.txt，它可以由任何和所有页面共享，允许仅通过该一个文件进行站点范围的样式更改。此外，这种方法不需要浏览器从服务器请求单独的 css 文件（从而最大限度地减少检索/渲染时间），因为一切都是由 php.ini 一次性交付的。

实现这一点后，可以在需要的地方手动编码单独的一次性样式。

score 0 · Accepted Answer

尽管我完全同意上面给出的所有答案，即在单独的文件中编写 CSS 总是比代码的可重用性、可维护性、更好的关注点分离更好，但在许多情况下，人们更喜欢在生产代码中使用内联 CSS -

外部 CSS 文件会导致对浏览器进行一次额外的 HTTP 调用，从而增加延迟。相反，如果 CSS 是内联插入的，那么浏览器可以立即开始解析它。特别是通过 SSL 的 HTTP 调用成本更高，并且会增加页面的额外延迟。有许多工具可以通过将外部 CSS 文件作为内联代码插入来帮助生成静态 HTML 页面（或页面片段）。这些工具用于生成生产二进制文件的构建和发布阶段。通过这种方式，我们获得了外部 CSS 的所有优势，并且页面变得更快。

score 0 · Accepted Answer

根据AMP HTML 规范，出于性能目的，有必要将 CSS 放入您的 HTML 文件（相对于外部样式表）。这并不意味着内联 CSS，但它们确实没有指定外部样式表。

此类服务系统可能进行的优化的不完整列表是：

用尺寸适合查看者视口的图像替换图像参考。

首屏可见的内嵌图像。

内联 CSS 变量。

预加载扩展组件。

缩小 HTML 和 CSS。

score 0 · Accepted Answer

0

除了其他答案，您不能针对内联 CSS 中的伪类或伪元素

于 2020-02-10T12:54:29.463 回答

score 0 · Accepted Answer

我们创建了一个模板驱动的工件生成器，它为任何类型的文本工件提供包含文件功能——HTML、XML、计算机语言、非结构化文本、DSV 等。（例如，它非常适合处理常见的 Web 或手册页标题和没有脚本的页脚。）

一旦你有了它并使用它在“head”标签中提供“style”标签，“关注点分离”参数就消失了，取而代之的是“我们必须在每次更改模板后重新生成”和“我们有从它生成的内容中调试模板”。自从第一种计算机语言获得预处理器（或有人开始使用 M4）以来，这些抱怨就一直存在。

总而言之，我们认为 CSS 文件或“样式”标签的元化功能比元素级样式更简洁且不易出错。但这确实需要一些专业的判断，所以新手和杂乱无章的人不会打扰。

css - 内联 CSS 有什么不好？

19 回答 19

快速 css 原型设计的 html5 方法

破解 CSS

没有内联样式属性

原型<style>代替

重构别人的内联css

Related

Reference

原型`<style>`代替