BEM CSS

2025年1月30日 | 阅读12分钟

BEM 简介

级联样式表 (CSS) 是网页开发中用于样式和布局的基础。随着 Web 项目复杂度的增加，保持模块化和可维护的 CSS 架构变得越来越重要。这时 BEM，即块 (Block)、元素 (Element)、修饰符 (Modifier)，就派上了用场。

什么是 BEM？

BEM 是一种命名约定和方法论，用于编写可维护且可扩展的 CSS 代码。它旨在解决处理大型 Web 应用程序样式时遇到的挑战，强调模块化设计方法。BEM 将 UI 分解为称为“块”的模块化组件，每个组件由独立的“元素”和可选的“修饰符”组成。

BEM 基本概念

1. 块 (Blocks)

这些是网页上的独立元素，例如标题、导航栏或侧边栏。块是 BEM 方法论的基本构建块。在 BEM 中，一个块是网页上的一个独立、自主的组件。它代表了一个高级结构，例如标题、导航栏或卡片。块使用简单、清晰的类名命名，例如 .header 或 .card。

示例

/* Example Block */
.header {
  /* Styles for the header block go here */
}

命名约定

使用单个、组合的类名来表示一个块。例如，导航栏块可以命名为 .navbar。

示例

<div class = "navbar">
  <!-- Block content goes here -->
</div>

2. 元素 (Elements)

元素是块内部的组件，它们没有独立的重要性。它们在语义上与其块相关联，并被命名以反映它们在特定上下文中的目的。在每个块内部，我们有元素——较小的组件，在块的上下文之外没有意义或用途。元素在类名中用两个下划线 (__) 表示。

示例

/* Example Element within the Header Block */
.header__logo {
  /* Styles for the logo element within the header block go here */
}

命名约定

使用两个下划线 (__) 来分隔块和元素。例如，navbar 块中的一个元素，如 logo，可以命名为 .navbar__logo。

示例

<div class = "navbar">
  <div class = "navbar__logo">
    <!-- Element content goes here -->
  </div>
</div>

3. 修饰语

修饰符用于更改块或元素的外观或行为。它们使开发人员能够创建块或元素的变体，而无需复制代码。BEM 中的修饰符用于修改块或元素的外观或行为。它们在类名中用两个连字符 (--) 表示。

示例

/* Example Modifier for the Header Block */
.header--dark {
  /* Styles for the header block with dark theme go here */
}

命名约定

使用两个连字符 (--) 来表示修饰符。如果您有一个暗色主题的导航栏，则修饰符类可以命名为 .navbar--dark。

示例

<div class = " navbar navbar--dark ">
  <!-- Dark-themed navbar content goes here -->
</div>

BEM 结构

BEM 提供了一种清晰且结构化的类命名方法，使 Web 开发人员更容易理解不同组件之间的关系。这种方法促进了代码的可重用性，减少了命名冲突的可能性，并促进了团队成员之间的协作，他们在项目中处理不同的部分。

BEM 的命名约定为您的 CSS 提供了清晰的层次结构和结构，使其易于理解不同组件之间的关系。这种清晰度在大项目中或在协作时尤其重要，因为它限制了命名冲突并促进了代码一致性。通过遵循此模块化结构，开发人员可以快速识别和修改特定元素，而不会意外影响代码库的其他部分。这种方法为可维护且高效的 CSS 奠定了基础。

在样式表中应用 BEM

在您的 CSS 中，通过基于其块、元素或修饰符类选择元素来反映 BEM 结构。

示例

/* Styles for the Navbar Block */
.navbar {
  /* Block styles go here */
}

/* Styles for the Navbar Logo Element */
.navbar__logo {
  /* Element styles go here */
}

/* Styles for the Dark-themed Navbar Modifier */
.navbar--dark {
  /* Modifier styles go here */
}

BEM 中的命名约定：最佳实践

虽然 BEM 的基本原则包括使用块、元素和修饰符，但遵循一套命名约定对于确保代码的一致性和清晰度至关重要。让我们探讨一下 BEM 中命名约定方面的一些最佳实践。

1. 使用连字符表示修饰符

命名修饰符时，使用连字符将修饰符与它修改的块或元素分隔开。这可以保持一致性，并将修饰符与元素区分开来。

示例

<!-- Good: Modifier with Hyphen -->
<div class = "button button--large">
  <!-- Button with large modifier styles -->
</div>

<!-- Avoid: No Hyphen for Modifier -->
<div class = "button large">
  <!-- Ambiguous class names can be confusing -->
</div>

2. 保持选择器简短且明确

