有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>
与将 specific-component-style.css 包含到 head 部分相比，将 specific-component-style.css 包含在中页有什么缺点？
页面将如何呈现？会不会:
- 开始加载 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 文件？
最佳答案
主要有两个缺点:
- 你失去了代码的可维护性
- 如果该 CSS 影响它之前的任何元素，您可能会遇到 FOUC .
理论上，也有轻微的性能损失，但可以忽略不计:当遇到新的样式表资源时，渲染会暂停。 “渲染阻塞” 和脚本执行或 DOM 构建阻塞之间应该有明显的区别。浏览器将继续做它能做的任何其他事情，并将阻止任何请求 repaint() 的脚本，直到资源解析，此时，CSSOM 被重建，所有现有的 DOM 元素都将根据新的 CSSOM 检查，所有暂停脚本将继续。
如果您的 <style>指的是仅在该特定 View /组件/页面中遇到的异常，将其添加到受规则影响的元素之前是有意义的。但是，如果您养成习惯，迟早您会希望所有风格都集中在一个地方；你的元素将变得更难维护。
根据一般原则，您不应该这样做。
这也很大程度上取决于您的元素规模。在小元素上，这是无关紧要的。在涉及大型团队的大型元素中，这是完全禁止的，因为没有人会记得您的异常(exception)。因此，有时这是失去职位或至少失去地位的正当理由。ツ
最后但并非最不重要的一点是，特别是如果您不被视为专家，那么评估您的工作的人可能会根据您的兴趣来解释它(例如，知识少于您的人可能会将其视为你没有做好你的工作)。
话虽如此，浏览器并不关心。如果通过验证，则会应用并呈现。
另一个小技术问题(对于 <style> 标签，而不是 <link> s)是内联 CSS 从不缓存。它每次都与标记一起加载，而加载样式表中的常规 CSS 不再占用带宽。但是，同样，如果我们谈论的是几行代码，那是无关紧要的。
关于html - 2018年包含CSS文件中页有什么缺点？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50149884/