CSS BEM 命名约定：它是什么、为什么重要以及如何使用它？

编写干净且有组织的 css 很重要，尤其是对于大型项目。构建 css 的最佳方法之一是使用 bem 命名约定。在本文中，我们将解释 bem 是什么、为什么它很重要、它的优点和缺点，并通过两个示例向您展示如何使用它。

什么是边界元法？

bem 代表 块、元素 和 修饰符。它是一个用于编写 css 类名的命名系统，使您的代码更易于理解和维护。 bem 的主要目标是帮助开发人员编写可重用、模块化和可扩展的 css。

1。块： 本身有意义的独立组件（例如按钮或表单）。
2.元素： 块的一部分，其本身没有意义并且依赖于块（例如，按钮图标）。
3.修饰符： 块或元素的不同版本（例如，具有不同颜色的按钮）。

.block {}
.block__element {}
.block--modifier {}

为什么使用边界元法？

使用 bem 可以帮助您避免混乱和令人困惑的 css。它带来了几个好处：

• 一致性：所有类名称都遵循相同的模式，使您的代码更可预测且更易于理解。
• 可重用性：块和元素可以在项目的不同部分重用。
• 易于维护：其他开发人员可以轻松阅读和修改您的代码。
• 避免冲突： bem 帮助您防止不同组件之间的 css 冲突。

如何使用边界元法：示例

示例 1：一个简单的按钮

让我们从一个基本的按钮块开始，看看 bem 是如何工作的。

立即学习“前端免费学习笔记（深入）”；

html：

<button class="button button--primary">
  submit
</button>

css：

.button {
  padding: 10px 20px;
  background-color: #333;
  color: white;
  border: none;
}

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

说明：

• button 是一个块，代表主按钮样式。
• button--primary 是一个修饰符，将蓝色背景应用于此特定按钮版本。

示例 2：卡片组件

现在让我们创建一个带有标题和描述（元素）以及小尺寸版本（修饰符）的卡片块。

html：

<div class="card card--small">
  <h2 class="card__title">title</h2>
  <p class="card__description">this is a description.</p>
</div>

css：

.card {
  padding: 20px;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
}

.card__title {
  font-size: 18px;
  margin-bottom: 10px;
}

.card__description {
  font-size: 14px;
  color: #666;
}

.card--small {
  padding: 10px;
}

说明：

• card 是代表卡片组件的块。
• card__title 和 card__description 是元素，卡片的特定部分。
• card--small 是一个修饰符，减少较小版本卡片的填充。

bem 的优点和缺点

优点：

1. 有组织且一致：帮助保持 css 干净且结构良好。
2. 避免 css 冲突： 降低一个组件的样式影响另一个组件的风险。
3. 可重用性：块和元素可以在项目的多个位置使用。
4. 易于维护：即使您的项目不断增长，也可以更轻松地更新和管理 css。

缺点：

1. 长类名：bem 类名可能会很长，一开始可能会让人觉得不知所措。
2. 学习曲线：需要一些时间来适应 bem 结构，特别是如果您是 css 新手。

为什么 bem 很重要？

bem 是一种流行的 css 方法，因为它提倡干净且可扩展的代码。在大型项目中，css 很快就会变得难以管理。使用 bem，每个类名称都是唯一的且具有描述性，这使得更容易理解每​​个类的用途。它还可以防止风格冲突等问题，并使开发人员之间的协作更加顺畅。

如果你想要以一致且模块化的方式编写 css，bem 是一个绝佳的选择。可能需要一些时间来学习，但从长远来看，它将节省你的时间并让你的 css更易于维护。

结论

bem 命名约定是保持 css 有序且可扩展的好方法。它有助于避免冲突，使代码更易于维护，并促进可重用组件。尽管由于类名较长且学习曲线较长，一开始可能看起来很有挑战性，但好处远远大于缺点。如果您希望编写更简洁的 css 并改善项目中的协作，请尝试 bem！

关注我了解更多更新！

我希望您发现这篇文章有助于理解 css bem 命名约定。如果您想了解更多此类文章、技巧和 web 开发见解的最新动态，请务必关注我。如果您有任何问题或建议，请随时与我们联系。我很想听听你的消息！