BEM 旨在实现简洁的设计，因此避免不必要的冗长类名。保持选择器简短，同时确保它们对它们所代表的组件保持明确。

示例

<!-- Good: Short and Specific -->
<div class = "header">
  <div class = "header__logo"></div>
</div>

<!-- Avoid: Overly Long Selector -->
<div class = "main-content-section">
  <div class = "content-container-with-padding"></div>
</div>

3. 有意义的名称

选择准确反映块、元素或修饰符的目的和功能的名称。这使您的代码更易于理解，并帮助开发人员协作。

示例

<!-- Good: Descriptive Block Name -->
<div class = "product-list">
  <!-- Block content goes here -->
</div>

<!-- Avoid: Non-descriptive Block Name -->
<div class = "box">
  <!-- Block content goes here -->
</div>

4. 避免过度使用修饰符

虽然修饰符在创建样式或行为的变体方面功能强大，但过度使用它们可能会导致复杂性增加。将修饰符保留用于重大更改，并优先为细微的变体创建单独的块或元素。

示例

<!-- Good: Limited Modifier Use -->
<div class = "card card--featured">
  <!-- Featured card styles -->
</div>

<!-- Avoid: Excessive Modifiers -->
<div class = "card card--featured card--large card--blue">
  <!-- Too many modifiers can complicate the code -->
</div>

通过遵循这些最佳实践，您将确保您的 BEM 代码保持整洁、可维护且易于理解。在下一节中，我们将深入探讨构建 BEM 块的实际方面，探讨如何在您的项目中创建和样式化这些基本组件。

创建和样式化 BEM 块

在对 BEM 原则和命名约定有了扎实的理解之后，让我们深入了解构建 BEM 块的实际过程。块是 BEM 的主要组件，代表页面上的独立实体。以下是有关如何有效创建和样式化 BEM 块的分步指南。

步骤 1：识别块

在开始编码之前，请识别页面上的各个块。这些可能是标题、导航栏、卡片或任何其他模块化组件。清晰地定义每个块的目的，以保持整洁有序的结构。

步骤 2：编写 HTML 代码

在 HTML 中实现识别出的块，遵循 BEM 命名约定。例如，如果您正在创建一个导航栏，您的 HTML 可能如下所示：

示例

<div class = " navbar ">
  <div class = "navbar__logo"></div>
  <div class = "navbar__menu"></div>
</div>

步骤 3：在 CSS 中定义块样式

在您的 CSS 中，创建一个块样式的部分。选择块类并应用基本样式。请记住，BEM 支持模块化方法，因此此块中的样式应针对实际块本身设计。

示例

/* Styles for the Navbar Block */
.navbar {
  background-color: #333;
  padding: 10px;
  /* Additional block styles go here */
}

步骤 4：样式化块内的元素

接下来，样式化块内的元素。使用 BEM 命名约定来定位特定元素并应用适当的样式。

示例

/* Styles for the Navbar Logo Element */
.navbar__logo {
  width: 50px;
  height: 50px;
  /* Additional styles for the logo element go here */
}

/* Styles for the Navbar Menu Element */
.navbar__menu {
  /* Styles for the menu element go here */
}

步骤 5：使用修饰符进行增强

如果您的块需要变体，请使用修饰符。例如，如果您想创建一个暗色主题的导航栏，请添加一个修饰符类并定义修改后的样式。

示例

HTML

<div class = " navbar navbar--dark ">
  <!-- Content for the dark-themed navbar -->
</div>

CSS

/* Styles for the Dark-themed Navbar Modifier */
.navbar--dark {
  background-color: #000;
  color: #fff;
  /* Additional styles for the dark-themed modifier go here */
}

步骤 6：测试和迭代

在各种场景下测试您的块，以确保其按预期工作。如有必要，请迭代样式和布局。BEM 的模块化方法使其更容易修改特定元素而不影响整个布局。

识别 BEM 元素

在深入研究 CSS 之前，识别 BEM 块中的元素至关重要。元素是没有独立意义且在语义上与其父块关联的组件。例如，在“navbar”块中，元素可以包括“logo”、“menu”和“search”。

示例

<div class = "navbar">
  <div class = "navbar__logo"></div>
  <div class = "navbar__menu"></div>
  <div class = "navbar__search"></div>
</div>

在 CSS 中样式化 BEM 元素

在样式化 BEM 元素时，请遵循 BEM 命名约定以保持清晰有序的结构。

示例

/* Styles for the Navbar Block */
.navbar {
  background-color: #333;
  padding: 10px;
  /* Additional block styles go here */
}

例如，我们以“navbar”块为例：

/* Styles for the Navbar Logo Element */
.navbar__logo {
  width: 50px;
  height: 50px;
  /* Additional styles for the logo element go here */
}

