页脚 block 名不能叫 .footer 因易与 cms 或插件撞名，应使用具象可复用的 .site-footer 等；列布局用 .site-footer__column 及 modifier 如 --about；链接须用 .site-footer__link 及状态修饰符；响应式仅改样式不换类名；非链接内容需按语义命名如 __copyright。
页脚 Block 名为什么不能叫 .footer
直接用 .footer 作 Block 名，会在 CMS 输出、第三方插件或 SSR 渲染中撞名——比如 WordPress 主题自带 .footer，你写的 .footer__link 可能被它全局重置掉 padding 或 display。BEM 要求 Block 必须具象且可复用，.site-footer 或 .main-footer 才是合格命名。如果项目已有多个 footer（如邮件模板里的 .email-footer），就更不能共享 .footer 这个泛化词。
列布局该用 Element 还是 Modifier 控制
页脚里“关于我们｜服务支持｜法律条款”这类横向分栏，不是独立 Block，而是 .site-footer 的视觉分区。正确做法是：每列内容包在 .site-footer__column 里，再用 Modifier 标识职责：.site-footer__column--about、.site-footer__column--support。不要写成 .site-footer__about-column —— 这会让“about”语义泄漏到 Element 层，后续加个 --mobile 变体时，类名会变成 .site-footer__about-column--mobile，违反 BEM 元素不可带业务语义的原则。
链接样式怎么避免和全局 a 标签冲突
常见错误是在 SCSS 里写：.site-footer { a { color: #666; } }，这会污染所有子树里的 a，包括嵌套的 .social-link 组件。必须全量接管：.site-footer__link 作为链接元素，状态用 Modifier：.site-footer__link--external、.site-footer__link--small。同时重置原生样式：a, .site-footer__link { text-decoration: none; }，否则浏览器默认下划线可能覆盖你的修饰符效果。
响应式列堆叠时类名要不要改
不需要。移动端把三列变单列，只是改变 .site-footer__column 的 display 和 flex-direction，类名保持不变。真正要动的是 CSS 媒体查询里的布局逻辑，比如：@media (max-width: 768px) { .site-footer__column { width: 100%; } }。如果某列在小屏需隐藏（如“合作伙伴”列），加 Modifier：.site-footer__column--partners--hidden@sm，配合媒体查询控制 visibility，而不是删 DOM 或换类名。
最易被忽略的一点：页脚里常混入非链接内容（版权文字、备案号），它们不属于 .site-footer__link，但也不能裸写 .site-footer__text —— 这个 Element 名太泛。应该按语义拆：.site-footer__copyright、.site-footer__record-number，确保每个 Element 都有明确角色，不靠 DOM 深度猜含义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
