现代 css 提供 :is() 和 :where() 扁平化嵌套选择器，前者继承最高权重，后者恒为 0 权重；css 变量应语义化、局部化声明；all: revert 可隔离第三方样式；@layer 管理层叠顺序而非命名冲突。
用 :is() 和 :where() 缩减嵌套选择器长度
深层嵌套的 CSS 选择器（比如 .card .header .title span em）不仅难维护，还容易因层级过深导致权重失控、覆盖困难。现代 CSS 提供了组合伪类来“扁平化”逻辑。
关键区别在权重：:is() 取括号内最高权重项，:where() 恒为 0 —— 这意味着后者更适合安全复用：
.card :where(.title, .subtitle, .meta) { font-size: 0.9em; }上面这行不会被 .card .title 的高权重干扰，改样式时不用反复加 !important 或补层级。
- 别在
:is()里混用不同权重的选择器（比如:is(.a, #b)），它会继承#b的高权重，可能意外压垮其他规则 -
:where()不支持动态参数（如:where([data-theme="dark"])是合法的，但不能写成:where([data-theme])后再靠 JS 切换——它只做静态匹配） - 旧版 Safari 对
:is()支持较晚（15.4+），若需兼容 iOS 15.0–15.3，优先用:where()或回退到重复书写
CSS 变量必须用 :root 声明，但作用域可以更细
很多人把所有变量塞进 :root，结果一个 --color-primary 在按钮、卡片、表单里含义混乱。变量真正的价值在于「语义分层」和「局部重定义」。
立即学习“前端免费学习笔记（深入）”；
比如深色模式切换不靠媒体查询硬切，而是让组件自己响应上下文：
:root { --bg-base: #fff; --text-primary: #333; }
.card { --bg-base: #f8f9fa; --text-primary: #222; }
.card[data-theme="dark"] { --bg-base: #2d2d2d; --text-primary: #e0e0e0; }
.card { background: var(--bg-base); color: var(--text-primary); }这样 .card 内部样式完全解耦于全局主题，也不依赖 JS 注入 class。
- 避免在
:root里声明带单位的变量（如--gap: 1rem;），改用无单位数字 +calc()组合（--gap: 1; margin: calc(var(--gap) * 1rem);），方便后续用 JS 动态缩放 - 变量名别带具体值（
--color-blue-500），而要表达用途（--button-bg-hover），否则换设计系统时全得重命名 - CSS 变量不支持属性名插值（
var(--prop): var(--val)无效），想动态切display或transform，得靠@property（目前仅 Chrome/Edge 支持）或 JS 控制 class
嵌套样式泄漏？用 all: revert 快速重置子组件
第三方组件（比如 rich-text-editor）自带样式，又不能改它的源码，强行用后代选择器覆盖（.editor p strong）极易漏掉边缘情况，还可能污染父容器。
更稳的方式是「隔离作用域」：给子容器设 all: revert，再显式声明需要的样式：
.rich-editor { all: revert; font-family: inherit; line-height: 1.5; }
.rich-editor * { all: revert; }
.rich-editor p, .rich-editor li { margin-block: 0.5em; }revert 会退回到浏览器默认样式（不是 unset 那种继承失效），对跨框架嵌入特别有用。
-
all: revert不重置direction和unicode-bidi，RTL 场景下需单独声明 - 慎用于有动画的元素——
revert会让transition和animation全部失效，得额外补transition-property - Firefox 对
revert的支持比 Chrome 晚一版（103+），若需兼容 Firefox 102-，可用all: unset+ 手动重置关键属性（font,color,margin等）
为什么 @layer 不能代替 BEM 命名？
@layer 解决的是「层叠顺序」问题，不是「命名冲突」问题。即便你把所有组件样式放进 @layer components，两个同名 class（比如都叫 btn）依然会互相覆盖。
真正该用 @layer 的地方很窄：统一控制第三方库、重置样式、工具类的优先级。例如：
@layer reset { * { margin: 0; padding: 0; } }
@layer base { body { font-family: system-ui; } }
@layer components { .btn { padding: 0.5em 1em; } }
@layer utilities { .m-2 { margin: 0.5rem; } }这样即使第三方 CSS 插在中间，也不会压过 @layer reset。
-
@layer本身不提供作用域隔离，.btn在任何地方都生效，BEM 的.card__button仍是防冲突刚需 - 层名不能含空格或特殊字符（
@layer form/inputs错误，得写成@layer form_inputs） - 未声明的层名（如直接写
@layer third_party却没在别处定义）会被忽略，调试时看不到对应样式，容易误以为规则没加载
嵌套管理最难的不是语法，而是判断「哪里该用变量」、「哪里该用层」、「哪里必须靠命名隔离」——这三者混用时，一个没想清的 var(--color) 就可能让整个暗色模式在某个卡片里突然失效。
