Co to jest BEM (Block, Element, Modifier) ​​i jak można go używać z Drupal Emulsify Twig

Opublikowany: 2022-11-08

Podczas pracy z technologiami i oprogramowaniem typu open source jeszcze ważniejsze jest uproszczenie wysiłku potrzebnego do przeczytania i zrozumienia kodu. Dobra konwencja nazewnictwa pomaga rozwiązywać większe problemy, zamiast koncentrować się na składni i preferencjach stylów podczas przeglądów kodu. Doświadczeni programiści rozumieją znaczenie dobrze napisanego i zorganizowanego kodu podczas pracy z większymi witrynami internetowymi z mnóstwem elementów stylu.

Metodologia BEM (Block, Element, Modifier) ​​jest szeroko stosowaną konwencją nazewnictwa klas CSS, która zyskuje na popularności ze względu na łatwość jej użycia. Podstawową koncepcją BEM jest tworzenie stron internetowych w oparciu o komponenty. BEM sprawia, że ​​tworzenie interfejsów jest łatwe i szybkie, zwłaszcza gdy obsługujesz duże projekty ze złożonym interfejsem użytkownika. Przyjrzyjmy się więcej na temat BEM i jego współpracy z modułem Drupal Emulsify Twig.

Co to jest BEM

Metodologia BEM została wprowadzona, aby ułatwić dostęp, zrozumienie i skalowanie klas CSS. Może przyspieszyć proces rozwoju i pomóc w tworzeniu komponentów wielokrotnego użytku.

BEM składa się z trzech części:

  1. Blok
  2. Element
  3. Modyfikator

Blok

Bloki są najbardziej zewnętrznym i funkcjonalnie niezależnym komponentem, który można ponownie wykorzystać. Przykłady: nagłówek, stopka, pasek boczny, menu, treść itp.

Cechy:

  • Nazwy bloków powinny zawsze odzwierciedlać przeznaczenie bloku.
  • Bloki nie powinny używać marginesu ani pozycji. Jeśli chcesz dodać margines lub pozycję, musisz zastosować ją do pojemników wewnętrznych.
  • Nie używaj tagów CSS ani selektorów identyfikatorów podczas korzystania z BEM.

Przykład:

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

Element

Elementy są elementami podrzędnymi Bloku. Każdy element może mieć tylko jeden blok i nie może być używany poza nim. Przykłady: pozycje menu, pozycje listy, pole wejściowe itp.

Cechy:

  • Nazwa elementu (klasa) powinna opisywać jego przeznaczenie (tytuł, podpis), a nie jego stan (mały/czerwony).
  • Element i blok są oddzielone podwójnym podkreśleniem (__). Na przykład: nazwa-bloku__nazwa-elementu.

Przykład:

 <!-- `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>

Modyfikator

Nazwa klasy, za pomocą której można zdefiniować wygląd, stan lub zachowanie bloku lub elementu. Przykłady: czerwony, duży, niepełnosprawny, stały itp.

Cechy:

  • Nazwa modyfikatora opisuje jego wygląd. Na przykład, jeśli wygląd to „_large”, to klasa modyfikatora będzie miała postać icon-button__title_large .
  • Modyfikator jest oddzielony od bloku lub elementu pojedynczym podkreśleniem (_).

Przykład:

 <!-- `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>

Rodzaje modyfikatorów

1. Boole'a

Możesz sprawdzić stan wartości logicznej i ustawić ją w zmiennej. Ta zmienna może przekazywać jako wartość modyfikatora.

2. Para klucz-wartość

Struktura pełnej nazwy modyfikatora z parą klucz-wartość będzie zgodna z jednym z tych wzorców:

  1. nazwa_bloku_nazwa_modyfikatora_wartość-modyfikatora
  2. nazwa-bloku__nazwa-elementu_nazwa-modyfikatora_wartość-modyfikatora

Konwencje nazewnictwa: reguły i schematy

Istnieją różne schematy nazewnictwa. Wszystkie schematy mają pewne wspólne zasady, takie jak:

  • Nazwiska pisane są małymi literami łacińskimi.
  • Słowa są oddzielone myślnikiem (-).

1. Klasyczne schematy nazewnictwa

Klasyczny schemat nazewnictwa jest domyślnym schematem nazewnictwa BEM.

Nazwa bloku__nazwa-elementu_nazwa-modu_wartość-modu

  • Nazwa elementu i nazwa bloku są oddzielone podwójnym podkreśleniem (__).
  • Nazwa modyfikatora i nazwa bloku lub elementu są oddzielone pojedynczym podkreśleniem (_).
  • Wartość modyfikatora i nazwa modyfikatora są oddzielone pojedynczym podkreśleniem (_).

2. Styl nazewnictwa dwóch myślników

nazwa-bloku__nazwa-elementu--nazwa-modu--wartość-modu

  • Nazwa elementu i bloku są oddzielone podwójnym podkreśleniem (__).
  • Blok i element są oddzielone podwójnym myślnikiem (--).
  • Wartości modyfikatora i modyfikatora są oddzielone podwójnym myślnikiem (--).

3. Styl nazewnictwa CamelCase

nazwa_bloku-nazwa_elementu_nazwa_modu_wartość_modu

  • Każde słowo po pierwszym słowie zaczyna się wielką literą.
  • Bloki, elementy i modyfikatory są używane w taki sam sposób, jak w standardowym schemacie nazewnictwa.

4. Reaguj na styl nazewnictwa

Nazwa bloku-Nazwa elementu_Nazwamodu_Wart.modu

  • Nazwa bloku i nazwy elementu zaczynają się od wielkiej litery.
  • Nazwa modyfikatora zaczyna się od małej litery.
  • Nazwa elementu i nazwa bloku są oddzielone pojedynczym łącznikiem (-).
  • Nazwy i wartości modyfikatorów są oddzielone tak samo jak w standardowym schemacie.

BEM w Drupalu z modułem Emulsify Twig

W Drupalu możemy skorzystać z funkcji BEM Twig za pomocą modułu Emulsify Twig. Funkcja BEM umożliwia tworzenie klas BEM na elementach w komponentach. Poniżej wymieniono niektóre rozszerzenia BEM Twig i ich zastosowanie.

1. Prosta nazwa bloku (wymagany argument):

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

To tworzy:

<div class="icon">

2. Blok z modyfikatorami:

Jeśli chcesz dodać wiele modyfikatorów, możesz to zrobić za pomocą tablicy.

<div {{ bem('icon', ['mały', 'czerwony']) }}>

To tworzy:

<div class="icon icon-–small icon-–red">

3. Element z modyfikatorami i nazwą bloku (opcjonalnie):

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

To tworzy:

<div class="icon-button__icon icon-button__icon--small icon-button__icon--red">

4. Element z nazwą bloku, ale bez modyfikatorów (opcjonalnie):

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

To tworzy:

<div class="icon-button__icon">

5. Element z nazwą bloku, modyfikatorami i dodatkowymi klasami:

<div {{ bem('icon', ['small', 'red'], 'icon-button', ['js-click', 'coś-innego']) }}>

To tworzy:

<div class="icon-button__icon icon-button__icon--small icon-button__icon--red js-kliknij coś-innego">

6. Element tylko z klasami dodatkowymi (opcjonalnie):

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

To tworzy:

<div class="icon js-click">

Dodaj rozszerzenie gałązki atrybutów

Funkcja Dodaj atrybuty Twig umożliwia dodawanie atrybutów HTML do elementów komponentów. Spójrz na kilka funkcji Dodaj atrybuty poniżej:

 {% 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>

Końcowe przemyślenia

Metodologia BEM jest niezwykle przydatna dla programistów, którzy chcą pisać i utrzymywać kod lepszej jakości, który można łatwo przekazać i zrozumieć. Każdy element ma swoje przeznaczenie, które można łatwo zidentyfikować po nazwie i bloku, z którego pochodzi. Przy prawidłowym użyciu zobaczysz, że użycie BEM może przyspieszyć rozwój. Jeśli spodobało Ci się to, co przeczytałeś, zapisz się do naszego cotygodniowego biuletynu, w którym będziemy wysyłać Ci świeże, ciekawe informacje prosto do Twojej skrzynki odbiorczej!