CSS 样式混乱主因是类名未加命名空间或上下文限制导致全局污染；应通过组合选择器、BEM 命名、:is() 合并规则、作用域 CSS 或手动前缀等方式实现样式隔离与可维护性。
为什么 .btn 一加样式就全乱了
因为多个模块都用了 .btn，没加命名空间或上下文限制，CSS 规则直接全局生效。浏览器按层叠顺序（source order + specificity）应用样式，但开发者常误以为“后写的一定覆盖前写的”，其实 .header .btn 比单独的 .btn 权重高，哪怕它写在前面。
- 检查冲突时优先看 computed styles 里的 specificity 值，不是源码顺序
- 避免用
!important掩盖问题，它会让后续维护者无法通过常规层叠修正样式 - 同一组件内多个按钮状态（如
.btn--primary、.btn--disabled）应基于基础.btn扩展，而非各自独立定义全部属性
.card .title 和 .post .title 怎么互不干扰
靠组合选择器绑定上下文，让 .title 的语义从“所有标题”收窄为“卡片里的标题”或“文章里的标题”。关键是把父容器类名当作命名空间来用，而不是仅靠后代选择器层级堆砌。
- 推荐写法：
.card-title或.card > .title—— 前者 BEM 风格更可控，后者依赖 DOM 结构，一旦.title被包进新标签就失效 - 慎用
.card .title span这类多层后代选择器：可读性差、权重虚高、重构时极易断裂 - 如果父容器是动态插入的（如 modal），确保 CSS 在其挂载前已就绪，否则可能短暂出现无样式状态
用 :is() 简化多层级重复书写
当多个容器都需要统一处理某类子元素（比如所有 .modal、.drawer、.tooltip 里的 .close），不用写三遍 .modal .close、.drawer .close、.tooltip .close，用 :is() 合并：
:is(.modal, .drawer, .tooltip) .close {
position: absolute;
top: 8px;
right: 8px;
}
-
:is()内部选择器只要有一个匹配，整条规则就生效，且 specificity 取内部最高值（不是平均值） - 不支持 IE，若需兼容，得回退为重复书写或用预处理器
@each - 别和
:where()混用——后者会归零 specificity，可能导致本该生效的样式被更低权重要素覆盖
层级过深导致样式难维护？试试作用域 CSS 或 CSS Modules
纯 CSS 中写 .layout .sidebar .nav .item .link:hover 不仅难读，还容易因 DOM 微调而失效。现代方案更倾向让样式与组件绑定：
- Vue 单文件组件中用
，Svelte 用class:active配合:global()显式透出 - React 项目用 CSS Modules，
import styles from './Button.module.css'后，styles.root是哈希类名，天然隔离 - 即使不用构建工具，也可手动加命名空间前缀（如
u-btn表示 utility，cmp-card表示 component），比无约束的.btn安全得多
真正麻烦的不是怎么写选择器，而是当一个 .list-item 同时出现在侧边栏、弹窗、表格里时，是否真的需要三套不同样式——多数时候，只需提取共性，再用组合选择器微调差异点。
