在日常 Web 开发过程中，前端工程师经常面临且最具挑战性的任务之一便是 CSS 命名规范。伴随着 Block Element Modifier（BEM）规范的广泛采用，开发者逐渐习惯于采用可维护性更高的方式来组织样式。
如今，Chrome 浏览器 118 版本已经支持 CSS @scope，这使得在样式表中实现区块级作用域成为可能，从而进一步增强了 BEM 的优势。这一特性让样式维护变得更加简便，并为前端应用程序提供了更为严格的 CSS 层叠控制。
本文将详细介绍 @scope 的相关功能，以及如何在前端项目中使用它。
1.@scope 介绍
对于 CSS 样式隔离 和 CSS 作用域大家都不陌生，主流的方案包括 CSS Modules、CSS in JS、Shadow DOM、Vue Scoped Styles 等，但是这些方案都有各自的优缺点，但是都不是原生的 CSS 方案，使用和版本升级需要一些学习成本。
Chrome 118 版本中，已经实现对 CSS @scope 的支持，@scope 特性可以为 CSS 样式创建区块级作用域，这使开发人员对 CSS 样式更有控制权，我们现在可以直接在 CSS 文件中具体定义视图部分的作用域。
