BEM命名规范入门教程，新手必看的CSS组织指南

坦白说，我自己最初接触BEM时，看到那些带双下划线 __ 和双横杠 -- 的类名，第一反应是：“这命名也太长了吧？”但真正用起来才发现，​​它简直是团队协作的救命稻草​​——尤其当你接手一个满是 div class="box" 的祖传代码时。

​​BEM的核心就仨东西​​：块（Block）、元素（Element）、修饰符（Modifier）。想象你在搭乐高：

• ​​块（Block）​​ 是独立的积木单元，比如导航栏（.nav）或按钮（.btn）。它就像乐高底座，能随便挪到页面任何位置。

• ​​元素（Element）​​ 是块身上的零件，比如导航栏里的链接（.nav__link）。注意！元素​​必须​​依附块存在，就像乐高小人的手不能单独飘在空中。

• ​​修饰符（Modifier）​​ 是给块或元素“换皮肤”，比如红色按钮（.btn--red）或禁用状态（.btn--disabled）。千万别单独用它，否则就像给汽车喷漆却喷到了方向盘上——全乱套了。

举个接地气的例子🌰：假设你写个搜索框组件。没BEM时可能是这样：

html预览复制
<div class="search">  
  <input type="text" class="input">  
  <button class="button active">搜索button>  
div>

类名短是短了，但鬼知道 .active是修饰按钮还是输入框？用BEM改造后：

html预览复制
<div class="search">   
  <input class="search__input" type="text">   
  <button class="search__button search__button--active">搜索button>   
div>

​​立马清晰了​​：search__button--active明确表示“搜索按钮的激活状态”，其他开发者扫一眼就懂，再也不用猜猜乐。

​​新手最容易栽的坑​​是过度嵌套。比如把菜单写成 .menu__list__item，这违反了BEM的扁平原则！正确做法是：

html预览复制
<ul class="menu">  
  <li class="menu__item">li>   
ul>

.class名短了，关系反而更清楚。

个人建议是：​​前期别追求完美​​。先保证块独立（比如按钮样式不依赖外层容器）、元素带双下划线、修饰符用双横杠，就能解决80%的协作问题。至于前缀（像 .c-btn表示组件）这种高级玩法，等项目大了再考虑也不迟。

对了，如果你用Sass/Less，试试 &符号嵌套写法，能少敲好多键盘：

scss复制
.search {  
  &__input { /* 输入框样式 */ }  
  &__button {  
    &--active { /* 激活状态样式 */ }  
  }  
}

这可比手动写长类名省心多了！

最后唠叨一句：​​BEM不是万能药​​。像全局字体大小（.text-sm）这种工具类，硬套BEM反而啰嗦。我的经验是——​​能一眼看出归属关系的模块才用BEM​​，其他时候怎么简单怎么来。

好了，现在打开你半年前写的CSS文件，如果自己都看不懂类名是啥意思…是时候试试BEM了！