Что такое БЭМ (Блок, Элемент, Модификатор) и как его можно использовать с Drupal Emulsify Twig

Опубликовано: 2022-11-08

При работе с технологиями и программным обеспечением с открытым исходным кодом еще важнее упростить усилия, необходимые для чтения и понимания кода. Хорошее соглашение об именах помогает решать более крупные проблемы, а не сосредотачиваться на синтаксисе и предпочтениях стиля во время проверки кода. Опытные разработчики понимают важность хорошо написанного и организованного кода при работе с крупными веб-сайтами с множеством элементов стиля.

Методология BEM (Block, Element, Modifier) ​​— это широко используемое соглашение об именах для классов CSS, которое набирает популярность благодаря простоте использования. Фундаментальной концепцией БЭМ является компонентная веб-разработка. БЭМ упрощает и ускоряет разработку интерфейса, особенно когда вы работаете с крупными проектами со сложным пользовательским интерфейсом. Давайте узнаем больше о БЭМ и о том, как он может работать с модулем Drupal Emulsify Twig.

Что такое БЭМ

Методология БЭМ была введена, чтобы упростить доступ к классам CSS, их понимание и масштабирование. Это может ускорить процесс разработки и помогает создавать повторно используемые компоненты.

БЭМ включает в себя три части:

  1. Блокировать
  2. Элемент
  3. Модификатор

Блокировать

Блоки являются внешними и функционально независимыми компонентами и могут использоваться повторно. Примеры: заголовок, нижний колонтитул, боковая панель, меню, контент и т. д.

Функции:

  • Имена блоков всегда должны отражать назначение блока.
  • Блоки не должны использовать поля или позиции. Если вам нужно добавить поле или положение, вам нужно применить его к внутренним контейнерам.
  • Не используйте теги CSS или селекторы идентификаторов при использовании БЭМ.

Пример:

 <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. имя_блока_имя_модификатора_значение_модификатора
  2. имя-блока__имя-элемента_имя-модификатора_значение-модификатора

Соглашения об именах: правила и схемы

Существуют разные схемы именования. Все схемы имеют некоторые общие правила, такие как:

  • Имена пишутся строчными латинскими буквами.
  • Слова разделяются дефисом (-).

1. Классические схемы именования

Классическая схема именования является схемой именования БЭМ по умолчанию.

Имя-блока__имя-элемента_имя-мода_mod-val

  • Имя элемента и имя блока разделяются двойным подчеркиванием (__).
  • Имя модификатора и имя блока или элемента разделяются символом подчеркивания (_).
  • Значение модификатора и имя модификатора разделяются символом подчеркивания (_).

2. Стиль именования двух тире

имя-блока__имя-элемента--имя-мода--значение_модуля

  • Имя элемента и блока разделяются двойным подчеркиванием (__).
  • Блок и элемент разделяются двойным дефисом (--).
  • Значение модификатора и модификатора разделяются двойным дефисом (--).

3. Стиль именования CamelCase

blockName-elemName_modName_modVal

  • Каждое слово после первого слова начинается с заглавной буквы.
  • Блоки, элементы и модификаторы используются так же, как и в стандартной схеме именования.

4. Стиль именования React

BlockName-ElemName_modName_modVal

  • Имя блока и имена элементов начинаются с заглавной буквы.
  • Имя модификатора начинается со строчной буквы.
  • Имя элемента и имя блока разделяются одним дефисом (-).
  • Имена и значения модификаторов разделены так же, как и в стандартной схеме.

БЭМ в Drupal с модулем Emulsify Twig

В Drupal мы можем использовать функцию BEM Twig с помощью модуля Emulsify Twig. Функция БЭМ позволяет создавать классы БЭМ на элементах компонентов. Ниже упомянуты некоторые расширения BEM Twig и их использование.

1. Простое имя блока (обязательный аргумент):

<div {{ bem('icon') }}>

Это создает:

<дел класс = "значок">

2. Блок с модификаторами:

Если вы хотите добавить несколько модификаторов, вы можете сделать это с помощью массива.

<div {{ bem('значок', ['маленький', 'красный']) }}>

Это создает:

<div class="icon icon-–маленький значок-–красный">

3. Элемент с модификаторами и именем блока (необязательно):

<div {{ bem('icon', ['small', 'red'], 'icon-button') }}>

Это создает:

<div class="icon-button__icon icon-button__icon--маленький значок-button__icon--красный">

4. Элемент с именем блока, но без модификаторов (необязательно):

<div {{ bem('icon', '', 'icon-button') }}>

Это создает:

<div class="icon-button__icon">

5. Элемент с именем блока, модификаторами и дополнительными классами:

<div {{ bem('icon', ['small', 'red'], 'icon-button', ['js-click', 'something-else']) }}>

Это создает:

<div class="icon-button__icon icon-button__icon--маленький значок-кнопка__icon--красный js-нажмите что-то еще">

6. Элемент только с дополнительными классами (необязательно):

<div {{ bem('icon', '', '', ['js-click']) }}>

Это создает:

<div class="icon js-щелчок">

Добавить атрибуты расширения 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>

Последние мысли

Методология БЭМ чрезвычайно полезна для разработчиков, которые хотят писать и поддерживать более качественный код, который можно легко передать и понять. У каждого элемента есть цель, которую легко определить по названию и блоку, из которого он исходит. При правильном использовании вы увидите, что использование БЭМ может повысить скорость разработки. Если вам понравилось то, что вы прочитали, подпишитесь на нашу еженедельную рассылку новостей, где мы будем присылать вам свежую, самую горячую информацию прямо на ваш почтовый ящик!