BEM中的block是独立可复用的功能单元而非容器，modifier仅作用于自身节点；判断标准为：能否脱离上下文独立存在且具明确语义名词命名，如search-form、user-avatar，禁用main-content、section-2等布局占位符。
直接说结论：BEM里的block不是容器，而是功能单元；--modifier不改变父级或兄弟节点样式，只作用于它挂载的那个DOM节点本身。
怎么判断一个元素能不能当block
核心就两点：它能否脱离当前上下文独立存在？有没有明确、可复用的功能语义？
- 能独立存在：删掉它，页面是否缺失某个完整功能（比如搜索、登录、商品卡片）？是 → 有可能是
block - 有明确语义：命名必须是名词，小写+短横线，如
user-avatar、search-form，不能是top-banner（带位置）或my-button（带归属） - 常见误判：
main-content、section-2、container这类纯布局占位符，它们没行为逻辑，也不具备复用价值，不该作为block - HTML标签不是
block：不要因为用了div就叫div-block，block是抽象出来的功能模块，和标签无关
block--modifier和block__element--modifier改谁的样式
修饰符永远只影响它所在的那个类名所对应的节点，不会穿透、不继承、不波及父级或兄弟节点。
-
card--featured只改<div class="card card--featured">这个<code>div的样式，不会让card__title自动变大或变色 -
card__title--highlight只改<h3 class="card__title card__title--highlight"></h3>这一个h3，不影响card__content或card本身 - 错误做法：
.card--featured .card__title { ... }—— 这是后代选择器，破坏BEM隔离性，也违背了“修饰符只作用于自身”的原则 - 正确做法：需要联动变化时，显式加类，比如
<div class="card card--featured"> <h3 class="card__title card__title--featured"> <h3>为什么<code>button__icon--large是错的，而button--large是对的因为
button__icon是button的组成部分，它的尺寸变化通常由button整体状态决定，不是独立可配置的视觉变体。立即学习“前端免费学习笔记（深入）”；
-
button--large描述的是按钮这个功能单元的尺寸变体，语义清晰、可预测、可复用 -
button__icon--large把样式控制权下放到了子元素层级，导致：同一图标在不同按钮里要重复定义；换主题时得搜一堆__icon--*；JS状态管理分散 - BEM不支持
block--modifier__element或block__element--modifier混用语法（如button--large__icon），这是命名结构上的硬性限制 - 真有特殊需求（比如仅图标放大），优先考虑CSS自定义属性或data属性控制，而不是靠BEM层级强行拆分
最常被忽略的一点：BEM不是字符串拼接规则，而是组件契约。一旦
block名在HTML里写成user-card，所有CSS和JS就必须严格对齐这个名称——拼错一个字母，整个模块就断联。这不是格式问题，是接口一致性问题。 -
