BEM禁止后代选择器和跨层修饰符，要求所有选择器扁平单类名、Modifier仅作用于Block或Element本身、第三方组件用Wrapper隔离、Sass嵌套必须用&\_\_和&--生成扁平类名。
为什么直接写 .card .card__title 就违反BEM？
BEM要求选择器扁平、无上下文依赖，.card .card__title 这种后代选择器隐含了DOM结构假设，一旦HTML里.card__title被移到.card外（比如弹窗复用），样式就失效。更严重的是，它把权重抬高一级，后续覆盖成本变大。
正确写法只有.card__title——类名本身已携带“属于card”的语义，不需要靠父级限定。
- 所有规则必须单选择器：只允许
.block、.block__element、.block--modifier - 禁止出现空格、
>、+等组合符 - 哪怕在Sass里，也禁用
.card { .title { ... } }，改用&__title
.btn__icon--small 这类写法错在哪？
Modifier（修饰符）只能挂在Block或Element上，但不能“跨层”加在Element的Modifier上。.btn__icon--small 暗示“icon的small状态”，但BEM规定：尺寸这类视觉变体应作用于Block本身，即.btn--small，内部.btn__icon自然继承布局缩放。
否则会引发两个问题：一是.btn--small和.btn__icon--small逻辑割裂，改尺寸得同步动两处；二是当.btn__icon被单独复用到其他Block（如.header__icon）时，--small含义就模糊了。
立即学习“前端免费学习笔记（深入）”；
- Modifier必须语义化：
--disabled、--loading可以，--small、--red不行 - 视觉调整优先走Block级Modifier，Element只负责结构角色（
__text、__icon） - 真需微调Element样式，用utility class（如
u-text-xs），不掺入BEM体系
如何处理第三方组件（如react-datepicker）的类名冲突？
第三方组件输出的类名不可控，硬套BEM会失败。正确做法是隔离而非对抗：用一个BEM wrapper Block包住它，再通过属性选择器或:global（CSS Modules下）做最小侵入式覆盖。
例如：<div class="form-field--date"><DatePicker /></div>，然后写.form-field--date .react-datepicker__input——这里.react-datepicker__input不是BEM类名，但.form-field--date是你的边界锚点。
- 永远不要重命名第三方class，也不要试图用
.datepicker__input去模拟它的结构 - 老项目混用
.user-info和.user__info时，先并存，用[class^="user"]查日志定位使用点，再分批收敛 - CI阶段用
stylelint-selector-bem-pattern拦截.card .title这类非BEM写法，比Code Review更及时
Sass里&__和&--怎么用才不踩坑？
&__和&--是Sass中唯一被BEM接受的嵌套语法，因为它们生成的是扁平类名。但很多人误用&__item &__icon（带空格），结果产出.card__item .card__icon——这又退回到后代选择器。
真正安全的写法是：.card { &__title { } &__content { } &--expanded { } }，编译后就是.card__title、.card__content、.card--expanded，零嵌套层级。
- 禁止在
&后加空格，& __title或&__title都错，必须&__title - 媒体查询或伪类要用
@at-root提级，避免生成.card:hover .card__btn - React中建议提前定义
const BLOCK = 'search-bar'，所有className基于它拼接，防止手误写成searchBar__input
