CSS自定义属性在大型项目中如何命名规范_参考BEM命名法的变量策略

苏承栈

2026-09-08 • 👁 0人浏览过

CSS变量命名必须带功能前缀（如--color-、--space-），禁用裸名；按作用域分层管理，组件级用--ui-button-等隔离；变量管值不管状态，避免--is-hovered类布尔变量；须设fallback并统一注入。 CSS变量命名必须带命名空间前缀裸名如

--color

或

--sm

在大型项目里等于埋雷。不同模块、不同人写的变量一旦撞名，DevTools 里查不到来源，构建后也难定位。Bilibili-Evolved 的

--be-

、

--ui-

、

--video-

前缀不是为了好看，是强制隔离作用域。实操建议：按功能维度定一级前缀：

--color-

、

--space-

、

--radius-

、

--shadow-

，不写

--main-color

这类模糊名二级语义补全，比如

--color-text-primary

而非

--text-primary

，避免和 JS 中的

textPrimary

变量混淆组件级变量挂到组件根节点，用

--ui-button-

而非全局

--button-

，防止污染其他 block 变量名与BEM类名要形成映射关系，但不混用层级

--ui-button__text--large-size

看起来“很BEM”，但这是错的。CSS变量不继承BEM的

__

--

语法结构，强行套用只会让 IDE 补全失效、VS Code 搜索变慢、团队新人看不懂。正确做法是用命名空间 + 语义组合：立即学习 “ 前端免费学习笔记（深入） ”；对应

.button--large

，变量叫

--ui-button-size-large

，不是

--ui-button--large

对应

.button__icon

，变量叫

--ui-button-icon-size

，而非

--ui-button__icon

Modifier 类名（如

--disabled

）仍保留，但它的样式值由变量驱动：

opacity: var(--ui-button-opacity-disabled)

避免用变量替代状态类名

--is-hovered

、

--is-open

这类布尔型变量是反模式。CSS自定义属性适合管“值”，不适合管“状态”。状态变化应靠 class 控制，变量只负责把值注入进去。使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更下载常见错误现象： JS 动态设置

el.style.setProperty('--is-active', 'true')

，然后在 CSS 里写

@media (prefers-reduced-motion) { [style*="--is-active:true"] { ... } }

——不可靠、不可调试、无法被 PurgeCSS 识别用

data-

属性配合变量做开关，比如

[data-state="loading"] { --ui-button-bg: var(--color-surface-disabled); }

，看似灵活，实则绕过 class 系统，破坏 BEM 的“类名即契约”原则应该怎么做：保持

.button--loading

类名存在，它内部用变量：

.button--loading { background-color: var(--ui-button-bg-loading); }

变量注入时机决定维护成本所有变量必须由构建时或 JS 初始化阶段注入，不能靠人工维护多套 CSS 文件。比如深色模式切换，不要写两份

:root

，而应统一声明

--ui-button-bg

，再由 JS 根据主题动态赋值。容易踩的坑：在 SCSS 中用

$map

生成变量，但没导出为 CSS Custom Properties，导致 JS 无法读取把变量写在组件 scoped style 里，结果

:root

中缺失，跨组件复用失败未加 fallback：

color: var(--color-text-primary, #333);

缺失时直接回退，别留空值复杂点在于：变量既要支持设计系统级别的统一控制，又要允许局部覆盖。最稳的方式是三层作用域 ——

:root

（全局）、组件根元素（

.card

）、伪类或 modifier（

.card--featured

），逐层

var()

覆盖，而不是堆砌

!important

或嵌套 selector。

相关文章