CSS命名规范：别再用test、box、div1糊弄自己了

写CSS时，你有没有过这样的经历：半年前写的 .wrap 到底包的是导航栏还是商品列表？同事改了个 .btn，结果首页登录按钮和弹窗确认按钮全变形了？项目越做越大，class名越来越像谜语——.jz-box-2、.main-con-wrap、.clearfix-fix……看着就脑壳疼。

命名不是起外号，是写说明书

class名不是给机器看的，是给人读的。它得说清三件事：这是什么（功能/角色），属于哪块（模块上下文），有什么状态（当前样式特征）。比如：

<button class="user-card__action--disabled">删除账号</button>

一眼就知道：这是用户卡片区域里的操作按钮，现在处于禁用状态。

BEM 是最接地气的入门法

BEM（Block-Element-Modifier）听着高大上，其实就三招：
Block：独立功能模块，比如 header、product-list；
Element：模块里的子部件，用双下划线连接，比如 product-list__item、product-list__price；
Modifier：状态或变体，用双短横连接，比如 button--primary、nav-item--active。
不搞嵌套，不猜层级，直接看名知意。

对比一下就明白了

坏例子：

<div class="box">
  <div class="inner">
    <p class="text">限时抢购</p>
  </div>
</div>

好例子：

<div class="promo-banner">
  <div class="promo-banner__content">
    <p class="promo-banner__title">限时抢购</p>
  </div>
</div>

哪怕不看HTML结构，也能猜出这个模块干啥、里面啥东西、哪些是标题。

几个踩坑现场，顺手避一避

• 别用纯样式词命名：.red-text、.float-left —— 某天设计改版，文字不红了、布局不用浮动了，这class还留不留？
• 别带位置信息：.left-nav、.top-banner —— 页面响应式一调，导航跑到右边了，banner滚到页面中间了，名字立刻失效。
• 别缩写成谜：.usr、.cnt、.pg —— 键盘没那么金贵，打全称 .user、.content、.page 多敲两下，省得查半天。

小团队够用的实操建议

刚开始用BEM觉得啰嗦？先从关键模块下手：
• 登录页：用 login-form、login-form__input、login-form__submit--loading；
• 商品卡片：用 product-card、product-card__image、product-card__price--sale；
• 全局组件：统一加前缀，比如 ui-button、ui-modal，避免和业务类名冲突。
命名不是一步到位的事，边写边理，遇到歧义就重构——一个清晰的class名，比十行注释更管用。