【H5 前端开发笔记】第 22 期：CSS 选择器 (7) —— CSS 选择器命名规范与神级命名技巧
前面六期我们把 CSS 选择器的“语法武器库”基本讲完了，从基础到高级、从结构到状态、从兄弟到否定……
但真正让项目“活得久、不爆炸”的，往往不是你会不会 :has() 或 :nth-child(3n+1)，而是类名起得怎么样。
今天这一期聊聊命名规范（Naming Conventions）和一些实战中被验证过的“神级”技巧（2025-2026 年视角）。
一、主流命名规范对比（2026 年真实使用情况）
| 规范 | 全称 | 核心思想 | 类名示例 | 优点 | 缺点 | 2026 年流行度（大中型项目） | 推荐场景 |
|---|---|---|---|---|---|---|---|
| BEM | Block Element Modifier | 块-元素-修饰符 | .card__title--large | 可读性极强、防覆盖、组件化友好 | 类名长、初学者觉得啰嗦 | ★★★★★ (最高) | 组件库、中大型 SPA、团队协作 |
| SMACSS | Scalable & Modular Architecture | 按类别分文件/命名 | .l-grid .is-hidden .btn-primary | 分类清晰、易扩展 | 依赖文件拆分、状态类泛滥易乱 | ★★★☆☆ | 中型项目、传统多页应用 |
| OOCSS | Object-Oriented CSS | 对象化 + 皮肤分离 | .media .media--img-right | 高度复用、减少代码量 | 语义不强、类名抽象 | ★★☆☆☆ | 追求极致原子化的项目 |
| ITCSS | Inverted Triangle CSS | 倒三角分层（不强制定名） | 配合 BEM 或其他 | 特异性控制极好 | 更像架构而非命名 | ★★★★☆ | 与 BEM 结合、大型设计系统 |
| ACSS / Utility-First | Atomic / Utility CSS (Tailwind) | 原子类 / 工具类 | bg-blue-500 p-4 rounded-lg | 开发极快、无需写 CSS 文件 | HTML 爆炸、学习曲线陡（初期） | ★★★★★ (激增) | 快速原型、现代组件化、内部系统 |
| 普通语义类 | Semantic / 自描述 | 见名知意 | .primary-button .user-avatar-large | 简单直观 | 容易冲突、扩展性差 | ★★★☆☆ | 小型项目、个人/创业项目 |
2026 年共识推荐顺序（按项目规模）：
- 小型/个人项目 → 语义类 或 Tailwind Utility
- 中型团队项目 → BEM（或 BEM + ITCSS）
- 大型/设计系统/组件库 → BEM + ITCSS + @layer 或 Tailwind + 自定义组件类
- 追求极致速度/初创 → Tailwind CSS（或 UnoCSS、PicoCSS 等）
二、BEM 终极写法 & 神级技巧（最推荐掌握）
标准 BEM.block.block__element.block--modifier.block__element--modifier
进阶/神级变体（很多大厂/组件库真实用法）
- 多级元素（允许，但控制深度 ≤ 3）
.dropdown
.dropdown__trigger
.dropdown__menu
.dropdown__menu__item
.dropdown__menu__item--active
- 状态前缀（比
--更清晰，常用于 JS 控制）
.is-hidden {}
.is-loading {}
.is-disabled {}
.is-expanded {}
- 主题/皮肤前缀（暗黑模式、品牌切换神器）
.theme-dark .btn {}
.brand-apple .card {}
- 组件命名 + 作用域前缀（大型 monorepo 必备）
.ui-button /* 组件库通用按钮 */
.app-header /* 业务应用头部 */
.admin-sidebar /* 后台专用 */
- data-* 属性辅助（减少类爆炸）
<button data-variant="primary" data-size="lg">按钮</button>
[data-variant="primary"] { background: blue; }
[data-size="lg"] { padding: 16px 32px; }
- :where() 降低特异性（2024年后神器）
:where(.card) .title { font-size: 1.5rem; } /* 特异性 0,0,0 */
三、Tailwind + 自定义类混合（2026 年最香写法之一）
<!-- 纯 Tailwind -->
<button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition">
<!-- 混合写法（推荐） -->
<button class="btn btn-primary btn-lg">
<!-- Tailwind 兜底 + 少量自定义 -->
bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition
</button>
/* components.css 或 app.css */
@layer components {
.btn {
@apply inline-flex items-center justify-center font-medium transition focus:outline-none focus-visible:ring-2;
}
.btn-primary {
@apply bg-blue-600 text-white hover:bg-blue-700 focus-visible:ring-blue-500;
}
.btn-lg {
@apply px-6 py-3 text-lg rounded-lg;
}
}
四、命名规范 checklist（贴墙上用）
- [ ] 全小写字母 + 连字符
-（除 BEM 外） - [ ] 见名知意：
.user-profile-avatar>.up-ava - [ ] 避免颜色/状态出现在类名：
.btn-red× → 用--danger或data-variant="danger" - [ ] 组件名前缀统一：
ui-、app-、c-、m-（module）等 - [ ] 状态用
is-/has-前缀 - [ ] 布局相关用
l-/layout-前缀 - [ ] 禁止
!important除非 reset 或第三方覆盖 - [ ] 禁止 id 选择器写业务样式（特异性太高）
- [ ] 禁止元素选择器写业务样式（污染全局）
五、终极建议（2026 年）
- 团队 < 8 人 & 追求速度 → Tailwind CSS（或 UnoCSS） + 少量组件类
- 中大型项目 & 需要严格组件化 → BEM + ITCSS 分层 + @layer
- 设计系统 / 组件库 → BEM + 命名空间 + CSS 变量 + :where()
- 旧项目重构 → 先 SMACSS 分类 → 逐步向 BEM 迁移
下一期预告：伪类与伪元素（下）—— 交互、表单、链接状态全家桶（:hover / :focus-visible / :checked / :valid / :invalid / :link / :visited / :target …）
有自己总结的“神级”类名技巧或项目中踩过的命名坑，欢迎留言分享～
祝大家类名起得又准又爽，CSS 再也不打架！🛡️