/* Styles for the Navbar Menu Element */
.navbar__menu {
  /* Styles for the menu element go here */
}

/* Styles for the Navbar Search Element */
.navbar__search {
  /* Styles for the search element go here */
}

遵循此方法，“navbar”块内的每个元素都有自己的 CSS 部分，可以轻松查找和修改特定组件的样式。

样式化 BEM 元素的优点

BEM 元素可保持代码的模块化。每个元素都有其样式集，使其独立且易于使用。
通过遵循 BEM 命名约定，您可以保持 CSS 的清晰度。可以清楚地看到哪些样式是针对块的，哪些是针对其单个元素的。
BEM 元素可以在不同块之间重用，促进代码可重用性。例如，在一个块中样式化的“button”元素可以轻松地在另一个块中重复使用。

BEM 中的修饰符

BEM 中的修饰符在根据不同状态或变体修改块和元素的外观或行为方面起着至关重要的作用。它们提供了一种创建特定样式而无需复制代码的方法，从而增强了 CSS 的灵活性和有效性。让我们深入了解修饰符在 BEM 中的实际应用。

1. 识别修饰符

修饰符在类名中用两个连字符 (--) 表示。它们用于指示块或元素的变体或更改。例如，考虑一个带有“large”修饰符的“button”块。在这里，“button”是块，“button--large”是修饰符。

示例

<div class = "button button--large">
  <!-- Content for the large button -->
</div>

2. 在 CSS 中应用修饰符样式

在您的 CSS 中，为修饰符样式创建一个单独的部分。选择修饰符类并定义修改后的样式。扩展“button--large”示例：

示例

/* Styles for the Button Block */
.button {
  display: inline-block;
  padding: 10px 20px;
  /* Additional styles for the button block go here */
}

/* Styles for the Large Modifier */
.button--large {
  font-size: 18px;
  /* Additional styles for the large modifier go here */
}

通过遵循此结构，您可以轻松管理和更新不同变体的块或元素的样式。修饰符类将样式限制在仅与指定的变体相关的样式。

3. 修饰符的动态利用

当根据用户交互或应用程序状态动态应用修饰符时，修饰符会变得特别强大。例如，考虑一个带有“active”状态的“button”块：

示例

<!-- HTML -->
<div class = "button button--active">
  <!-- Content for the active button -->
</div>
<!-- CSS -->
/* Styles for the Active Modifier */
.button--active {
  background-color: #4CAF50;
  color: #fff;
  /* Additional styles for the active modifier go here */
}

将 BEM 与其他 CSS 方法结合使用

虽然 BEM 本身就是一种强大的方法，但它也可以与其他 CSS 方法论集成，以增强您的开发工作流程。将 BEM 与 SMACSS（可伸缩且模块化的 CSS 架构）或 Tailwind CSS 等实用程序优先框架结合使用，可以提供额外的灵活性和效率。让我们探讨一下如何将 BEM 与其他方法论集成。

1. SMACSS 和 BEM

SMACSS 侧重于将样式分为五种类型：基础、布局、模块、状态和主题。BEM 可以无缝集成到模块类别中，其中块和元素与 SMACSS 模块对齐。

示例

/* SMACSS + BEM Integration */
/* Base styles go here */
/* Layout styles go here */

/* BEM Module styles */
.block {
  /* Block styles go here */
  /* Element styles */
  .block__element {
    /* Styles for the element go here */
  }
  /* Modifier styles */
  .block--modifier {
    /* Styles for the modifier go here */
  }
}
/* State styles go here */
/* Theme styles go here */

2. Tailwind CSS 和 BEM

Tailwind CSS 是一个实用程序优先的 CSS 框架。虽然它与 BEM 的立即用途不同，但它们可以互为补充。您可以使用 BEM 类来处理更复杂的组件，并利用 Tailwind 实用程序来快速样式化更简单的元素。

示例

<!-- BEM and Tailwind CSS Integration -->
<div class = "block bg-blue-500 text-white">
  <!-- Content for the block -->
  <div class = "block__element text-xl font-bold">
    <!-- Content for the element -->
  </div>
</div>

3. OOCSS（面向对象的 CSS）和 BEM

OOCSS 提倡分离结构和皮肤，BEM 可以很好地适应这种方法。BEM 的块可以代表结构，而修饰符和元素定义皮肤。这种分离增强了可重用性和模块化。

示例

/* OOCSS + BEM Integration */
/* Object styles go here */
/* BEM Block styles */
.block {
  /* Block styles go here */
  /* Element styles */
  .block__element {
    /* Styles for the element go here */
  }
  /* Modifier styles */
  .block--modifier {
    /* Styles for the modifier go here */
  }
}

