作者：@Chris Coyier
原文：https://frontendmasters.com/blog/reminder-that-scope-and-html-style-blocks-are-a-potent-combo/
背景
在现代前端开发中，CSS 的作用越来越重要，尤其是在组件化开发的趋势下。为了解决全局样式冲突和提高样式管理的效率，开发者们引入了许多工具和技术来实现 “scoped CSS”，即局部作用域的 CSS。这些工具包括 CSS Modules、Styled Components、Vue 的 <style scoped> 等。然而，最近有一种新的方法引起了关注，即使用纯 HTML 和 CSS 来实现 scoped CSS，而不依赖于任何特定的工具或框架。
要点
本文探讨了一种使用纯 HTML 和 CSS 实现 scoped CSS 的方法，即通过在 HTML 中嵌入 <style> 标签并使用 @scope 规则来定义样式的作用域。这种方法不需要任何额外的工具或框架支持，且具有广泛的适用性。
分析
现有工具的局限性
CSS Modules
需要构建工具的支持，且样式文件与组件分离，增加了维护成本。
Styled Components
虽然提供了组件级别的样式封装，但依赖于 JavaScript，且样式定义与组件逻辑混合，可能影响代码的可读性。
Vue 的 <style scoped>
仅适用于 Vue 框架，且需要特定的构建工具支持。
【第1444期】Vue: scoped 样式与 CSS Module 对比
纯 HTML 和 CSS 的解决方案
@scope 规则
@scope 是一个新的 CSS 功能，允许您将样式限制在特定的 HTML 元素及其子元素中。通过在 HTML 中嵌入 <style> 标签，并使用 @scope 规则来定义样式的作用域。例如：
<div>
<p>Hi ho here we go.</p>
<style>
@scope {
:scope {
border: 1px solid red;
p {
color: red;
}
}
}
</style>
</div>优点
真正的作用域样式：样式只会应用于预期的元素，避免了样式洩漏和意外的后果。
提高效能：可以只载入当前页面所需的样式，减少页面大小和载入时间。
易于维护：样式与 HTML 结构紧密结合，方便更新和管理。
无需额外工具：只需要使用标准的 HTML 和 CSS 即可实现。
浏览器支持
目前，Firefox 浏览器尚不支持
@scope规则，但其他主流浏览器（如 Chrome、Safari）已经支持。根据 Mozilla 的 Bugzilla 记录，Firefox 正在积极开发对
@scope的支持，预计不久的将来会得到全面支持。
这种方法与其他作用域样式解决方案相比如何？
与 CSS 模块、Styled Components 和 Vue 的 <style scoped> 等解决方案相比，这种方法更简单、更直接，并且不需要任何额外工具或设置。然而，其他解决方案可能提供更高级的功能，例如样式组合和动态样式生成。
@scope 规则还能做些什么？
除了创建作用域样式外，@scope 规则还可以：
修改现有的作用域：可以使用
@scope规则修改已存在的作用域，例如添加或覆盖样式。创建嵌套的作用域：可以在
@scope规则内嵌套其他@scope规则，以创建更精细的作用域结构。
这种方法适用于哪些场景？
这种方法适用于各种场景，例如：
构建组件：可以使用这种方法为组件创建独立的作用域样式，避免样式衝突。
创建主题和变量：可以使用这种方法为网站或应用程序的不同部分创建不同的样式主题。
快速原型设计：可以使用这种方法快速创建和测试样式，而无需设置複杂的工具链。
影响
简化开发流程：开发者可以更简单地实现 scoped CSS，减少对特定工具或框架的依赖，降低学习和维护成本。
提高样式管理的效率：通过明确的样式作用域，开发者可以更高效地管理和维护样式，减少样式冲突的可能性。
推动标准化的进程：随着更多浏览器支持 @scope 规则，这种纯 HTML 和 CSS 的解决方案可能会成为行业标准，推动前端开发的标准化进程。
结论
使用纯 HTML 和 CSS 实现 scoped CSS 的方法具有显著的优势，尤其是在简化开发流程和提高样式管理效率方面。虽然目前 Firefox 的支持尚不完善，但随着浏览器的逐步支持，这种方法有望在未来成为前端开发的主流实践。对于开发者来说，掌握这种新的技术趋势将有助于提升开发效率和代码质量。
AI 阅：了解技术资讯的一种方式。
