CSS verwendet die BEM-Namenskonvention

Welche Informationen möchten Sie erhalten, wenn Sie eine Klasse sehen?

• Wo wird diese Klasse verwendet und was ist ihre Funktion?
• Wird diese Klasse an anderen Stellen verwendet? Führt die Änderung an anderen Stellen zu Stilproblemen?
• Wird eine Klasse in js verwendet?
• ......

An diesem Punkt möchten Sie, dass diese Klasse alle oben genannten Probleme auf einen Blick löst, und BEM lohnt sich.

Was ist BEM

BEM (Block, Element, Modifier) ​​ist eine Front-End-Benennungsmethode für die komponentenbasierte Webentwicklung, hauptsächlich für CSS. Die Idee dahinter besteht darin, die Benutzeroberfläche in unabhängige Teile aufzuteilen. Dies macht die Schnittstellenentwicklung selbst bei komplexen Benutzeroberflächen einfach und schnell und ermöglicht die Wiederverwendung vorhandenen Codes ohne Kopieren und Einfügen.

Vorteile

• Vermeiden Sie Stilkonflikte
• Reduzieren Sie die Namenslänge
• Verbessern Sie die Lesbarkeit
• Erhöhen Sie die Wiederverwendung von Stilen

So verwenden Sie BEM

Block

Eine funktional unabhängige Seitenkomponente, die wiederverwendet werden kann

Blöcke sollten ihre Umgebung nicht beeinflussen, das heißt, Sie sollten weder die äußere Geometrie (Ränder) noch die Position des Blocks festlegen.

<!--
    Gut
-->
<div Klasse = "Header" > </div >

<!--
    schlecht
    roter Text soll das Aussehen beschreiben -->
<div Klasse = "roter Text" > </div>

Element

Zusammengesetzter Teil eines Blocks, kann nicht allein verwendet werden

Die Struktur des vollständigen Namens des Elements lautet Blockname__Elementname

<!-- Block `Suchformular` -->
<form class="Suchformular">
    <!-- `Eingabeschaltfläche`-Element im `Suchformular`-Block -->
    <input class="Suchformular__input">
    <button class="search-form__button">Suchen</button>
</form>

Ein Element ist immer Teil eines Blocks und nicht eines anderen Elements. Elementnamen können daher nicht als Hierarchie von block__elem1__elem2 definiert werden.

<!--
    Gut
    Folgen Sie `block-name__element-name`
-->
<form class="Suchformular">
    <div Klasse="Suchformular__Inhalt">
        <input class="Suchformular__input">
        <button class="search-form__button">Suchen</button>
    </div>
</form>

<!--
    schlecht
    „search-form__content__button“ folgt nicht „block-name__element-name“
-->
<form class="Suchformular">
    <div Klasse="Suchformular__Inhalt">
        <input class="Suchformular__Inhalt__Input">
        <button class="search-form__content__button">Suchen</button>
    </div>
</form>

Das Element ist immer Teil eines Blocks und Sie sollten es nicht getrennt vom Block verwenden.

<form class="Suchformular">
    <!-- 
        Gut
        Das Element befindet sich innerhalb des Blocksuchformulars -->
    <input class="Suchformular__input">
    <button class="search-form__button">Suchen</button>
</form>

<form class="search-form"></form>
<!--
    schlecht 
    Das Element befindet sich nicht im Blocksuchformular -->
<input class="Suchformular__input">
<button class="search-form__button">Suchen</button>

Modifikator

Eine Entität, die das Aussehen, den Zustand oder das Verhalten eines Blocks oder Elements definiert

Zwei Arten von Modifikatoren

Boolescher Wert

Der Aufbau des vollständigen Namens eines Modifikators folgt folgendem Muster:

• Blockname_Modifikatorname
• Blockname - Modifikatorname
• Blockname_Elementname_Modifikatorname
• Blockname_Elementname - Modifikatorname

<form class="Suchformular Suchformular_fokussiert">
    <input class="Suchformular__input">

    <!-- 'deaktiviert' ist ein Element von 'Schaltfläche' -->
    <button class="search-form__button search-form__button_disabled">Suchen</button>
</form>

Schlüsselwert

Der Aufbau des vollständigen Namens eines Modifikators folgt folgendem Muster:

• Blockname_Modifikatorname_Modifikatorwert
• Blockname_Modifikatorname - Modifikatorwert
• Blockname__Elementname_Modifikatorname_Modifikatorwert
• Blockname__Elementname_Modifikatorname-Modifikatorwert

<form class="Suchformular Suchformular_Thema_Inseln">
    <input class="Suchformular__input">

    <!-- 
        Gut
        Der Wert des Modifikators `size` von `button` ist `m` 
    -->
    <button class="search-form__button search-form__button_size_m">Suchen</button>
</form>

<form class="Suchformular
             Suchformular_Themeninseln
             Suchformular_Thema_Lite">
    <input class="Suchformular__input">

    <!-- 
        schlecht
        Sie können nicht zwei verschiedene Werte desselben Modifikators gleichzeitig verwenden -->
    <button class="Suchformular__button
                   Suchformular__Schaltflächengröße_s
                   Suchformular__Schaltflächengröße_m">
   </button>
</form>

Ein Modifikator kann nicht isoliert von dem Block oder Element verwendet werden, das er modifiziert. Modifikatoren sollten das Aussehen, das Verhalten oder den Zustand einer Entität ändern, nicht ersetzen.

