你在改别人写的 CSS 时，是不是常盯着 .a1、.box2、.wrapxx 发呆？或者自己写完过两周再打开，发现 .main-left-ctn 到底是左边主内容区，还是主内容区的左内边距容器？类名不是越短越好，也不是越炫酷越高级，它本质是一句给人看的「说明书」。
类名不是代号，是描述
类名的核心任务，是让看到它的人（可能是你，也可能是同事、半年后的你自己）立刻明白这个元素“是什么”或“干什么用”。比如：
<div class="user-avatar"></div>
<button class="btn-primary">提交</button>
<nav class="site-header-nav"></nav>这几个类名没一个带数字、没一个缩写成谜，但谁都能读懂：头像、主按钮、网站头部导航。它们不依赖上下文，不靠注释补救，光看名字就立住。
避开这些常见坑
别用纯样式词开头：像 .red-text、.float-left 看似直观，但一旦设计改了——文字变蓝了、布局改成 flex 了，这个类名就彻底骗人。换成语义化的 .error-message、.sidebar-nav，样式可以随时换，名字依然靠谱。
别偷懒缩写：.usr 不如 .user，.hdr 不如 .header。键盘多敲两个字母，省下的是别人反复查文档的时间。IDE 自动补全早把这点成本抹平了。
别塞状态和位置进类名：.active-tab、.first-item 听起来方便，但状态会变，顺序会调。更好的做法是用 JS 动态加 .is-active 这类修饰类，主类名保持稳定，比如 .tab、.menu-item。
推荐的命名习惯
小写字母 + 中划线连接，这是最通用、最不容易出错的组合：.modal-overlay、.product-card、.search-input。不用驼峰（.searchInput），避免和 JS 变量混淆；不用下划线（.search_input），部分老浏览器对 CSS 类名支持不稳。
层级关系清晰时，可以用 BEM 风格微调，但别硬套。比如一个商品卡片里有标题、价格、操作按钮：
<article class="product-card">
<h3 class="product-card__title">无线耳机</h3>
<span class="product-card__price">¥299</span>
<button class="product-card__add-btn">加入购物车</button>
</article>这里 __ 明确表示从属，比 .card-title 更防冲突，又比 .product-card-title 更易读。
最后一点实在的建议：写类名前，先对着 HTML 元素自问一句——“如果删掉所有样式，光看这个类名，别人能猜出它干啥吗？” 能，就留；不能，就重想。