你必须要知道的CSS BEM书写规范指南，新手小白也能写好代码！

前端

2023-09-14 01:06:02

什么是BEM？

BEM是一种CSS书写规范，旨在使代码更具可维护性、可重用性和可读性。BEM规范通过将HTML和CSS结构划分为块、元素和修饰符来实现这一目标。

块：块是BEM规范中的基本单位。块是一个独立的HTML元素，具有自己的功能和样式。例如，一个按钮就是一个块。
元素：元素是块的一部分，用于实现块的功能。例如，按钮的文本就是一个元素。
修饰符 ：修饰符用于改变块或元素的外观或行为。例如，我们可以使用修饰符来改变按钮的颜色或形状。

BEM规范的优点

BEM规范有很多优点，包括：

可维护性 ：BEM规范通过将代码划分为块、元素和修饰符，使代码更易于维护。当您需要更改代码时，您只需要更改受影响的块、元素或修饰符，而无需更改整个代码库。
可重用性 ：BEM规范中的块和元素可以轻松地复用。例如，您可以将一个按钮块复用在不同的页面上，而无需重新编写代码。
可读性 ：BEM规范通过使用一致的命名约定，使代码更易于阅读和理解。

BEM规范的最佳实践

以下是一些使用BEM规范的最佳实践：

使用一致的命名约定 ：在您的项目中使用一致的命名约定非常重要。这将使您的代码更易于阅读和理解。例如，您可以使用以下命名约定：
- 块：使用小写字母和连字符，例如：button。
- 元素：使用小写字母和连字符，例如：button__text。
- 修饰符：使用两个连字符和一个性的名称，例如：button--primary。
将块、元素和修饰符放在单独的文件中 ：将块、元素和修饰符放在单独的文件中可以使您的代码更易于维护和复用。例如，您可以将按钮块放在一个名为button.css的文件中，将按钮元素放在一个名为button__text.css的文件中，将按钮修饰符放在一个名为button--primary.css的文件中。
使用预处理器 ：您可以使用CSS预处理器（如Sass或Less）来简化BEM规范的使用。CSS预处理器允许您使用变量、mixins和函数来使您的代码更简洁和易于维护。

BEM规范的示例

以下是一个使用BEM规范编写的按钮示例：

<button class="button">
  <span class="button__text">按钮</span>
</button>

.button {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #000;
  border-radius: 5px;
  background-color: #fff;
  color: #000;
  text-align: center;
  font-size: 16px;
  line-height: 1;
}

.button__text {
  margin: 0;
}

.button--primary {
  background-color: #007bff;
  color: #fff;
}