内联 CSS 有什么不好？

【问题标题】：What's so bad about in-line CSS?内联 CSS 有什么不好？
【发布时间】：2011-02-06 10:27:51
【问题描述】：

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

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

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

示例（这很糟糕吗？）：

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

【问题讨论】：

  • 我一直反对内联 CSS，即使是单个项目，但我看到很多商业网站充斥着样式属性，这让我想知道实际接受的做法是什么？
  • 我认为内联样式是懒惰的。我这么说是因为我自己经常这样做，所以我知道-为什么-我要这样做，因为我不知道样式是否会保留，所以我曾经在 html 旁边这样做。现在，随着 html5 和对 的实用支持，我使用附近的
  • @yu_ominae - 请记住，“商业网站”并不总是遵循最佳实践；事实上是相当罕见的。决定因素是开发人员是否知道、关心并有时间；或者如果经理愿意分配时间并指导员工实施。当工作优先级是赶上最后期限时，质量通常会降低。
  • 值得注意的是，尽管“商业网站”似乎使用了内联样式，但这可能是使用某些应用内联样式的 jQuery 调用（例如 css()）的结果。

标签： css inline-styles


【解决方案1】：

使用内联 CSS 更难维护。

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

【讨论】：

  • +1 - 当我们的设计师将其作为快速解决方案时，我真的很抱怨，只是为了让一些东西排队。使用外部 CSS 应该意味着永远不必进行大量文本替换，当然除非在单个样式表上操作。昨天我收到了一个控制面板模板，我花了 2 1/2 小时才找到使用内联样式调整图标的实例。令人抓狂的我告诉你.. 抓狂:)
  • 当你有 50 多个 SCSS 并且你的 Inspect 元素只指向压缩的 CSS 时，我不确定是不是 CSS 会在简单性上胜出！
  • @Shadowbob 这就是源图的用途。 thesassway.com/intermediate/using-source-maps-with-sass
  • @TimPost “检查元素”功能诞生是有原因的
【解决方案2】：

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

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

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

<div class="pageheader">

如果页眉是在单个样式表中定义的，那么如果您想更改页眉在整个网站上的外观，您只需在一处更改 CSS。

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

【讨论】：

  • 如果每次我不得不修改图像的浮动或其他一些原本“仅适用于一个元素”的 css 时，我都会得到一个镍币……嗯，我会出去在一家不错的餐厅吃晚饭。
  • 另一种情况，不仅可以使用内联样式，而且是唯一可以设置样式的方法：HTML 电子邮件。
  • 我想知道在今天的 HTML 作为汇编语言世界中这是否仍然适用？
【解决方案3】：

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

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

