CSS 命名规范实战：BEM 模式与通用技巧
在大型项目中，CSS 命名不仅仅是写样式，更是构建可维护架构的基础。好的命名能让代码自解释，减少沟通成本。
BEM 命名法详解
BEM（Block Element Modifier）是一种流行的 CSS 命名约定，旨在通过清晰的层级结构避免样式冲突。
/* 块 Block */
.card { }
/* 元素 Element (双下划线) */
.card__title { }
/* 修饰符 Modifier (双连字符) */
.card--highlighted { }
核心规则如下：
- 中划线：用于分隔多单词的块名或元素名，如
user-profile。 - 双下划线 (
__)：严格用于连接块与其直接子元素，例如.card__title。 - 双连字符 (
--)：用于表示块或元素的特定状态、变体或修饰符，例如.card--active。
命名原则对比
在实际开发中，我们常遇到以下两种选择，建议遵循以下原则：
1. 简洁优先 短命名能减少书写时间，也能略微减小文件体积。
/* 推荐 */
.intro { color: #333; }
/* 不推荐 */
.introduction { color: #333; }
2. 作用域明确 组合命名比单一命名更能防止污染全局样式。
/* 不推荐，容易与其他库冲突 */
.header { height: 60px; }
/* 推荐，加上项目前缀 */
.myapp-header { height: 60px; }
常用语义化词汇表
为了方便统一风格，整理了一些高频场景的命名参考。
状态类
prev/next：上一个 / 下一个current：当前选中show/hide：显示 / 隐藏open/close：打开 / 关闭
