模块化 CSS - BEM 和 OOCSS 比较：初学者指南

2023-12-28 18:51:09

前言

CSS 架构是确保您的 CSS 代码可维护和可重用的关键。当您在小型项目上工作时，这可能并不重要，但当您在大型项目或其中一部分上工作时，CSS 架构就变得非常重要了。

在本文中，我们将比较两种最受欢迎的 CSS 架构方法：BEM 和 OOCSS。我们将讨论每种方法的优点和缺点，并提供一些示例来说明它们的工作原理。

什么是 BEM？

BEM（块元素修饰符）是一种 CSS 架构方法，它将 CSS 规则组织成块、元素和修饰符。块是页面上的一个独立部分，例如页眉、页脚或侧边栏。元素是块的一部分，例如页眉中的标题或导航栏中的链接。修饰符是用来改变块或元素外观的类，例如一个 .error 类可以用来将文本标记为错误。

BEM 的主要优点是它使 CSS 代码更容易理解和维护。由于块、元素和修饰符都是独立的，因此您可以轻松地更改其中一个而不影响其他部分。这使得 BEM 非常适合大型项目或需要经常更改的项目。

什么是 OOCSS？

OOCSS（面向对象 CSS）是一种 CSS 架构方法，它将 CSS 规则组织成对象。对象是一组共享相同外观和行为的元素，例如按钮或输入字段。OOCSS 的主要优点是它使 CSS 代码更易于重用。由于对象是独立的，因此您可以在多个页面上使用相同的对象，而无需复制 CSS 代码。这使得 OOCSS 非常适合小型项目或需要跨多个页面共享 CSS 代码的项目。

BEM 和 OOCSS 的比较

下表比较了 BEM 和 OOCSS 的优点和缺点：

特性	BEM	OOCSS
可维护性	高	高
可重用性	低	高
复杂性	高	低
学习曲线	陡峭	平缓

哪种方法更适合您？

BEM 和 OOCSS 都是非常好的 CSS 架构方法，但它们各自有其优缺点。如果您正在寻找一种易于维护和理解的方法，那么 BEM 是一个不错的选择。如果您正在寻找一种易于重用的方法，那么 OOCSS 是一个不错的选择。

BEM 和 OOCSS 的示例

以下是如何使用 BEM 和 OOCSS 来为按钮样式的方法：

BEM

.button {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #000;
  background-color: #fff;
  color: #000;
  text-align: center;
  text-decoration: none;
}

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

.button--disabled {
  opacity: 0.5;
}

OOCSS

.btn {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #000;
  text-align: center;
  text-decoration: none;
}

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

.btn--disabled {
  opacity: 0.5;
}