Block命名须带业务/团队前缀（如nc-btn、ds-card），禁用通用词；Element禁止嵌套与语义冗余（如user-card__avatar__icon）；Modifier须表稳定状态（如btn--loading），禁用位置/视觉描述；所有规则需通过stylelint+Git Hook+CI三阶强制校验。
Block名必须带业务/团队前缀，不能用通用词
Design System 的 Block 名不是“看起来像组件”就行，而是要从源头防冲突。比如按钮不能叫 button，因为 Ant Design、Element Plus 都在用；也不能叫 ui-button，“ui-”太泛，后续加个 ui-input 就和设计系统里已有的 ds-input 语义打架。
推荐格式：nc-btn（nc = your team/product initials）、ds-card、myapp-form。这些前缀在 npm 包名、CSS 类名、React 组件名里都能对齐。
- 禁用
base-btn、common-card、global-header—— 这些词在 PR 评审时一眼就能识别为命名失焦 - React/Vue 文件名小写中划线化可直接映射：如
UserCard.vue→ Block 名应为user-card，不是usercard或userCard - 前缀一旦定下，就焊死在
stylelint规则和 Git Hook 里，否则三个月后会出现btn--primary和ds-btn--primary并存
Element 命名禁止嵌套、禁止重复语义
BEM 的 __ 表达的是逻辑归属，不是 DOM 深度。看到 user-card__avatar__icon 或 user-card__user-card-title 就该立刻拦截——前者违反单层 Element 约束，后者是语义冗余，且会卡在 CI 的 stylelint-selector-bem-pattern 校验上。
-
user-card__avatar✅：avatar 是 user-card 的一部分，不可脱离存在 -
user-card__avatar-icon✅：把 icon 视为 avatar 的视觉变体，仍属同一层级 -
user-card__avatar__icon❌：三段式结构不合法，选择器无法通过校验 -
user-card__user-card-title❌：“user-card-”前缀重复；title 已足够表达用途；一旦抽成独立text-headingBlock，迁移成本翻倍
Modifier 必须表达稳定状态，不能依赖位置或视觉细节
修饰符不是“换个颜色”或“放得靠右一点”的临时描述，而是可复用、可预测的状态标识。例如 btn--loading ✅，btn--in-modal ❌；card--dark ✅，card--blue ❌。
立即学习“前端免费学习笔记（深入）”；
- 推荐用布尔型（
--disabled、--active）或键值型（--size-large、--variant-outline） - 避免模糊词：
--red、--top、--small（尺寸应由主题变量或系统级 scale 控制） - 多个 Modifier 可共存（
btn--primary--large），但前提是逻辑正交；btn--primary--red就是冲突信号 -
btn__text--hidden合法，但btn--primary__text是非法写法——修饰符不能跨级挂载
所有规则必须通过 stylelint + Git Hook + CI 三阶校验
光写进文档没用。Design System 的 BEM 规则是代码契约，不是风格建议。只要漏掉一个 ds- 前缀，或写了 __icon__svg，就必须在本地提交前被拦住。
-
stylelint配置需启用stylelint-selector-bem-pattern，并自定义componentName正则（如^ds-[a-z]+(-[a-z]+)*$） - Git Hook（pre-commit）调用
stylelint --fix自动修正基础问题，失败则中断提交 - CI 流水线增加强制检查步骤：运行
stylelint --max-warnings=0，任何警告即失败
真正难的不是写出规则，而是让所有人每次敲 class=" 的时候，脑子自动过滤掉 button 这种裸名、header__logo 这种泛容器组合、--right 这种位置依赖型修饰符——这需要前三阶校验焊得足够紧，紧到手误都过不了 pre-commit。
