Question

有very old thread人们声明你不应该在正文中包含CSS，但是允许使用MDN states。因此，在页面中间包含CSS是不错的做法？

例如，让我们采用这样的结构：

<html>
  <head>
    <link href="global.css" rel="stylesheet">
  </head>
  <body>
    <h1>Some title</h1>
    <p>Some content</p>
    <img src="some-image.jpg" />

    <link href="specific-component.css" rel="stylesheet">
    <div>
       Specific component that requires the style
    </div>

    <p>Other content</p>
  </body>
</html>

包含特定组件样式的中间页面与将其包含在主要部分相比有哪些缺点？

如何使用它呈现页面？它会是：

开始加载global.css，some-image.jpg，specific-component.css（按此顺序）。
加载global.css后，开始渲染页面，直到specific-component.css <link>元素。
完成加载specific-component.css
渲染页面的其余部分。

或者它会是：

等待global.css和specific-component.css完成加载，然后才开始渲染页面。
如果在specific-component.css之前有20张图片，浏览器会优先处理CSS文件怎么办？

Answer 1

有两个主要缺点：

您失去了代码的可维护性
如果CSS影响之前的任何元素，您可能会遇到FOUC。

理论上，这也是轻微的性能损失，但它可以忽略不计：当满足新的样式表资源时，渲染暂停。应该在＆＃34;渲染阻止＆＃34; 和脚本执行或DOM构建阻塞之间做出明显的区别。浏览器将继续执行其他任何操作，并将阻止任何请求repaint（）的脚本，直到资源结算，此时，重建CSSOM，针对新CSSOM检查所有现有DOM元素，并继续所有暂停脚本。

如果您的<style>引用了仅在该特定视图/组件/页面中遇到的异常，则在受规则影响的元素之前将其添加到那里是有意义的。但如果你从中做出一个习惯，迟早你会希望你把所有的风格放在一个地方;你的项目将变得更难维护根据一般原则，你不应该这样做。

这也很大程度上取决于您的项目规模。在小项目上它是无关紧要的。在涉及大型团队的大型项目中，它是完全被禁止的，因为没有人会记住你的异常。因此，它有时会失去你的位置或至少是你的地位。ツ

最后，但并非最不重要，特别是如果您不被视为专家，那么可以通过评估您的工作的人来解释您的兴趣（例如，人们对您的了解程度低于您把它看作是你没有正常工作的标志。）

话虽如此，浏览器并不关心。如果验证，则应用并呈现另一个小技术问题（在<style>标记的情况下，而非<link> s）是内联CSS 从不缓存。它每次都会与标记一起加载，而加载样式表中的常规CSS不再占用带宽。但是，如果我们谈论几行代码，那就无关紧要了。

Answer 2

Safari和Edge将在['Red Hat Enterprise Linux Extended Update Support 7.2', 'Red Hat Enterprise Linux 7']之前呈现内容，然后在链接的CSS提取后继续呈现。

Firefox将在<link>之前和之后呈现内容，然后在链接的CSS提取后更新页面。您可以使用<link>使其更像Safari / Edge（脚本标记之间的空格是必需的。

Chrome会在发现<link … ><script> </script>时阻止呈现，这意味着它也可能会阻止链接元素之前的内容。计划是与Safari＆amp; amp;边缘https://bugs.chromium.org/p/chromium/issues/detail?id=481122。

如果您发现自己的CSS提取得太晚，可以使用<link>更快地加载它。

Answer 3

如果你在global.css中提供img{width:100px;}而在特定组件css中提供img{width:150px;}，在这种情况下，工作特定于component.css，因为他在global.css之后渲染并覆盖全局。的CSS。

如果你在global.css中提供img{width:100px !important;}而在特定组件css中提供img{width:150px;}，在这种情况下工作global.css，因为我们在global.css中设置了img width重要而它没有由specific-component.css覆盖。

如果你在两者中都很重要，那么就可以使用特定的component.css。并且css引擎总是先编译特定的component.css。（查看inspect元素）

Answer 4

在我看来，这取决于你的工作方式。如果你加载一个完整的页面（无论是手工HTML，还是像Wordpress一样通过CMS生成） - 建议在主体之前加载样式，以使渲染更加平滑和快速。

然而，由于使用像React和Vue这样的组件库（例如）变得越来越流行，将CSS连接到组件是可以接受的，而不是通常的加载组件特定的CSS。样式（这通常应该允许更快的加载时间，特别是在具有动态变化元素的一个页面站点中。

根据渲染顺序，默认情况下，CSS / JS是加载的最高优先级，之后您将获得媒体元素（图像，视频，音频等）。请查看this link或this，详细了解浏览器中的优先级。

在2018年中包含CSS文件有什么缺点？

4 个答案: