必须优先重命名三类高危类名：泛化命名（如.btn、.card）、js硬编码类名（通过queryselector全局搜索定位）、高频修改文件中的混杂类名（如.nav、.sidebar）；工具类统一加u-前缀隔离。
旧CSS里哪些类名必须优先重命名
不是所有类名都值得动。先筛出三类高危项：.btn、.card、.list这类泛化命名，它们在JS里被querySelector硬编码，在HTML里被随意复用，还常搭配!important强行覆盖——改一个，全站抖三抖。
实操建议：
- 全局搜索
document\.querySelector\(['"]\.[a-z]+['"]\)，找出被JS直接依赖的类名，这些要加别名过渡，不能删 - 查
git blame高频修改的CSS文件，比如header.css或common.css，里面.nav、.sidebar大概率已混入多个业务逻辑，得先加wrapper隔离 - 跳过
.clearfix、.hidden这类工具类，统一迁到u-clearfix、u-hidden前缀下，和BEM业务类物理隔离
怎么给现有HTML不动结构就套上BEM类名
别碰DOM层级。老项目里<div class="form"><input></div>这种结构，硬拆成form__input会牵连JS事件绑定和表单校验逻辑。
实操建议：
- 原地加归属：把
class="form"改成class="login-form"，<input>加class="login-form__input"，CSS里只保留.login-form__input规则，删掉所有孤立的.input - 禁止写
.login-form .input这种后代选择器——它等于默认你永远不重构父容器，而BEM的契约是“删掉login-form，子元素仍能渲染” - 如果旧HTML里已有
class="btn btn-red"，先保留btn-red作别名，新代码只用button--primary，逐步替换
SCSS里嵌套写法怎么不破坏BEM语义
Sass的&__icon看着省事，但一不小心就写出&__input &__icon（带空格），编译出来是后代选择器，等于悄悄绕过BEM隔离。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
实操建议：
- 只允许单层嵌套：
.search-form { &__input {} &--compact {} }，禁止&__input { &__icon {} } -
@extend禁用跨block：哪怕.button--small和.input--small样式相同，也必须各自定义，否则修改一处，两处同时崩 - 变量名同步BEM化：
$button-padding-vertical，而不是$padding-sm，避免团队误以为它是全局尺寸标准
Vue/React组件里怎么避免手动拼接BEM类名
写className={`button ${isDisabled ? 'button--disabled' : ''}`看似灵活，实际埋了坑：拼错字符串、漏空格、状态组合爆炸（button--primary button--disabled vs button--primary--disabled）。
实操建议：
- 用
classnames库：classNames('button', { 'button--primary': isPrimary, 'button--disabled': isDisabled }) - 组件内定义常量：
const BLOCK = 'user-card';，然后`${BLOCK}__avatar`，杜绝散落在模板里的字符串 - Modifier不用状态名：
user-card--loaded是错的，应交由data-loaded属性或独立is-loading类控制，BEM Modifier只管视觉变体（--featured、--compact）
真正卡住重构进度的，从来不是命名长度，而是那些没显式声明的隐式依赖：JS里硬编码的className、HTML里靠DOM层级生效的后代选择器、CSS里靠!important维系的脆弱平衡。BEM不是让类名变长，是把“谁在用这个样式”写进名字里——一旦写清楚，删改才有底气。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