【讨论】：

    【解决方案4】：

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

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

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

    【讨论】：

    • “总是，总是赢” - 除非在样式表中使用了 !important
    • 我的生活假设是人们是人道的，不会使用这样的怪物。 =)
    • @JamesWestgate 直到有人在内联 css 中使用 !important 来覆盖覆盖......
    【解决方案5】：

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

    【讨论】：

      【解决方案6】：

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

      【讨论】：

      • 我会付给你 5 美元来向 ACM 提交“被认为有害的内联 CSS 样式”。
      【解决方案7】：

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

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

      【讨论】：

      • 我每个月都会问自己这个问题（对网络编程来说相当新），这是我第一次阅读有关缓存的 css 文件的任何内容。就在那里为我做这件事！
      • 我也在考虑缓存，但在我的情况下，我必须处理 15k 行的合并 CSS，不可能维护所有只能使用的大部分垃圾曾经在一个不再存在的页面上。因此，您在每次访问时都向每个人发送 CSS 代码，以获取只有 1% 的流量查看的单个临时页面。我不确定互联网流量论点在每种情况下都有效。幸运的是，Web 组件将会改变一切！
      • @Shadowbob - 使用较小的 css 文件而不是较大的 css 文件不是更好吗？有一个通用的可能用于所有页面，然后有用于其他页面的小的单独样式表。应该更容易维护。如果流量有问题，那么生产可能可以在构建过程中合并为一个。
      • 与其他文件相比，通常 css 文件的大小很小
      【解决方案8】：

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

      【讨论】：

        【解决方案9】：

        快速 css 原型设计的 html5 方法

        或者：&lt;style&gt; 标签不再只是头部！

        破解 CSS

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

        无内联样式属性

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

        用&lt;style&gt; 代替原型

        在您应该使用内联 css 的地方，改为使用页内 &lt;style&gt; 元素。试试看！它在所有浏览器中都能正常工作，因此非常适合测试，但允许您在需要/需要时优雅地将此类 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，你必须重构它。这是页面中&lt;style&gt; 的另一个重要用途，因此您可以在重构时直接剥离内联 css 并立即将其放在页面上的类或 id 或选择器中。如果您在使用选择器时足够小心，则可以将最终结果移动到最后的全局 css 文件中，只需复制和粘贴即可。

        将每一位 css 立即传输到全局 css 文件有点困难，但有了页内 &lt;style&gt; 元素，我们现在有了替代方案。

        【讨论】：

          【解决方案10】：

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

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

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

          【讨论】：

          • 我认为这确实是正确的答案。 “关注点分离”的口头禅只是标准之一。 “局部性”对于易于维护也很重要。关键方面是样式是否可在语义级别重用，而不仅仅是句法。如果是这样的话，那么这张纸是有道理的。例如，我不会仅仅因为两个元素使用它就为“float:right”创建一个类。它取决于语义上相同的元素。 “颜色”样式通常是语义相关的（主题的一部分），并且通常会出现在工作表中。
          【解决方案11】：

          除了其他答案.... Internationalization。

          取决于内容的语言 - 您经常需要调整元素的样式。

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

          假设您使用了您的代码：

          <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

          【讨论】：

            【解决方案12】：

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

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

            【讨论】：

            • 你错过了一些东西：延迟。 更大的问题，真的：嵌入 CSS 意味着每个页面请求都必须包含该 CSS，否则，浏览器可以缓存它。
            • 你是对的。这就是为什么我们在代码非常小的时候内联 CSS，这样它就不会对页面大小造成太大的开销。 Yahoo! 上有一篇非常有趣的文章。性能指南页面developer.yahoo.com/performance/rules.html 表示每天有 60-80% 的用户访问您的网站时缓存为空 (yuiblog.com/blog/2007/01/04/performance-research-part-2) 当然，这完全取决于网站的受欢迎程度 - 网站越受欢迎，获得具有非空缓存的更多。
            • 虽然用户访问您的 站点 时可能缓存为空，但他们不太可能访问您的 页面 时缓存为空缓存。除非页面是一次性使用的（即每个用户只查看一次），否则使用单独的 css 文件会更好。
            • 如今许多现代网页都设计为单页应用程序，整个页面仅在第一次加载。下次通过 AJAX 调用更改页面。因此，即使页面是多用途的，外部 CSS 也只会加载一次。
            【解决方案13】：

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

            此外，如果您的网站包含脚本，则明智地使用类是有益的。例如，一些流行的 JavaScript 库（如 JQuery）严重依赖类作为选择器。

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

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

            比以下更具表现力：

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

            【讨论】：

              【解决方案14】：

              页内 CSS 是目前的主流，因为 Google 认为它提供了比从单独文件加载的 css 更好的用户体验。一种可能的解决方案是将 css 放在一个文本文件中，使用 php 动态加载它，然后将其输出到文档头中。在&lt;head&gt; 部分包括：

              <head> ...

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

... </head>

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

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

              【讨论】：

              • 是的！如果您的所有 css 都在文件中，这对于尽量减少“首次绘制时间”至关重要，它将推迟 DOM 直到用户下载样式表。将您的关键样式放在头部的内联 节点中，您可以立即开始渲染 DOM 并推迟外部样式表。在 ~3G 连接和感知速度方面起着重要作用。为您的回答 +1
              【解决方案15】：

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

              【讨论】：

                【解决方案16】：

                根据AMP HTML Specification，出于性能目的，有必要将 CSS 放入您的 HTML 文件（相对于外部样式表）。这并不意味着内联 CSS，而是 they do specify no external stylesheets。

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

                • 将图片引用替换为适合查看者视口大小的图片。
                • 在首屏可见的内嵌图片。
                • 内联 CSS 变量。
                • 预加载扩展组件。
                • 缩小 HTML 和 CSS。

                【讨论】：

                  【解决方案17】：

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

                  【讨论】：

                    【解决方案18】：

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

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

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

                    【讨论】：

                      【解决方案19】：

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

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

                      【讨论】：

                      • 是的，如果您必须启用此 CSP，您需要做很多工作来提供 nonce 值或删除内联样式并用 CSS 替换它们。
                      • 这件事不幸发生在我身上，我吸取了教训。我需要重写我的大部分代码以使我的应用程序使用 CSP 策略运行并且不会遇到浏览器错误。 “拒绝执行内联脚本，因为它违反了以下内容安全策略指令：...”
                      猜你喜欢
                      • 2013-09-30
                      • 1970-01-01
                      • 1970-01-01
                      • 2010-09-17
                      • 2014-05-03
                      • 2016-12-28
                      • 1970-01-01
                      • 1970-01-01
                      • 2013-10-21
                      相关资源
                      最近更新 更多
                      热门标签
                      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode