不懂BEM规范，你还敢写CSS？

前端

2024-01-31 10:51:27

不懂BEM规范，那你还敢写CSS？

啊哈！居然还有人不知道 BEM 规范？

好吧好吧，今天我就来科普一下，让你见识见识啥叫真正的 CSS 写法！

BEM规范，了解一下

啥是 BEM 规范？BEM 规范是一种 CSS 类名命名规范，它能让你写出清晰、可维护、可扩展的 CSS 代码。

BEM 规范有三个主要组成部分：

块 (Block) ：页面上独立的组件，比如导航栏、侧边栏、正文等等。
元素 (Element) ：块的一部分，比如导航栏里的链接、侧边栏里的菜单等等。
修饰符 (Modifier) ：用于修改块或元素的类名，比如导航栏的激活状态、侧边栏的折叠状态等等。

举个栗子，一个导航栏的 HTML 代码和 BEM 规范的类名可以是这样写的：

<nav class="block-nav">
  <ul class="element-nav-list">
    <li class="element-nav-item">
      <a class="element-nav-link" href="#">首页</a>
    </li>
    <li class="element-nav-item element-nav-item--active">
      <a class="element-nav-link" href="#">关于</a>
    </li>
    <li class="element-nav-item">
      <a class="element-nav-link" href="#">联系我们</a>
    </li>
  </ul>
</nav>

.block-nav {
  background-color: #333;
  color: #fff;
  padding: 10px;
}

.element-nav-list {
  list-style-type: none;
  display: flex;
}

.element-nav-item {
  padding: 0 10px;
}

.element-nav-link {
  color: #fff;
  text-decoration: none;
}

.element-nav-item--active {
  background-color: #f00;
}