什么是 BEM（块、元素、修饰符）以及它如何与 Drupal Emulsify Twig 一起使用

已发表: 2022-11-08

在使用开源技术和软件时，更重要的是简化阅读和理解代码所需的工作。一个好的命名约定可以帮助您解决更大的问题，而不是在代码审查期间专注于语法和样式偏好。经验丰富的开发人员在处理具有大量样式元素的大型网站时，了解编写良好且组织良好的代码的重要性。

BEM（块、元素、修饰符）方法是一种广泛使用的 CSS 类命名约定，由于它提供的易用性而越来越受欢迎。 BEM 的基本概念是基于组件的 Web 开发。 BEM 使界面开发变得简单快捷，尤其是在您处理具有复杂 UI 的大型项目时。让我们进一步探索 BEM 以及它如何与 Drupal Emulsify Twig 模块一起工作。

什么是 BEM

引入 BEM 方法有助于使 CSS 类更易于访问、理解和扩展。它可以加速开发过程并帮助构建可重用的组件。

BEM包括三个部分：

堵塞
元素
修饰符

堵塞

块是最外层且功能独立的组件，可重用。示例：页眉、页脚、侧边栏、菜单、内容等。

特征：

块名称应始终反映块的用途。
块不应使用边距或位置。如果您需要添加边距或位置，则需要将其应用于内部容器。
使用 BEM 时不要使用 CSS 标签或 ID 选择器。

例子：

 <div class=”icon-button”></div>

元素

元素是块的子项。每个元素只能有一个块，不能在它之外使用。示例：菜单项、列表项、输入字段等。

特征：

元素名称（类）应描述其用途（标题、标题）而不是其状态（小/红色）。
元素和块用双下划线 (__) 分隔。像这样：块名称__元素名称。

例子：

 <!-- `div` outer container as `icon-button` block → <div class=”icon-button”> <!-- `div` element in the `icon-button` block → <div class=”icon-button__icon”>Icon Image</div> </div>

修饰符

一个类名，您可以通过它定义块或元素的外观、状态或行为。示例：红色、大、禁用、固定等。

特征：

修饰符名称描述了它的外观。例如，如果外观是“_large”，那么修饰符类将是icon-button__title_large 。
修饰符通过单个下划线 (_) 与块或元素分隔。

例子：

 <!-- `div` outer container as `icon-button` block → <div class=”icon-button”> <!-- `div` element with modifier in the `icon-button` block → <div class=”icon-button__icon_large”>Icon Image</div> </div>

修饰符的类型

1. 布尔值

您可以检查布尔值的条件并将其设置在变量中。此变量可以作为修饰符值传递。

2.键值对

带有键值的修饰符全名的结构将遵循以下模式之一：

块名称修饰符名称修饰符值
块名称__元素名称修饰符名称修饰符值

命名约定：规则和方案

有不同的命名方案。所有方案都有一些共同的规则，例如：

名称以小写拉丁字母书写。
单词用连字符 (-) 分隔。

1. 经典命名方案

经典命名方案是 BEM 的默认命名方案。

块名称__elem-name_mod-name_mod-val

元素名称和块名称用双下划线 (__) 分隔。
修饰符名称和块或元素名称由单个下划线 (_) 分隔。
修饰符值和修饰符名称由单个下划线 (_) 分隔。

2. 两个破折号的命名方式

块名__elem-name--mod-name--mod-val

元素和块名称由双下划线 (__) 分隔。
块和元素由双连字符 (--) 分隔。
修饰符和修饰符的值用双连字符 (--) 分隔。

3. CamelCase 命名风格

blockName-elemName_modName_modVal

第一个单词之后的每个单词都以大写字母开头。
块、元素和修饰符的使用方式与标准命名方案中的相同。

4. React 命名风格

BlockName-ElemName_modName_modVal

块的名称和元素的名称以大写字母开头。
修饰符的名称以小写字母开头。
元素名称和块名称由单个连字符 (-) 分隔。
修饰符的名称和值的分隔方式与标准方案中的相同。

Drupal 中的 BEM 与 Emulsify Twig 模块

在 Drupal 中，我们可以借助 Emulsify Twig 模块使用 BEM Twig 函数。 BEM 函数允许您在组件中的元素上创建 BEM 类。下面提到的是一些 BEM Twig 扩展及其用法。

1. 简单区块名称（必填）：

这将创建：

2. 使用修饰符阻止：

如果要添加多个修饰符，可以使用数组来完成。

这将创建：

3. 带有修饰符和块名的元素（可选）：

这将创建：

4. 带有块名但没有修饰符的元素（可选）：

这将创建：

5. 带有块名、修饰符和额外类的元素：

这将创建：

6. 仅具有额外类的元素（可选）：

这将创建：

添加属性 Twig 扩展

添加属性 Twig 功能允许您向组件的元素添加 HTML 属性。看看下面的一些添加属性函数：

 {% set additional_attributes = { "class": ["icon-button", "icon-button__title"] } %} <div {{ add_attributes(additional_attributes) }} ></div> {% set additional_attributes = { "class": bem("icon", ["small", "red"], "icon-button"), } %} <div {{ add_attributes(additional_attributes) }}></div>

最后的想法

BEM 方法对于想要编写和维护质量更好、易于交付和理解的代码的开发人员非常有用。每个元素都有一个用途，可以很容易地通过它的名称和它来自哪个块来识别。如果使用得当，您会发现使用 BEM 可以提高开发速度。如果您喜欢您阅读的内容，请注册我们的每周通讯，我们将在您的收件箱中向您发送新鲜的、炙手可热的见解！