css自定义属性不能套用bem命名规则，因语义与机制冲突；正确做法是用连字符连接block/element/modifier三层语义，变量声明必须严格绑定对应block节点。
CSS 自定义属性不能“无缝融合”BEM 命名规则，因为二者语义层级和运行机制根本不同；强行套用 __ 和 -- 会导致 IDE 补全失效、搜索混乱、构建报错，且破坏变量的可维护性。
为什么 --button__text--large 是错的
这种写法混淆了两类符号：CSS 变量的 -- 是声明前缀，BEM 的 -- 是修饰符分隔符，语义冲突。浏览器和工具链不识别 BEM 结构，只按字符串匹配变量名。
-
--button__text--large在 VS Code 中搜__text会命中所有含双下划线的变量，噪音极大 - PostCSS 插件（如
postcss-custom-properties）某些版本会将__视为非法标识符，直接报错 - DevTools 里看不出这个变量属于哪个 Block，调试时无法快速定位作用域
-
.button__text是结构选择器，依赖 HTML 层级；而变量是纯字符串键，没有结构感知能力
正确映射 BEM 语义的变量命名格式
变量名应显式编码三层语义：功能模块（Block） + 子用途（Element） + 状态变体（Modifier），全部用连字符 - 连接，不引入 BEM 特有符号。
- 对应
.user-card__avatar--rounded→--user-card-avatar-rounded（✅） - 对应
.el-button--primary→--ui-button-color-primary（✅，ui是命名空间，button是 Block，color是模块，primary是 Modifier） - 禁用
--button-bg--primary（❌ 混用--）、--ui-button__bg-primary（❌ 引入__） - 避免泛化名：
--primary-color❌，应为--app-primary-color或--form-primary-color，绑定上下文防覆盖
变量作用域必须和 BEM Block 节点对齐
命名只是“地址”，真正起作用的是声明位置。BEM 的 Block 元素（如 .user-card）天然就是变量作用域锚点。
- 全局变量只放在
:root或[data-theme]下，用于主题色、间距基数等跨 Block 共享值 - Block 级变量必须声明在该 Block 规则内：
.user-card { --user-card-padding: 1rem; }，这样它只会继承到.user-card及其后代 - 禁止在
:root下声明组件级变量，例如--button-padding，否则会污染全局命名空间 - 组件库（如 Element Plus）用
--el-前缀隔离，本质是强制 Block 边界，不是为了模仿 BEM 类名
变量只管“值”，类名才管“状态”和“归属”
这是最容易被忽略的边界。CSS 变量适合承载可计算、可复用的样式值，但不适合替代状态类名。
- 不要写
--is-hovered: true这类布尔变量（❌），它违背变量设计初衷，且无法被 CSS 直接消费 - 状态变化仍靠 class 控制，比如
.button--hovered，然后用var(--button-bg-hover)注入值 - Modifier 类名（如
--disabled）保留，但它的样式由变量驱动：opacity: var(--ui-button-opacity-disabled) - 一个 Block 的多个视觉维度（颜色、尺寸、圆角）应各自独立变量，而不是堆砌成一个巨无霸变量
真正的难点不在命名格式，而在于团队能否坚持「变量声明位置 = Block 根节点」这一约束——一旦变量脱离对应 Block 的 CSS 规则，BEM 语义就彻底断裂，再规范的命名也救不回可维护性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
