写CSS时，看到别人代码里一堆 box1、div2、left3 这样的类名，是不是有点懵？改起来像解谜，加功能像踩雷。其实，好名字不靠灵感，靠规矩。
名字不是越短越好
有人觉得 btn 比 button-primary 省事，但过两天自己回来看，可能得翻三遍HTML才能确定这个 btn 到底是提交按钮还是删除按钮。名字要能“自解释”——光看类名，就知道它干啥、在哪用、大概长啥样。
推荐用 BEM 命名法（入门版）
BEM 是 Block（模块）-Element（元素）-Modifier（修饰符） 的缩写，听着复杂，实际就三招：
模块名：代表一个独立功能块，比如 header、product-card、nav-menu；
元素名：用两个下划线连接，表示模块里的子部分，比如 product-card__title、product-card__price；
修饰符：用两个短横连接，表示状态或变体，比如 product-card--featured、button--disabled。
<div class="product-card product-card--featured">
<h3 class="product-card__title">无线耳机</h3>
<span class="product-card__price">¥299</span>
<button class="button button--primary">立即购买</button>
</div>避开这些坑
别用拼音缩写：gwc（购物车）、dl（登录）——同事看不懂，三个月后的你自己也懵；
别带位置信息：left-nav、top-banner——哪天设计师说“把导航挪到右边”，你得改所有CSS和HTML；
别用纯样式描述：red-text、big-box——等UI改版文字变蓝、盒子缩小，这名字就成笑话了。
小技巧：统一前缀防冲突
项目多人协作时，容易撞名。比如你写了 slider，别人也写了同名类，样式互相覆盖。简单一招：加项目或功能前缀，比如 home-slider、user-avatar、cart-item。哪怕只是个人小站，养成习惯，以后接手大项目也不慌。
名字不是写给机器看的，是写给人看的。多花10秒想个清楚的名字，能省下后面半小时找bug的时间。