CSS Architektur Block-Element-Modifier (BEM)-SitePoint

BEM (Blockelementmodifier) ​​ist eine Front-End-Entwicklungsmethode, eine Namenskonvention und eine Reihe von zugehörigen Tools. Es stammt aus Yandex und wurde für die effiziente Entwicklung großer Teams entwickelt. Diese Erklärung konzentriert sich auf das Kernkonzept und das Benennungssystem.

BEM fördert das Anzeigen von Websites als Sammlungen wiederverwendbarer Komponentenblöcke, die für die Erstellung von Schnittstellen kombinierbar sind. Ein Block ist ein Website -Abschnitt (Header, Fußzeile, Seitenleiste usw.), wie in Abbildung 2.3 dargestellt. Beachten Sie, dass sich "Block" hier auf HTML -Seitensegmente bezieht.

Abbildung 2.3. Eine Homepage kann Header-, Haupt- und Fußzeilenblöcke umfassen.

Blöcke können nisten. Beispielsweise kann ein Headerblock Logo-, Navigations- und Suchformularblöcke enthalten (Abbildung 2.4). Eine Fußzeile könnte einen Sitemap -Block enthalten.

Abbildung 2.4. Ein Headerblock umfasst Logo, Navigation und Suchblöcke.

Elemente sind körniger als Blöcke. Wie in der BEM-Dokumentation heißt es: "Ein Element ist Teil eines Blocks, der eine bestimmte Funktion ausführt. Elemente sind kontextabhängig; sie sind nur in ihrem übergeordneten Block sinnvoll."

Ein Suchformularblock enthält beispielsweise ein Texteingangselement und ein Schaltflächenelement (Abbildung 2.5). Hier bezieht sich "Element" auf Designelemente, nicht auf HTML -Elemente.

Abbildung 2.5. Ein Suchblock mit Texteingabe- und Senden -Schaltflächenelementen.

Ein Hauptinhaltsblock kann einen Artikellistenblock enthalten, der wiederum Artikel -Promo -Blöcke enthält. Jeder Promo -Block könnte Bild-, Auszugs- und "Lesen Sie mehr" Elemente (Abbildung 2.6).

Abbildung 2.6. Ein Werbeblock für einen Website -Artikel.

Blöcke und Elemente bilden den Kern der Namenskonvention von BEM:

• Blocknamen müssen eindeutig projektweit sein.
• Elementnamen müssen innerhalb eines Blocks eindeutig sein.
• Blockvariationen (z. B. ein dunkles Suchfeld) Verwenden Sie Modifikatoren im Klassennamen.

Block- und Elementnamen werden durch zwei Unterstriche getrennt (__). Modifikatoren werden von zwei Bindestrichen von Block/Elementnamen getrennt (--).

Hier ist ein BEM-Suchformular Beispiel:

<div class="search">
  <div class="search__wrapper">
    <label for="s" class="search__label">Search for:</label>
    <input type="text" id="s" class="search__input" />
    <input type="submit" class="search__submit" value="Search" />
  </div>
</div>

Eine dunkle Version:

<div class="search search--inverse">
  <div class="search__wrapper search__wrapper--inverse">
    <label for="s" class="search__label search__label--inverse">Search for:</label>
    <input type="text" id="s" class="search__input search__input--inverse" />
    <input type="submit" class="search__submit search__submit--inverse" value="Search" />
  </div>
</div>

entsprechende CSS:

<div class="search">
  <div class="search__wrapper">
    <label for="s" class="search__label">Search for:</label>
    <input type="text" id="s" class="search__input" />
    <input type="submit" class="search__submit" value="Search" />
  </div>
</div>

im Markup und CSS sind search--inverse und search__label--inverse Klassen hinzugefügt, nicht Ersatz. Es werden nur Klassenauswahl verwendet; Kinder- und Nachkomme -Selektoren sind erlaubt, sollten aber auch Klassen ansprechen. Element- und ID -Selektoren werden vermieden. Dies hält die Selektorspezifität niedrig, verhindert Nebenwirkungen und macht CSS unabhängig von Markup -Mustern. Eindeutige Block- und Elementnamen verhindern Benennungskonflikte. Zu den Vorteilen gehören:

• Verbesserte Code -Lesbarkeit und -verständnis für neue Teammitglieder.
• erhöhte Teamproduktivität.
• Reduzierte Namenskollisionen und Nebenwirkungen.
• CSS Unabhängigkeit von Markup.
• hohe CSS -Wiederverwendbarkeit.

BEMs Bereich geht über diesen Überblick hinaus. Die offizielle BEM -Website enthält umfassende Details, Tools und Tutorials. "Get Bem" ist eine weitere hervorragende Ressource für die Namenskonvention.

(Der häufig gestellte Fragen wird weggelassen, da es sich um eine Wiederholung der bereits vorhandenen Informationen handelt und die Länge des Ausgangs erheblich erhöht, ohne neue Inhalte hinzuzufügen.)

Das obige ist der detaillierte Inhalt vonCSS Architektur Block-Element-Modifier (BEM)-SitePoint. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!