下一代 CSS 来了!彻底改变 CSS 样式写法
为了解决全局作用域问题，web 开发者们发明了各种方法论和工具。
这些方案虽然有效，但它们要么增加了开发者的心智负担（BEM），要么引入了额外的构建步骤和复杂性（CSS Modules, CSS-in-JS）。
现在，新方案 @scope 已被各大浏览器兼容。
什么是 CSS@scope？
@scope 是一个全新的 CSS @ 规则，它允许我们将样式的作用域限制在 DOM 树的特定部分。即，再也不会泄露出去影响到全局。
传统写法 (BEM)
为了避免样式冲突，我们可能会使用 BEM 命名法：
HTML:
<div class="card">
<h2 class="card__title">文章标题</h2>
<p class="card__content">这里是一些内容...</p>
<a href="#" class="card__link">阅读更多</a>
</div>
<!-- 页面其他地方可能还有一个不相关的 title -->
<h1 class="page-title">FedJavaScript</h1>CSS:
/* BEM 命名法 */
.card__title {
font-size: 1.5em;
color: #333;
}
.card__content {
color: #666;
line-height: 1.6;
}
.card__link {
color: blue;
text-decoration: none;
}这种方式很有效，但缺点是类名冗长、书写繁琐，并且需要团队严格遵守规范。
使用 @scope 的新写法
现在，看看使用 @scope 有多清爽：
HTML (更简洁了！):
<div class="card">
<h2>文章标题</h2>
<p>这里是一些内容...</p>
<a href="#">阅读更多</a>
</div>
<h1 class="page-title">FedJavaScript</h1>CSS:
@scope (.card) {
h2 {
font-size: 1.5em;
color: #333;
}
p {
color: #666;
line-height: 1.6;
}
a {
color: blue;
text-decoration: none;
}
}
/* 这里的 h2, p, a 规则不会影响到 .card 外部的任何元素 */HTML 变得结构更干净了，CSS 更直观了，也不存在样式泄露问题。
:scope 伪类：引用作用域根元素
在 @scope 块内部，我们可以使用 :scope 伪类来直接选中作用域的根元素本身。
@scope (.card) {
/* :scope 指向 .card 元素本身 */
:scope {
border: 1px solid #ccc;
border-radius: 8px;
padding: 1rem;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
h2 {
/* ... */
}
}这使得组件的所有样式（包括容器自身和其后代）都可以被优雅地组织在一起，实现了真正的样式内聚。
@scope 不仅仅是一个新功能，它代表了 CSS 发展的一个重要方向：更好地服务于组件化开发的未来。它解决了 CSS 长期以来的核心痛点，让开发者能够以一种更简单、更直观、更强大的方式来组织和管理样式。