CSS前瞻：用@scope 定义你的CSS作用域

CSS又整活了！最近，CSS的新特性 @scope 开始被浏览器兼容了。这个新特性为CSS样式提供了更精细的作用域控制，让开发者能够更灵活地管理和应用样式。

欢迎加入「🌍独立全栈开发交流群」，一起学习交流前端和Node技术

@scope定义和作用

@scope 是一个CSS的块级规则，它允许你创建一个作用域，这个作用域定义了一组样式规则应用的特定区域。说到这里是不是让你想到了Less和SCSS的作用域？没错，它们的“作用域”是一个概念。

基本使用

作用域由两部分组成：作用域根和作用域限制。

• 作用域根(<scope-start>)：定义样式开始应用的节点
• 作用域限制(<scope-end>)（可选）：定义不受作用域影响的节点
• 样式规则（<rule-list>）：@scope 内定义的样式

@scope [(<scope-start>)]? [to (<scope-end>)]? {
  <rule-list>
}

示例1：使用作用域根

假设你有一个博客文章页面，它包含一个文章区块和一个评论区块。你想让这两个区块中的链接有不同的颜色。

/* 为文章区块定义一个作用域 */
@scope (.article-section) {
  /* 只在文章区块中应用这个样式 */
  a { color: blue; }
}
 
/* 为评论区块定义一个作用域 */
@scope (.comments-section) {
  /* 只在评论区块中应用这个样式 */
  a { color: green; }
}

在这个例子中，.article-section 内的所有链接将会是蓝色，而 .comments-section 内的链接将会是绿色。

示例2：使用作用域限制

现在，假设在你的文章区块中，你有一个特别的引用部分，你不希望在这个部分应用上述的蓝色链接样式。

/* 为文章区块定义一个作用域，但排除引用部分 */
@scope (.article-section) to (.news-section .quote) {
  a { color: blue; }
}

在这个例子中，.article-section 内的链接仍然是蓝色，但文章里 .quote 类中的链接不会受这个作用域限制。（请到Codepen里查看）

@scope的高级特性

现在来看一些高级用法。

特殊选择器：:scope 和 &

我们可以用 :scope 和 & 指代作用域根元素，例如

<div class="container">
    <p>这是一段文本。</p>
    <div class="sub-container">
        <p>这是另一段文本。</p>
	      <div>这是一个div</div>
    </div>
</div>

分别测试 :scope 和 &，会发现效果一样，因为此时它们都等价于 .container

@scope (.container) {
    :scope > p { color: red; }
}
@scope (.container) {
    & > p { color: red; }
}

作用域嵌套

嵌套规则：@scope 规则可以嵌套。嵌套规则允许开发者创建复杂的样式结构，同时避免样式的冲突和污染。

/* 外部作用域 */
@scope (.outer-scope) {
  p { color: red; }
 
  /* 内部嵌套作用域 */
  @scope (.inner-scope) {
    p { color: blue; }
  }
}
 

在这个例子中，.outer-scope 内的段落是红色的，但在 .inner-scope 内的段落是蓝色的。

使用数据属性定义作用域

@scope 还可以与HTML的数据属性（如 data-scope）结合使用，以创建更具体的作用域。例如，你可以通过给不同部分的HTML元素添加不同的数据属性，然后在CSS中使用这些属性来定义作用域：

/* 为带有特定数据属性的元素定义作用域 */
@scope ([data-scope='main-section']) {
  p { color: red; }
}
 
@scope ([data-scope='sidebar']) {
  p { color: blue; }
}
 

在这个例子中，data-scope='main-section' 的段落将会是红色，而 data-scope='sidebar' 的段落将会是蓝色。

结语

@scope 规则的引入是CSS发展中的一次重要进步，虽然现在浏览器支持度还不够高，但对于这样重要的特性，显然不会让开发者等太久，相信很快主流浏览器都会支持的。