如何编写低耦合CSS选择器避免组件样式污染

直接写 .button 会因全局作用域导致样式覆盖，BEM 需配合 Block 边界与 CSS Modules 或 Shadow DOM 才能实现真正隔离。

为什么直接写 .button 会污染其他组件

全局作用域下，.button 只要被多次定义，后加载的就会覆盖前一个——不管它来自哪个模块、哪个团队。常见现象是：改了登录页的按钮样式，结果后台表格里的操作按钮也变蓝了；DevTools 里能看到多个 .button 规则堆叠，权重相同，生效靠打包顺序或引入顺序，根本不可控。

用 BEM 命名但没加 Block 前缀 = 白写

BEM 不是起个长名字就完事。.card__title 如果定义在全局 CSS 文件里，它照样匹配所有带这个类的元素。真正起作用的是 Block 的边界意识：

1. Block 必须代表一个独立可复用单元（如 search-form），不能是泛义容器（如 section）
2. 所有 Element 和 Modifier 都必须从属于且仅属于一个 Block：search-form__input 合法，search-form__header__title 是嵌套滥用
3. Modifier 不能脱离 Block 单独存在：button--loading 正确，--loading 或 button__loading 都破坏语义

Less/Sass 命名空间不是语法糖，是作用域模拟

Less 里写 .ui-kit { .button { ... } } 看似封装，实际只靠编译后选择器前缀生效。关键约束有三个：

1. HTML 根容器必须显式加 class="ui-kit"，否则生成的 .ui-kit .button 永远不匹配
2. &:hover、&::before 这些伪类/伪元素必须写在命名空间块内，否则会漏出成全局 .button:hover
3. 禁止用 #app .button 这类 ID 前缀——ID 无法复用，且违背“组件可移植”原则

CSS Modules 和 Shadow DOM 才是真隔离

命名空间和 BEM 是“软隔离”，靠约定；而以下两种是构建时/运行时硬隔离：

1. CSS Modules：文件名必须含 .module.css，导入后类名自动哈希化（如 styles.button → button_abc123），第三方库的 .button 完全不影响它
2. Shadow DOM：调用 element.attachShadow({mode: 'open'}) 后，内部 仅作用于 shadow root 内部，外部样式进不来，内部样式也透不出去

容易被忽略的是：BEM + CSS Modules 组合最实用——BEM 提供语义结构（styles.card__header），Modules 提供物理隔离，两者缺一不可。纯靠命名，永远防不住意外覆盖。