模块化CSS：命名空间（第二部分）

2024-02-17 00:17:47

好的，以下是关于模块化CSS的第二部分文章：

上周，我分享了如何使用BEM创建一个合理的CSS架构。BEM很棒，但它只是解决方案的一部分。我们还需要命名空间。今天，我想与大家分享为什么只用BEM是不够的，以及如何使用命名空间来弥补一些不足。

我上周给大家展示的例子很简单。让我们用一个更复杂的例子来演示BEM的局限性。

假设我们有一个名为“card”的组件。这个组件由一个标题、一个正文和一个按钮组成。我们使用BEM来编写CSS，如下所示：

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

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

.card__body {
  font-size: 16px;
}

.card__button {
  background-color: #007bff;
  color: white;
  padding: 10px 15px;
  border-radius: 5px;
}

这个CSS可以很好地工作。但是，如果我们想复用这个组件呢？我们可以简单地复制并粘贴CSS，但这不是一个好的解决方案。如果我们稍后需要更新CSS，我们就需要在多个地方更新它。这很容易出错，而且很难维护。

命名空间可以帮助我们解决这个问题。命名空间允许我们在CSS中定义一个作用域，这样我们就可以只为该作用域内的元素编写CSS。例如，我们可以为我们的“card”组件创建一个命名空间，如下所示：

.card-namespace {
  .card {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

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

  .card__body {
    font-size: 16px;
  }

  .card__button {
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
  }
}

现在，我们可以通过在CSS中添加.card-namespace来复用这个组件。例如，我们可以创建一个名为“card-product”的新组件，如下所示：

<div class="card-namespace card-product">
  <div class="card__title">Product Title</div>
  <div class="card__body">Product Description</div>
  <button class="card__button">Add to Cart</button>
</div>