介绍BEM命名约定

BEM是一种CSS命名约定，可以用于编写模块化，可重用和和可扩展的CSS代码。BEM代表块（Block），元素（Element）和修饰符（Modifier）。BEM使用这些元素来创建清晰且易于理解的类名称，从而使开发人员能够更快地理解和维护CSS代码。

块（Block）

块是一个页面中的可以独立的、有意义的组件，例如一个导航菜单、一个表格、一个输入框等等。块的命名应该简短而具有描述性，使用单词或单词组来描述块的用途。

块的类名应该以.block-name的格式进行命名。例如，一个具有描述性名称的导航菜单块可以被命名为.nav-menu。

.nav-menu {
  /* 样式 */
}

元素（Element）

元素是块的一部分，用于描述块的不同部分。例如，导航菜单块可以包含一个菜单项元素。元素的命名应该以 .block-name__element-name的格式进行命名。

<nav class="nav-menu">
  <ul class="nav-menu__list">
    <li class="nav-menu__list-item">Item 1</li>
    <li class="nav-menu__list-item">Item 2</li>
    <li class="nav-menu__list-item">Item 3</li>
  </ul>
</nav>

.nav-menu__list {
  /* 样式 */
}

.nav-menu__list-item {
  /* 样式 */
}

修饰符（Modifier）

修饰符用于更改块或元素的状态或外观。例如，一个按钮块可以有一个active修饰符来表示按钮当前处于活动状态。修饰符的名称应该以.block-name_modifier-name或.block-name__element-name_modifier-name的格式进行命名。

<button class="button button--primary">Primary Button</button>
<button class="button button--secondary">Secondary Button</button>

.button {
  border: none;
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
}

.button--primary {
  background-color: blue;
  color: white;
}

.button--secondary {
  background-color: gray;
  color: white;
}

总结

BEM命名约定提供了一种清晰、可重用和可扩展的CSS编码方式。使用BEM可以改善代码的可读性和可维护性，从而提高开发效率。同时，BEM命名约定也可以帮助开发人员规避CSS命名冲突的风险。