<!--
    Gut
-->
<form class="Suchformular Suchformular_Thema_Inseln">
    <input class="Suchformular__input">
    <button class="search-form__button">Suchen</button>
</form>

<!-- 
    schlecht
    Blockname „Suchformular“ fehlt 
-->
<form class="search-form_theme_islands">
    <input class="Suchformular__input">
    <button class="search-form__button">Suchen</button>
</form>

Vorteile des Hinzufügens von Blocknamen zu Modifikatoren und Elementnamen

• Hilft, die Auswirkungen der Elemente und Modifikatoren eines Blocks auf die Implementierung eines anderen Blocks zu reduzieren
• Es ist klarer zu wissen, auf welche Entität im DOM-Knoten der Modifikator angewendet wird.
• Eindeutige Namen erleichtern das Auffinden von Entitäten im Code oder im Dateisystem.

Wann sollten Sie BEM einsetzen?

• Der Trick bei der Verwendung von BEM besteht darin, zu wissen, wann und was im BEM-Format geschrieben werden sollte.
• Nicht alles sollte die BEM-Benennung verwenden. Das BEM-Format sollte verwendet werden, wenn explizite Modulbeziehungen erforderlich sind.
• Wenn es sich beispielsweise nur um ein einziges öffentliches Stylesheet handelt, ist die Verwendung des BEM-Formats sinnlos:

.verstecken {
    Anzeige: keine !wichtig;
}

Namenskonventionen

Doppelter Unterstreichungsstil
block-name__elem-name--mod-name--mod-val

• Der Name wird in lateinischen Kleinbuchstaben geschrieben.
• Wörter in BEM-Entitätsnamen werden durch Bindestriche (-) getrennt.
• Elementnamen werden durch doppelte Unterstriche (__) von Blocknamen getrennt.
• Boolesche Modifikatoren werden durch doppelte Bindestriche (--) vom Namen des Blocks oder Elements getrennt.
• Der Wert des Modifikators wird durch einen doppelten Bindestrich (--) von seinem Namen getrennt.
• (Wichtig: Doppelte Bindestriche in Kommentaren (--) können bei der Validierung des HTML-Dokuments zu Fehlern führen.)

CamelCase-Stil
blockName-elemName_modName_modVal

• Der Name ist in lateinischen Buchstaben geschrieben.
• Jedes Wort im Namen beginnt mit einem Großbuchstaben.
• Die Trennzeichen für Block-, Element- und Modifikatornamen sind dieselben wie im Standardschema.

React-Benennungsparadigma
BlockName-ElemName_modName_modVal

• Der Name ist in lateinischen Buchstaben geschrieben.
• Block- und Elementnamen beginnen mit einem Großbuchstaben. Modifikatornamen beginnen mit einem Kleinbuchstaben.
• Jedes Wort im Namen beginnt mit einem Großbuchstaben.
• Der Elementname wird durch einen einzelnen Bindestrich (-) vom Blocknamen getrennt.
• Das Trennzeichen zwischen dem Namen und dem Wert des Modifikators ist dasselbe wie im Standardschema.

Keine Namespace-Stile
_available

• Der Name ist in lateinischen Buchstaben geschrieben.
• Dem Modifikator ist nicht der Name des Blocks oder Elements vorangestellt. Dieses Benennungsschema begrenzt die Verwendung von Mischungen, da nicht festgestellt werden kann, zu welchem ​​Block oder Element ein Modifikator gehört.

Allgemeine CSS-Benennung

Beispiel

Vant-Komponenten-CSS-Benennung

Der verwendete Benennungsstil ist der doppelte Unterstrich: Blockname__Elementname-Modifikatorname

<div Klasse="van-doc">
    <div Klasse="van-doc-header">
        <div Klasse="von-doc-row">
            <div Klasse="van-doc-header__top">
                <a class="van-doc-header__logo">Suche</a>
                <ul Klasse="van-doc-header__top-nav">
                    <li Klasse="van-doc-header__top-nav-item">
                        <a class="van-doc-header__logo-link">
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div Klasse="van-doc-container van-doc-row van-doc-container--mit-Simulator">
        ......
    </div>
</div>

Weui-Komponenten-CSS-Benennung

Die verwendete Benennung ist der React-Benennungsstil: block-name__element-name_modifier-name

<div Klasse="Seitenschaltfläche js_show">
    <div Klasse="page__hd">
        <h1 class="page__title">Schaltfläche</h1>
        <p class="page__desc">Schaltfläche</p>
    </div>
    <div Klasse="page__bd">

        <div Klasse="button-sp-area">
            <a class="weui-btn weui-btn_primary">Hauptbedienung der Seite</a>
            <a class="weui-btn weui-btn_loading">Hauptvorgang der Seite</a>
            <a class="weui-btn weui-btn_disabled>Hauptbedienung der Seite</a>
            <a class="weui-btn weui-btn_default">Sekundäre Seitenoperationen</a>
            <a class="weui-btn weui-btn_warn">Warnvorgänge</a>
        </div>
        ....
        <div Klasse="button-sp-area Zelle">

BEM Spezifikationsvalidierungstool

Stylelint-Selektor-BEM-Muster

Dies ist das Ende dieses Artikels über die Verwendung von BEM-Namensstandards in CSS. Weitere relevante CSS-BEM-Namensstandards finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!