应使用语义明确的公共父级（如.card）包裹子元素选择器，避免全局污染；嵌套控制在3层内，推荐BEM命名与CSS自定义属性协同实现样式复用与解耦。
用公共父级包裹多个子元素选择器
当多个组件或区块样式结构相似，比如都有 .title、.content、.footer 这类通用类名时，直接写 .title { color: #333; } 容易污染全局或引发冲突。更稳妥的做法是先锁定一个语义明确的父容器，再在其内部定义子元素样式。
例如，把所有卡片相关样式归到 .card 下：
.card .title { font-size: 1.2em; margin-bottom: 0.5em; }
.card .content { line-height: 1.6; }
.card .footer { padding-top: 0.75em; border-top: 1px solid #eee; }
这样既避免了和其他模块的 .title 冲突，也减少了重复写相同规则的次数。
慎用嵌套过深的选择器链
虽然用父级约束能减少重复，但嵌套太多层（如 .section .list .item .text span）会带来三个实际问题：
立即学习“前端免费学习笔记（深入）”；
- 可维护性差：改个结构就得同步调整个长选择器
- 权重过高：容易覆盖不了其他本该生效的样式（比如
!important都压不住） - 性能略低：浏览器匹配时需逐级回溯，尤其在动态增删节点时更明显
建议控制在 3 层以内，优先用有意义的中间类（如 .card-header）替代纯结构路径。
用 BEM 命名 + 公共父级降低耦合
BEM 不是必须，但它的思路——把模块作为作用域边界——天然适配“复用父级”的需求。关键在于：父级类名本身要具备独立语义，而不是靠 DOM 位置临时拼凑。
比如不写 article > h2，而是统一用 .article__title；所有卡片都挂 .card，所有按钮都挂 .btn。这样即使父级变了（比如从 div 换成 section），样式依然有效。
常见误操作：
- 给父级加
id再写#sidebar .menu-item→ ID 不可复用，违背“公共”初衷 - 依赖伪类或属性选择器做父级（如
[data-type="card"] .body）→ 可读性差，调试困难 - 把父级写成过于宽泛的标签名（如
main .title）→ 实际上还是全局污染
用 CSS 自定义属性配合父级作用域
如果多个子元素需要共享颜色、间距等值，又不想硬编码重复数值，可以在父级上定义 CSS 变量，子元素直接继承或引用：
.card {
--card-title-color: #2c3e50;
--card-spacing: 1rem;
}
.card .title { color: var(--card-title-color); }
.card .content { padding: var(--card-spacing); }
这种方式比单纯复用选择器更进一步：不仅减少选择器重复，还把样式逻辑集中到了父级声明中，改一处就能影响全部子元素。
注意：var() 不支持 IE，若需兼容，得搭配 PostCSS 插件或回退值（如 color: #2c3e50; color: var(--card-title-color);）。
真正难的不是怎么写选择器，而是判断哪些“看起来一样”的样式，其实业务语义不同——比如两个 .btn 看似能共用，但一个在表单底部，一个在弹窗右上角，交互逻辑和上下文完全不同。这时候强行塞进同一个父级，反而增加理解成本。
