CSS BEM 命名规范

BEM 是什么？

BEM (Block Element Modifier) 是 CSS 命名规范，提高可维护性。

结构

• Block：独立组件
• Element：块的一部分
• Modifier：块或元素的变体

命名规则

.block__element--modifier

例子

<div class="button button--primary">
  <span class="button__text">Click me</span>
</div>

.button {
  /* 块样式 */
}

.button__text {
  /* 元素样式 */
}

.button--primary {
  /* 修饰符样式 */
}

原则

1. 独立性

块是独立的，可以在任何地方使用。

2. 可重用性

元素和修饰符可以组合。

3. 明确性

命名清晰表达结构和功能。

优点

• 避免样式冲突
• 提高可维护性
• 团队协作友好

工具

• BEM 预处理器插件
• CSS Modules

总结

BEM 让 CSS 更结构化。开始可能觉得啰嗦，但长期收益大。