优化性能

虽然 BEM 提供了一种结构化和模块化的 CSS 工作方式，但优化性能对于提供快速高效的 Web 体验至关重要。让我们探讨一些优化 BEM 风格表性能的最佳实践。

1. 最小化和压缩

在将 CSS 文件部署到生产环境之前，请对其进行最小化和压缩。最小化会删除不必要的空格和注释，而压缩会减小文件大小。这些结果会缩短样式表的加载时间。

2. 文件连接

将多个 CSS 文件连接成一个文件。这减少了加载样式表所需的 HTTP 请求数量，从而提高了加载速度。使用构建工具或任务运行器来自动化此过程。

3. 关键路径 CSS

识别初始页面渲染所需的关键样式，并将其内联到 HTML 中。这确保了基本样式能够快速加载，从而提高了感知性能。BEM 的模块化设计可以帮助分离特定组件的关键样式。

4. 高效的选择器

使用高效的 CSS 选择器来定位元素。避免可能导致不必要渲染和布局计算的过于宽泛的选择器。BEM 的命名约定鼓励明确性，有助于创建有针对性且高效的选择器。

5. 关键 CSS

为首屏内容生成关键 CSS 并将其内联加载。这确保了页面可见部分的基本样式能够快速应用。BEM 的模块化结构允许您识别和提取特定组件的关键样式。

结论

块元素修饰符 (BEM) 方法论是 Web 开发中用于组织和样式化 CSS 的简单而灵活的方法。在本文中，我们探讨了 BEM 的基本原则，深入研究了其核心概念：块、元素和修饰符。我们已经看到 BEM 清晰且分层的命名约定如何促进代码的可读性、可维护性和可扩展性。

从创建和样式化 BEM 块到处理这些块内的元素，我们提供了在项目中实施 BEM 的分步指南。通过关注实际示例，我们展示了 BEM 的模块化设计如何能够有效地样式化各种组件，例如导航栏、卡片组件和按钮。

下一主题Next JS 条件 CSS

BEM CSS

BEM 简介

什么是 BEM？

BEM 基本概念

1. 块 (Blocks)

2. 元素 (Elements)

3. 修饰语

BEM 结构

在样式表中应用 BEM

BEM 中的命名约定：最佳实践

1. 使用连字符表示修饰符

2. 保持选择器简短且明确

3. 有意义的名称

4. 避免过度使用修饰符

创建和样式化 BEM 块

步骤 1：识别块

步骤 2：编写 HTML 代码

步骤 3：在 CSS 中定义块样式

步骤 4：样式化块内的元素

步骤 5：使用修饰符进行增强

步骤 6：测试和迭代

识别 BEM 元素

在 CSS 中样式化 BEM 元素

样式化 BEM 元素的优点

BEM 中的修饰符

1. 识别修饰符

2. 在 CSS 中应用修饰符样式

3. 修饰符的动态利用

将 BEM 与其他 CSS 方法结合使用

1. SMACSS 和 BEM

2. Tailwind CSS 和 BEM

3. OOCSS（面向对象的 CSS）和 BEM

优化性能

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

BEM CSS

BEM 简介

什么是 BEM？

BEM 基本概念

1. 块 (Blocks)

2. 元素 (Elements)

3. 修饰语

BEM 结构

在样式表中应用 BEM

BEM 中的命名约定：最佳实践

1. 使用连字符表示修饰符

2. 保持选择器简短且明确

3. 有意义的名称

4. 避免过度使用修饰符

创建和样式化 BEM 块

步骤 1：识别块

步骤 2：编写 HTML 代码

步骤 3：在 CSS 中定义块样式

步骤 4：样式化块内的元素

步骤 5：使用修饰符进行增强

步骤 6：测试和迭代

识别 BEM 元素

在 CSS 中样式化 BEM 元素

样式化 BEM 元素的优点

BEM 中的修饰符

1. 识别修饰符

2. 在 CSS 中应用修饰符样式

3. 修饰符的动态利用

将 BEM 与其他 CSS 方法结合使用

1. SMACSS 和 BEM

2. Tailwind CSS 和 BEM

3. OOCSS（面向对象的 CSS）和 BEM

优化性能

结论

相关帖子

如何在 CSS 中编写内联悬停效果

如何在 CSS 中给数字添加圆圈

CSS Parent Selector

FreeCodeCamp HTML CSS

CSS Filter Property

如何使用和设置边框 CSS

EM 在 CSS 中的完整形式

CSS Transform Scale

CSS Shapes

CSS Iframe Style

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器