Was ist BEM (Block, Element, Modifier) ​​und wie kann es mit Drupal Emulsify Twig verwendet werden

Bei der Arbeit mit Open-Source-Technologien und -Software ist es umso wichtiger, den Aufwand zum Lesen und Verstehen Ihres Codes zu vereinfachen. Eine gute Namenskonvention hilft Ihnen, größere Probleme zu lösen, anstatt sich bei Codeüberprüfungen auf Syntax- und Stilpräferenzen zu konzentrieren. Erfahrene Entwickler verstehen die Bedeutung von gut geschriebenem und organisiertem Code bei der Arbeit mit größeren Websites mit unzähligen Stilelementen.

Die BEM-Methodik (Block, Element, Modifier) ​​ist eine weit verbreitete Namenskonvention für CSS-Klassen, die aufgrund ihrer Benutzerfreundlichkeit immer beliebter wird. Das grundlegende Konzept von BEM ist die komponentenbasierte Webentwicklung. BEM macht die Schnittstellenentwicklung einfach und schnell, insbesondere wenn Sie große Projekte mit komplexer Benutzeroberfläche handhaben. Lassen Sie uns mehr über BEM erfahren und wie es mit dem Drupal Emulsify Twig-Modul funktionieren kann.

Was ist BEM

Die BEM-Methodik wurde eingeführt, um CSS-Klassen leichter zugänglich, verständlicher und skalierbarer zu machen. Es kann den Entwicklungsprozess beschleunigen und hilft beim Aufbau wiederverwendbarer Komponenten.

BEM besteht aus drei Teilen:

1. Block
2. Element
3. Modifikator

Block

Blöcke sind die äußerste und funktional unabhängige Komponente und wiederverwendbar. Beispiele: Kopfzeile, Fußzeile, Seitenleiste, Menü, Inhalt usw.

Merkmale:

• Blocknamen sollten immer den Zweck des Blocks widerspiegeln.
• Blöcke sollten keine Marge oder Position verwenden. Wenn Sie einen Rand oder eine Position hinzufügen müssen, müssen Sie diese auf die inneren Container anwenden.
• Verwenden Sie bei der Verwendung von BEM keine CSS-Tags oder ID-Selektoren.

Beispiel:

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

Element

Elemente sind untergeordnete Elemente eines Blocks. Jedes Element kann nur einen Block haben und kann nicht außerhalb davon verwendet werden. Beispiele: Menüpunkte, Listenpunkte, Eingabefeld etc.

Merkmale:

• Der Elementname (Klasse) sollte seinen Zweck (Titel, Bildunterschrift) und nicht seinen Zustand (klein/rot) beschreiben.
• Element und Block werden durch einen doppelten Unterstrich (__) getrennt. So: Blockname__Elementname.

Beispiel:

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

Modifikator

Ein Klassenname, über den Sie das Erscheinungsbild, den Zustand oder das Verhalten eines Blocks oder Elements definieren können. Beispiele: rot, groß, deaktiviert, fest usw.

Merkmale:

• Der Modifikatorname beschreibt sein Aussehen. Wenn das Erscheinungsbild beispielsweise „_large“ ist, lautet die Modifikatorklasse icon-button__title_large .
• Der Modifikator wird durch einen einzelnen Unterstrich (_) vom Block oder Element getrennt.

Beispiel:

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

Arten von Modifikatoren

1. Boolesch

Sie können den Zustand des booleschen Werts überprüfen und in einer Variablen festlegen. Diese Variable kann als Modifikatorwert übergeben werden.

2. Schlüsselwert

Die Struktur des vollständigen Namens des Modifikators mit Schlüsselwert folgt einem dieser Muster:

1. block-name_modifier-name_modifier-value
2. Blockname__Elementname_Modifikatorname_Modifikatorwert

Namenskonventionen: Regeln und Schemata

Es gibt verschiedene Namensschemata. Alle Schemata haben einige gemeinsame Regeln wie:

