小王刚入职一家新公司，接手一个老项目，打开 CSS 文件一看——.a1、.box2、.red-text-big混在一起，改个按钮样式得翻三页找类名，最后干脆复制粘贴再加个 -v2……这场景，你熟不熟？
命名不是起外号，是写说明书
CSS 类名不是随便打几个字母凑数的。它得让别人（甚至三个月后的你自己）一眼看懂“这是干啥的”。比如：
<button class="btn-primary">提交</button><button class="blue-btn">提交</button>靠谱得多——万一哪天设计稿改成紫色主色呢？blue-btn就成历史谜题了。BEM 是真香，但不用死磕
BEM（Block-Element-Modifier）听着高大上，其实就三部分：
Block（模块）：独立功能块，如 header、product-card；
Element（元素）：模块里的子部件，用双下划线连接，如 product-card__title、product-card__price；
Modifier（修饰符）：状态或变体，用双中划线，如 product-card--featured、btn-primary--disabled。
<div class="product-card product-card--featured">
<h3 class="product-card__title">无线耳机</h3>
<span class="product-card__price">¥299</span>
</div>模块__子项 这一步开始，代码立刻清爽不少。避开这些坑，省下一半沟通时间
• 别用纯颜色+尺寸命名：.green-bg、.big-title —— 样式一调，名字就失效；
• 别缩写成谜语：.usr-inf 不如写 .user-info，多敲两个字母，少问三次“这个到底指啥？”；
• 别掺 HTML 标签名：.div-header、.span-desc —— 类名该说“它是什么”，不是“它是什么标签”；
• 小项目也别图省事写 .left、.right —— 响应式一加，左右可能互换，名字瞬间变误导。
试试这套轻量组合拳
日常够用又不累：模块名用短横线（user-profile），子项加双下划线（user-profile__avatar），状态加双中划线（user-profile--compact）。文件里搜 user-profile，所有相关样式一网打尽。上线前跑一遍 grep -r "user-profile" src/css/，漏改的样式基本无处藏身。
命名规范不是捆住手脚的绳子，而是帮你把样式理清楚的梳子。今天花五分钟想个好名字，明天改需求时能省下半小时翻代码。