页脚block名不能叫.footer，因易与cms、插件或ssr渲染中的同名类撞名导致样式污染；应使用具象可复用的.site-footer等命名，并用__column+--about等modifier划分列区，链接用__link及状态修饰符，非链接内容按语义拆分为__copyright等独立element，响应式仅改样式不换类名。
页脚 Block 名为什么不能叫 .footer
直接用 .footer 作 Block 名，会在 CMS 输出、第三方插件或 SSR 渲染中撞名——比如 WordPress 主题自带 .footer，你写的 .footer__link 可能被它全局重置掉 padding 或 display。BEM 要求 Block 必须具象且可复用，.site-footer 或 .main-footer 才是合格命名。如果项目已有多个 footer（如邮件模板里的 .email-footer），就更不能共享 .footer 这个泛化词。
列布局该用 __column 还是 --about 控制
页脚里“关于我们｜服务支持｜法律条款”这类横向分栏，不是独立 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 元素不可带业务语义的原则。
链接和非链接内容怎么区分命名
链接必须用 .site-footer__link，状态用 Modifier：.site-footer__link--external、.site-footer__link--small；同时重置原生样式：a、.site-footer__link { text-decoration: none; }，否则浏览器默认下划线可能覆盖你的修饰符效果。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
非链接内容（版权文字、备案号）不能裸写 .site-footer__text——这个 Element 名太泛。应该按语义拆：.site-footer__copyright、.site-footer__record、.site-footer__contact。它们不属于 .site-footer__link，也不应共用同一层命名逻辑。
响应式堆叠时要不要改类名
不需要。移动端把三列变单列，只是改变 .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 或换类名。
最易被忽略的是：不同区块（版权、导航、联系方式）本应是独立 Block，而非全部塞进 .site-footer。强行聚合会导致样式耦合、复用困难、权限态难控制——比如 .site-footer__copyright 在弹窗底部也要出现，它就不该依赖 .site-footer 存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