• Namen werden in lateinischen Kleinbuchstaben geschrieben.
• Wörter werden durch einen Bindestrich (-) getrennt.

1. Klassische Namensschemata

Das klassische Benennungsschema ist das Standard-Benennungsschema von BEM.

Blockname__elem-name_mod-name_mod-val

• Der Elementname und der Blockname werden durch einen doppelten Unterstrich (__) getrennt.
• Der Modifikatorname und der Block- oder Elementname werden durch einen einzelnen Unterstrich (_) getrennt.
• Der Modifikatorwert und der Modifikatorname werden durch einen einzelnen Unterstrich (_) getrennt.

2. Benennungsstil mit zwei Bindestrichen

block-name__elem-name--mod-name--mod-val

• Element- und Blockname werden durch einen doppelten Unterstrich (__) getrennt.
• Block und Element werden durch einen doppelten Bindestrich (--) getrennt.
• Der Wert eines Modifikators und Modifikators werden durch einen doppelten Bindestrich (--) getrennt.

3. CamelCase-Namensstil

blockName-elemName_modName_modVal

• Jedes Wort nach dem ersten Wort beginnt mit einem Großbuchstaben.
• Blöcke, Elemente und Modifikatoren werden genauso verwendet wie im Standard-Benennungsschema.

4. Benennungsstil reagieren

BlockName-ElemName_modName_modVal

• Block- und Elementnamen beginnen mit einem Großbuchstaben.
• Der Name des Modifikators beginnt mit einem Kleinbuchstaben.
• Ein Elementname und der Blockname werden durch einen einzelnen Bindestrich (-) getrennt.
• Namen und Werte von Modifikatoren werden wie im Standardschema getrennt.

BEM in Drupal mit Emulsify Twig Modul

In Drupal können wir die BEM Twig-Funktion mit Hilfe des Emulsify Twig-Moduls verwenden. Mit der BEM-Funktion können Sie BEM-Klassen für Elemente in den Komponenten erstellen. Nachfolgend sind einige BEM Twig-Erweiterungen und deren Verwendung aufgeführt.

1. Einfacher Blockname (erforderliches Argument):

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

Dies schafft:

<div class="icon">

2. Block mit Modifikatoren:

Wenn Sie mehrere Modifikatoren hinzufügen möchten, können Sie dies mithilfe eines Arrays tun.

<div {{ bem('icon', ['klein', 'rot']) }}>

Dies schafft:

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

3. Element mit Modifikatoren und Blockname (optional):

<div {{ bem('icon', ['klein', 'rot'], 'icon-button') }}>

Dies schafft:

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

4. Element mit Blockname, aber ohne Modifikatoren (optional):

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

Dies schafft:

<div class="icon-button__icon">

5. Element mit Blocknamen, Modifikatoren und Extraklassen:

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

Dies schafft:

<div class="icon-button__icon icon-button__icon--small icon-button__icon--red js-auf etwas anderes klicken">

6. Element nur mit Extraklassen (optional):

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

Dies schafft:

<div class="icon js-click">

Fügen Sie Attribute Twig Extension hinzu

Mit der Twig-Funktion Attribute hinzufügen können Sie den Elementen Ihrer Komponenten HTML-Attribute hinzufügen. Sehen Sie sich unten einige Funktionen zum Hinzufügen von Attributen an:

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

Abschließende Gedanken

Die BEM-Methodik ist äußerst nützlich für Entwickler, die Code in besserer Qualität schreiben und pflegen möchten, der leicht zu übergeben und zu verstehen ist. Jedes Element hat einen Zweck, der leicht anhand seines Namens identifiziert werden kann und aus welchem ​​Block es stammt. Bei richtiger Anwendung werden Sie feststellen, dass die Verwendung von BEM die Entwicklungsgeschwindigkeit steigern kann. Wenn Ihnen gefallen hat, was Sie gelesen haben, melden Sie sich für unseren wöchentlichen Newsletter an, in dem wir Ihnen frische, heiße Einblicke direkt in Ihren Posteingang schicken!