图注class命名必须隶属明确block，如article-content__caption；禁用泛化.captions，避免冲突与!important覆盖，多列布局中各列应为同一block下的element而非独立block。
图文详情页的图注 class 命名必须带 block 上下文
直接写 .caption 是危险的——它脱离语义层级，极易在多个模块中冲突。BEM 要求每个 element 必须从属于一个明确的 block，哪怕图注只出现在一处。比如文章详情页里所有图片都归于 article-content 这个 block，那么图注就该是 article-content__caption，而不是泛化的 caption 或 fig-caption。
常见错误现象：
– 多个页面共用 .caption，结果一处改样式，另一处图注错位
– 后续加了相册模块，也用 .caption，但需要不同行高和颜色，只能靠 !important 覆盖
实操建议：
– 每个图文容器（如 post-body、gallery-item
– 图注统一用 {block}__caption，不加额外修饰符（状态类用 {block}__caption--small 等）
– 避免嵌套命名，如 post-body__figure__caption —— BEM 不允许 element 嵌套 element
多列排版中的列容器不能直接当 block 用
用 col-1、col-2 这类命名看似直观，但违反 BEM 核心原则：block 应表达「功能/意图」，而非「视觉形态」。列数可能随断点变化，而 block 名一旦写死就难以维护。
使用场景：
– 新闻详情页右侧常有「相关推荐」「作者简介」等固定功能模块
– 电商详情页分「主图区」「参数表」「买家秀」三栏，每栏内容类型稳定
实操建议：
– 把整块多列区域定义为一个 block，例如 product-detail-layout
– 每个功能列作为其 element：product-detail-layout__main、product-detail-layout__specs、product-detail-layout__reviews
– 列宽控制交给 CSS（Flexbox/Grid），不体现在 class 名里
– 若某列需响应式隐藏，用 modifier：product-detail-layout__reviews--hidden-mobile
图注与多列共存时的嵌套边界要清晰
BEM 允许 block 嵌套，但禁止跨 block 访问 element。典型踩坑点：在 product-detail-layout__main 里放一张图，图注却用了 article-content__caption —— 这两个 block 完全无关，样式和逻辑耦合会失控。
性能与兼容性影响：
– 混用 block 名导致 CSS 文件中出现大量重复规则（如两处都定义了 __caption 的 font-size）
– JavaScript 查找元素时依赖 class 名，跨 block 命名会让 querySelector('.article-content__caption') 在非文章页报 null
实操建议：
– 同一 DOM 区域内只归属一个顶层 block；若需复用图注逻辑，提取为独立 block（如 media-figure），内部自包含 media-figure__image 和 media-figure__caption
– 多列布局中，各列内部可有自己的子 block，但不得向上穿透父 block 的命名空间
– 所有 block 名保持小写 + 中划线（media-figure），避免大小写混用引发大小写敏感文件系统问题
真正难的是 block 边界的判断，不是语法
写对 __ 和 -- 很容易，难的是决定「这里到底该不该切出一个新 block」。比如详情页顶部轮播图，有人拆成 hero-slider，有人塞进 article-content 当作 article-content__hero。没有标准答案，但有一条硬约束：只要这个区域会被单独复用（比如 CMS 后台允许编辑者自由插入轮播组件），它就必须是独立 block。
容易被忽略的地方：
– 图注的 alt 文本和 figcaption 内容是否一致？BEM 只管 class，但可访问性要求两者语义对齐，否则 screen reader 会读出矛盾信息
– 多列中某列用 display: none 隐藏时，其内部 block 是否仍需渲染？这会影响 JS 初始化逻辑，和 BEM 命名无关，但常因结构混乱被一起误伤
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
