关于前端:现代-CSS-解决方案原生嵌套Nesting

很早之前，就写过一篇与原生嵌套相干的文章 — CSS 行将反对嵌套，SASS/LESS 等预处理器已无用武之地？，彼时 CSS 原生嵌套还处于工作草案 Working Draft (WD) 阶段，而明天（2023-09-02），CSS 原生嵌套 Nesting 终于成为了既定的标准！

CSS 原生嵌套语法

在之前，只有在 LESS、SASS 等预处理器中，咱们能力应用嵌套的写法，像是这样：

div {
    & > p {color: red;}

    &:hover {color: yellow;}
}

从 Chrome 112 开始，原生 CSS 也能够应用嵌套语法了。

其语法规定大抵如下：

parentRule {
  /* parent rule style properties */
  & childRule {/* child rule style properties */}
}

CSS 原生嵌套语法能力边界

大部分同学对嵌套应该还是十分相熟的，上面咱们一起看看，CSS 原生嵌套的能力边界，语法反对范畴。

反对嵌套，并且反对多层嵌套

这个很好了解，间接看 DEMO：

<div class="g-container">
    <h3 class="g-h3">CSS 
        <span class="g-span">Nesting</span>
    </h3>
</div>

div {
    border: 1px solid #000;
    
    .g-h3 {
        color: red;
        
        .g-span {color: blue;}
    }
}

成果如下：

当然，这里有个值得注意的点。如果咱们不应用具体的 ClassName，而是应用 标签名称选择器，像是这样：

div {
    border: 1px solid #000;
    
    h3 {
        color: red;
        
        span {color: blue;}
    }
}

嵌套规定是不会失效的，此时，咱们须要在 标签名称选择器 前，加上 & 合乎：

div {
    border: 1px solid #000;
    
    & h3 {
        color: red;
        
        & span {color: blue;}
    }
}

与 SASS 等相似，& 符号在嵌套中，也示意嵌套的父选择器自身，因而，下面两个嵌套选择器最终的表达式实则为：

• div h3 {color: red};
• div h3 span {color blue};

在嵌套中应用伪元素和伪类

间接上代码，这个也是传统 CSS 预处理器反对的内容：

div {
  /* ... */
  &:hover {color: red;}

  &:is(.content, footer) {padding: 16px;}

  &::before {
    content: "";
    /* ... */
  }
}

上述代码中，咱们可能在嵌套中应用伪类、伪元素。

在嵌套中应用媒体查问

这个就比拟有意思了，咱们甚至能够在嵌套中，应用媒体查问语法。

<div class="g-container">
    <h3>CSS Nesting without @media</h3>
</div>
<div class="g-container media">
    <h3>CSS Nesting with @media</h3>
</div>

.media {@media (min-width: 600px) {
      & h3 {color: red;}
  }
}

此时，下方带有 .media class 的容器，在视口宽度大于 600px 的时候，设置 color: red。

成果如下：

残缺的 DEMO，你能够戳这里试一下：CodePen Demo — CSS Nesting Demo

在嵌套中嵌套本身

哈？什么是 在嵌套中嵌套本身？

其实也很好了解，也就是 & 符号的时候，下面提到了，& 符号在嵌套中，也示意嵌套的父选择器自身，因而，咱们还能够有这样的写法：

div {
    & h2 & {/* 示意 div h2 div {} */
    }
}

这种写法也是容许的，咱们只须要将 & 替换成 div 即可，此时示意 div h2 div {}。

总结一下

总结而言，CSS 原生的嵌套性能相当弱小，根本是传统预处理器的平替。应用嵌套规定的益处在于：

1. 更加易读和易保护，嵌套帮忙咱们编写更易于保护的 CSS，基于嵌套，咱们能够更好的管制款式的作用域
2. 更少的代码，嵌套帮忙咱们编写更少的代码，因为咱们不须要一遍又一遍地反复父选择器

随着兼容性的铺开，缓缓地，咱们能够尝试真正使用它们到理论代码中。

最初

好了，本文到此结束，心愿对你有帮忙 :)

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。