直接写 .button 会因全局作用域导致样式覆盖，bem 需配合 block 边界与 css modules 或 shadow dom 才能实现真正隔离。
为什么直接写 .button 会污染其他组件
全局作用域下，.button 只要被多次定义，后加载的就会覆盖前一个——不管它来自哪个模块、哪个团队。常见现象是：改了登录页的按钮样式，结果后台表格里的操作按钮也变蓝了；DevTools 里能看到多个 .button 规则堆叠，权重相同，生效靠打包顺序或引入顺序，根本不可控。
用 BEM 命名但没加 Block 前缀 = 白写
BEM 不是起个长名字就完事。.card__title 如果定义在全局 CSS 文件里，它照样匹配所有带这个类的元素。真正起作用的是 Block 的边界意识：
- Block 必须代表一个独立可复用单元（如
search-form），不能是泛义容器（如section） - 所有 Element 和 Modifier 都必须从属于且仅属于一个 Block：
search-form__input合法，search-form__header__title是嵌套滥用 - Modifier 不能脱离 Block 单独存在：
button--loading正确，--loading或button__loading都破坏语义
Less/Sass 命名空间不是语法糖，是作用域模拟
Less 里写 .ui-kit { .button { ... } } 看似封装，实际只靠编译后选择器前缀生效。关键约束有三个：
- HTML 根容器必须显式加
class="ui-kit"，否则生成的.ui-kit .button永远不匹配 -
&:hover、&::before这些伪类/伪元素必须写在命名空间块内，否则会漏出成全局.button:hover - 禁止用
#app .button这类 ID 前缀——ID 无法复用，且违背“组件可移植”原则
CSS Modules 和 Shadow DOM 才是真隔离
命名空间和 BEM 是“软隔离”，靠约定；而以下两种是构建时/运行时硬隔离：
- CSS Modules：文件名必须含
.module.css，导入后类名自动哈希化（如styles.button→button_abc123），第三方库的.button完全不影响它 - Shadow DOM：调用
element.attachShadow({mode: 'open'})后，内部<style></style>仅作用于 shadow root 内部，外部样式进不来，内部样式也透不出去
容易被忽略的是：BEM + CSS Modules 组合最实用——BEM 提供语义结构（styles.card__header），Modules 提供物理隔离，两者缺一不可。纯靠命名，永远防不住意外覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
