声明CSS变量为何单横杠为通用规范？可否使用双下划线/双横杠命名？

你所使用的双下划线__、双横杠--的BEM风格CSS变量命名方式，不存在官方规范层面的禁用理由，所有支持CSS自定义属性的浏览器都完全兼容该命名格式，且相比纯单横杠的命名方式语义辨识度更高，非常适合设计系统的变量体系搭建。
多数现有设计系统仅使用单横杠划分层级，只是沿用了CSS属性通用的kebab-case命名惯性，没有强制的合理性约束，你完全可以根据团队开发习惯选择适配的命名规则。

使用该命名方式时，需要注意以下事项：

• 统一团队规则：提前在团队内明确变量命名的结构标准，比如固定为--[变量类别]-[块名]__[元素名]--[状态/变体]的格式，所有成员统一遵循，避免出现多种命名风格混杂的混乱情况。
• 控制变量名长度：不要为了严格贴合BEM规则过度堆砌层级，变量名以语义清晰为核心，冗余的前缀可以适当简化，避免出现过长的变量名增加书写成本。
• 对齐组件命名：BEM结构中的块名、元素名要和设计系统的组件命名完全对应，比如按钮组件统一用btn作为块名，不要一会用btn一会用button，降低变量查找的认知成本。
• 增加专属前缀避免冲突：如果项目会引入第三方UI依赖，建议给所有自定义CSS变量增加业务专属前缀，比如--[你的业务前缀]-color-btn__text--hover，避免和第三方库的变量重名导致样式被意外覆盖。
• 适配工具链规则：检查项目用到的样式lint工具、预处理器、PostCSS插件是否对特殊字符有校验规则，提前调整规则避免正常的BEM风格变量名被误判为错误。
• 区分全局和组件变量：全局通用的基础变量（比如主色、间距、圆角等通用token）不需要使用BEM结构，只有组件专属的变量才用BEM风格命名，避免增加不必要的命名复杂度。
• 统一大小写规则：CSS自定义属性本身大小写敏感，建议所有变量统一使用全小写格式，避免大小写拼写错误导致变量不生效。

内容的提问来源于stack exchange，提问作者Benjamin Hargett