CSS @scope: An Alternative To Naming Conventions And Heavy Abstractions
CSS @scope 规则旨在解决长期存在的样式泄漏和过度抽象问题，为大型项目提供了一种更简洁、更可控的原生CSS作用域方案。文章指出，尽管BEM等命名规范在理论上能提供结构，但实践中会导致类名冗长且难以维护；而Tailwind和CSS-in-JS等工具类框架虽然实现了隔离，却引入了构建工具复杂、调试困难以及抛弃CSS级联等新问题。 @scope通过在CSS中直接定义样式的作用域（一个根选择器和一个可选的结束选择器），允许开发者基于HTML元素编写高内聚的样式，从而大幅减少对复杂类名管理的依赖。它的关键优势包括：通过“甜甜圈作用域”精确控制样式生效范围；引入基于作用域邻近性的特异性解析规则，使内层组件样式自然覆盖外层；以及支持嵌套作用域和复杂选择器，提供强大的组合能力。 随着@scope获得Baseline浏览器支持，它成为一种无需牺牲原生CSS特性（如继承、级联）的轻量级隔离手段，有助于简化工具链并让编写可维护的CSS变得更加直接。