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改谁的样式

修饰符永远只影响它所在的那个类名所对应的节点，不会穿透、不继承、不波及父级或兄弟节点。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• card--featured只改
  这个div的样式，不会让card__title自动变大或变色
• card__title--highlight只改
  这一个h3，不影响card__content或card本身
• 错误做法：.card--featured .card__title { ... } —— 这是后代选择器，破坏BEM隔离性，也违背了“修饰符只作用于自身”的原则
• 正确做法：需要联动变化时，显式加类，比如

  为什么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就必须严格对齐这个名称——拼错一个字母，整个模块就断联。这不是格式问题，是接口一致性问题。