CSS Nesting：原生层级选择与可读性提升

概述

CSS Nesting 允许在选择器内嵌套子选择器与状态选择，提升样式的层次化与可维护性。通过 & 引用当前选择器，并在复杂关系下使用 @nest 语法。

用法/示例

.card {
  & .title { font-weight: 600 }
  &:hover { transform: translateY(-2px) }
  & .btn {
    &:is(:hover, :focus-visible) { background-color: #4f46e5; color: #fff }
  }
}

@nest .grid & { margin-block: 16px }

工程建议

• 控制嵌套层级，建议不超过 3 层，保持选择器简洁。
• 结合组件根类限定作用域，避免选择器溢出导致全局污染。
• 对不支持的环境采用构建时转译或提供非嵌套等价规则。

参考与验证

• MDN：CSS Nesting — https://developer.mozilla.org/docs/Web/CSS/CSS_nesting
• W3C：CSS Nesting Module — https://www.w3.org/TR/css-nesting-1/