BEM类名禁用嵌套选择器因破坏块的独立性，正确做法是用扁平化语义类名如.card__title；目录按block-element-modifier三层组织以提升可维护性；modifier统一用--前缀；避免过度分解，复用性低的结构应使用工具类而非element。
为什么BEM类名里不能用嵌套选择器写样式
因为BEM的核心是“块（Block）”的独立性，一旦你写 .card .title，就等于把 .title 的样式绑死在 .card 结构里，后续想复用 .title 到 .modal 或 .sidebar 就得拷贝样式、改选择器、修权重——这不是扩展，是复制粘贴式维护。
正确做法是让每个元素都有完整语义化的类名：.card__title、.modal__title、.sidebar__title。它们彼此无关，可单独引入、单独覆盖、单独测试。
- 避免写
.card > .title或.card .card__title—— 后者多此一举，前者破坏元素自治 - BEM不禁止父子结构HTML，但禁止用层级关系控制样式；DOM可以嵌套，CSS类名必须扁平
- 工具如
postcss-bem能帮你自动补全，但别依赖它掩盖设计问题
目录结构怎么对应BEM的block–element–modifier三层
目录不是为了“看起来整齐”，而是让开发者一眼看出：这个组件是否能被抽离、是否已存在同类实现、修改后会影响哪些页面。
推荐一级目录即 block 名，内部只放该 block 的核心文件：
立即学习“前端免费学习笔记（深入）”；
-
/components/card/→ 对应card这个 block -
/components/card/card.css→ 只写.card、.card__header、.card--featured等，不出现其他 block 名 -
/components/card/card.js→ 只处理.card自身行为，不操作.button或.icon - 如果需要子组件（比如
card里用了avatar），就直接引用/components/avatar/，而不是在card/下建avatar/
常见错误：把 card__button 单独拆成一个 /components/card-button/ 目录——它不是独立 block，只是 card 的一个 element，不该有自己生命周期。
modifier命名何时用连字符、何时用下划线
BEM官方允许两种 modifier 写法：--large（状态型）和 _theme-dark（上下文型），但混用会导致团队理解成本飙升。
- 统一用双连字符
--表示“开关型”状态：.button--disabled、.input--error - 避免用下划线做 modifier：
.button_theme-primary是反模式，它模糊了 block 和 theme 的边界；主题应由 wrapper 类或 CSS 自定义属性控制 - 如果真要支持多主题，写成
.theme-dark .button+.theme-light .button更清晰，而不是靠 modifier 撑起整套皮肤系统 - 工具如
stylelint-selector-bem-pattern可强制校验，比口头约定靠谱
怎么让BEM不变成“写10个类名才撑得起一个按钮”
过度分解是新手最常踩的坑——看到 button 就拆 button__icon、button__text、button__loader，结果一个按钮 DOM 节点塞满 5 个 class，维护时改一个就要查三处。
- 先问：这个“子结构”是否会被其他 block 复用？
icon是，button__icon不是；所以用独立.icon类，而非.button__icon - 只对真正属于该 block 语义一部分的结构用 element：
.card__body合理，.card__paragraph不合理（段落是通用语义，应由 typography 系统管） - 用 utility class 补位，而不是硬凑 BEM：
.card__header.text-lg.font-bold比.card__header--large-bold更灵活、更易组合 - 当一个 block 内部逻辑开始复杂（比如带 tab 切换、异步加载、动画状态），就该考虑拆成子 block，而不是堆 element
真正的扩展性不来自“每个像素都命名”，而来自“每个命名都有明确归属和替换边界”。类名越多，越要警惕是不是在用 CSS 做本该由 JS 或设计系统承担的事。
