作用域 CSS 回来了，你知道吗？ _CSS

文章插图
几年前，消失的作用域 css，如今它回来了，而且比以前的版本要好得多。
更好的是， W3C规范基本稳定，现在Chrome中已经有一个工作原型。我们只需要社区稍微关注一下，引诱其他浏览器构建它们的实现，并完成这项工作。
这是什么思路？【作用域 CSS 回来了，你知道吗？】作用域为CSS带来了两个关键点：

更好地控制哪些选择器针对哪些元素（即更好地操作级联）。
一组样式可以基于DOM中的位置覆盖另一组样式。

局部样式允许你在页面上的单个组件内包含一组样式。你可以使用.title选择器，它只在Card组件内工作，并使用另一个.title选择器，它只在 Accordion 中工作。你可以阻止一个组件的选择器针对子组件中的元素，或者如果需要，也可以允许它们到达。
你不再需要BEM风格的类名。
此外，近度在级联中变成了一等公民。如果两个组件针对同一个元素（具有相同的特异性），内部组件的样式将覆盖外部组件的样式。
它是如何工作的？一切都始于@scope规则和一个选择器，如下：

@scope (.card) {/* 将以下样式局限于`.card`内部 */:scope {padding: 1rem;background-color: white;}.title {font-size: 1.2rem;font-family: Georgia, serif;}}

这些样式都限制在.card元素中。:scope是一个特殊的伪类，针对.card元素本身，.title针对标题内部的标题。
@scope规则本身不增加这些选择器的特异性，所以它们都是(0, 1, 0) 。是的，特异性仍然很重要，但这是好事™? 。稍后再说。
此时，你可以使用普通的后代选择器来实现这一点。但当你在范围内应用内部边界或在页面上重叠多个范围时，新的、以前不可能的选项开始出现。让我们看看它们是怎么做的...
内部范围边界假设你预计将其他组件放入你的Cards中，所以你不希望.title 选择器针对除属于Card的那个标题之外的任何东西。为此，你在范围上设置了一个内部边界，如下：

@scope (.card) to (.slot) {/* 限定的样式只在`.card`内部 ， 但不在`.slot`内部 */:scope {padding: 1rem;background-color: white;}.title {font-size: 1.2rem;font-family: Georgia, serif;}}

把这里的 to 关键字看作直到：这个范围是从.card到.slot定义的。现在，没有一个局限的选择器会针对Card的.slot元素内部的任何东西。所以你可以这样构建你的卡片：

<div class="card"><h3 class="title">Moon lander</h3><div class="slot"><!-- 局部样式不会针对这里的任何东西！ --></div></div>

范围的影响受到了限制，使其不针对.slot内的任何东西。这样，你可以嵌套两个范围，每个范围都可以使用相同的通用标题类名，而不会发生冲突。实际上，你可能根本不再需要类名了：

@scope (.card) to (.slot) {h3 {font-size: 1.2rem;font-family: Georgia, serif;}}@scope (.accordion) to (.slot) {h3 {font-family: Helvetica, sans-serif;text-transform: uppercase;letter-spacing: 0.01em;}}

你可以在 Card 内部放一个 Accordion，或者在 Accordion 内部放一个Card，它们各自的样式不会发生冲突。
这被俗称为甜甜圈范围，因为范围中有一个洞。（如果内部边界选择器针对多个元素，它也可以有多个洞。）
Miriam Suzanne 建议使用这种方式是持续使用data-*属性和属性选择器作为你的范围：
@scope ([data-scope='media']) to (:scope [data-scope]) {/* 限定的样式在这里 */}近度优先 Proximity precedence另一个方面是近度的概念：来自内部范围的样式将覆盖来自外部范围的样式。想象你有这样两个范围：
@scope (.green) {p {color: green;}}@scope (.blue) {p {color: blue;}}将以下内容应用于html 。这里没有内部范围约束，所以两个p选择器都针对这里的内部段落。在这种情况下，内部范围总是优先：

<div class="green"><p>我是绿色的</p><div class="blue"><p>我是蓝色的</p></div></div><div class="blue"><p>我是蓝色的</p><div class="green"><p>但我是绿色的</p></div></div>

注意这目前只在Chrome中有效，需要在chrome://flags中启用实验性Web平台功能标志。
你可以在DevTools中检查，看到每个范围是如何根据其最近的接近性来覆盖另一个的：

作用域 CSS 回来了，你知道吗？

推荐阅读

|如果《三体》敢这么拍，编剧真危险了！

喜多岛麻弥喜多村麻衣

吃饭到最后总会有些剩下，扔了吧又浪费，吃完吧又想着要健康饮食不能暴食，该咋平衡

「汇美潮品」春去夏来,如何穿出优雅的女人味?不会就借鉴日本女生的裙子穿搭

格式化孤单|轻松把握主动权，沟通时多做一步

体坛大满贯鲁媒亲自质疑丁彦雨航去处，和气生财才能破镜重圆，你怎么看？，山东男篮急不可耐

想问一下北京有没有适合零基础准备跨专业考研的本科生学习美术的画室？

4a|国庆中秋期间全国社会大局稳定治安秩序良好

启上神兵|美军2艘航母启动亚太巡航，结束近2个月西太“航母真空”，同1天

中国好声音所有导师名单中国好声音评委都有谁

连衣裙@美女衬衫连衣裙露出了一个肩膀，朦胧感设计让人眼前一亮

阿宽akuanE520智能投影仪测评办公娱乐好帮手

黑凉粉不凝固能补救吗

中国篮球迷妹▲姚明松了一口气，CBA不着急重启了，奥运延期

dn65法兰内径和外径

电竞|英雄联盟：盘点LOL里不太实用的技能，玩家建议最后一个重做

支气管炎发烧几天能退？

竟然还有网页版PS，以后小白都可以在线P图了在线Photoshop图片编辑器网页版

9大招数对付眼睛干涩眼睛发干发涩

案件侦办|电白一名偷车贼被捉！