如何正确实现BEM的CSS命名方法论？小白也不愁！

2022-11-11 04:20:15

BEM：让你的 CSS 更模块化、易于维护

前端开发领域不断演变，BEM（块元素修改器）CSS 命名方法论正悄然流行起来。作为一个模块化的 CSS 命名约定，它旨在帮助开发者编写出更易维护、更可复用的代码。

BEM 的工作原理

BEM 的核心思想是将 CSS 类名分解为三个部分：块名、元素名和修改器名。块名代表页面上的一个独立模块，而元素名代表块内的子元素。修改器名则用来表示元素的不同状态或样式。

举个例子，假设我们有一个按钮，它的 BEM 类名可以写成：

.button { /* 块名 */
  color: red; /* 元素名 */
}

.button--large { /* 修改器名 */
  font-size: 16px;
}

这种方式的好处在于，当你需要更改按钮的颜色时，你只需要修改 .button 类名下的样式，而不会影响到其他元素。类似地，如果你想改变按钮的大小，只需修改 .button--large 类名下的样式即可。

BEM 的优势

BEM 的优势显而易见：

模块化： BEM 将 CSS 样式组织成独立的模块，使得代码更容易维护和复用。
易于维护： 通过将元素和修改器与块分离开来，BEM 可以防止命名冲突，从而提高代码的可读性和可维护性。
复用性： BEM 样式可以在不同的页面和项目中重复使用，提高了开发效率。

为什么前端开发者应该学习 BEM

如果你是一位前端开发者，那么强烈建议你学习并使用 BEM。BEM 可以帮助你编写出更易维护、更可复用的代码，从而提升你的开发效率。

BEM 代码示例

为了更好地理解 BEM，让我们来看一个代码示例：

<div class="product">
  <h2 class="product__title">Product Title</h2>
  <p class="product__description">Product Description</p>
  <button class="product__add-to-cart-button">Add to Cart</button>
</div>

.product {
  background-color: white;
  padding: 10px;
}

.product__title {
  font-size: 24px;
  font-weight: bold;
}

.product__description {
  font-size: 16px;
  color: gray;
}

.product__add-to-cart-button {
  background-color: green;
  color: white;
  padding: 5px 10px;
}

.product--sale {
  background-color: yellow;
}

.product__add-to-cart-button--disabled {
  background-color: gray;
  color: black;
}