BEM

Den aktuella versionen av sidan har ännu inte granskats av erfarna bidragsgivare och kan skilja sig väsentligt från versionen som granskades den 11 oktober 2015; kontroller kräver 23 redigeringar .

BEM (Block-Element-Modifier) ​​är en webbutvecklingsmetodik , såväl som en uppsättning gränssnittsbibliotek, ramverk och hjälpverktyg.

Översikt

Grundläggande begrepp

"Block", "element" och "modifierare" är de grundläggande BEM-termerna. Dessa är nödvändiga och tillräckliga begrepp för att beskriva ett gränssnitt av vilken komplexitet som helst.

Blockera

Ett block är en oberoende gränssnittskomponent. Ett block kan vara enkelt eller sammansatt (innehålla andra block). När du skapar ett block måste du se till att det kan användas var som helst på webbsidan, samt upprepas på samma plats på sidan (föräldraelementet). Blocket måste inkludera all implementering som är nödvändig för att representera den del av gränssnittet som det uttrycker.

Element

Ett element är en komponent i ett block. Element är kontextkänsliga: de är bara vettiga inom sitt block. Ett element är en valfri komponent i ett block, små block klarar sig utan element.

Modifierare

En modifierare är en egenskap hos ett block eller element som specificerar ändringar av dess utseende eller beteende. Modifieraren kan vara ett booleskt (t.ex. button_big) eller ett nyckel-värdepar (t.ex. menu_type_bullet, menu_type_numbers). Ett block eller element kan ha flera modifierare samtidigt.

Syftet med att skapa BEM

BEM erbjuder en gemensam semantisk modell för all teknik som används i front-end-utveckling (HTML, CSS, JavaScript, mallar, etc.)

Med hjälp av begreppen "block", "element" och "modifierare" är det möjligt att beskriva dokumentets trädstruktur. En sådan beskrivning kallas ett BEM-träd och är en semantisk representation av gränssnittet, en abstraktion över DOM-trädet.

Tillämpning av BEM i olika webbteknologier

HTML/CSS

I HTML / CSS representeras block, element och modifierare som CSS-klasser namngivna enligt namnkonventionen. Flera block kan placeras på samma DOM-nod, i vilket fall DOM-noden tilldelas 2 CSS-klasser. Ett block och ett element i ett annat block kan också placeras på samma DOM-nod.

Namnregler för BEM-klasser från Yandex

Blockets CSS-klass matchar blockets namn. Ett bindestreck används för att separera ord i komplexa blocknamn.

<div class= "header" > ... </div> <ul class= "menu" > ... </ul> <span class= "button" > ... </span> <div class= "tabbed-pane" > ... </div>

Ett elements CSS-klass innehåller blocknamnet och elementnamnet, åtskilda av två understreck.

<div class= "header" > <div class= "header__bottom" > ... </div> </div> <ul class= "menu" > <li class= "menu__item" > ... </li> </ul> <span class= "button" > <input class= "button_control" > ... </input> </span> <div class= "tabbed-pane" > <div class= "tabbed-pane__panel" > ... </div> </div>

Modifieraren CSS-klassen innehåller blocknamnet och modifieringsnamnet separerade av ett enda understreck. I händelse av att modifieraren är ett nyckel-värdepar, separeras de också med ett understreck. För en elementmodifierare lagras både blocknamnet och elementnamnet i CSS-klassen. Modifieraren CSS-klassen används tillsammans med dess blockklass (eller element).

<div class= "header header_christmas" > ... </div> <!-- Julutgåva av rubriken --> <ul class= "menu" > <li class= "menu__item menu__item_current" > ... </li> </ul> <span class= "button button_theme_night" > ... </span> <div class= "tabbed-pane tabbed-pane_disabled" > ... </div> BEM klass namnkonventioner av Harry Roberts

Alternativa namnkonventioner har föreslagits av Harry Roberts [1] . Han rekommenderar att du använder två bindestreck för att skilja block- och elementnamn från modifieraren.

<div class= "header header--christmas" > ... </div> <!-- Julutgåva av rubriken --> <ul class= "menu" > <li class= "menu__item menu__item--current" > ... </li> </ul> <span class= "button button--theme_night" > ... </span> <div class= "tabbed-pane tabbed-pane--disabled" > ... </div> Prefix

Vissa namnkonventioner rekommenderar att du använder prefix . Så alla blockklasser kan börja med prefixet b-.

<div class= "b-header" > ... </div> <ul class= "b-menu" > ... </ul> <span class= "b-button" > ... </span> <div class= "b-tabbed-pane" > ... </div>

Ibland används projektets förkortade namn som prefix. Till exempel, OrangePool->op.

<div class= "op-header" > ... </div> <ul class= "op-menu" > ... </ul> <span class= "op-button" > ... </span> <div class= "op-tabbed-pane" > ... </div>

JavaScript

I BEM fungerar JavaScript med den abstrakta strukturen av blockelement och modifierare utan att direkt komma åt de underliggande DOM-noderna och deras CSS-klasser. Dessutom används inga extra "JavaScript-specifika" CSS-klasser för att identifiera DOM-noder. För att tillhandahålla denna möjlighet används ett ramverk eller en egen uppsättning medhjälpare.

Hjälpare för att arbeta med BEM-strukturen

Så, om varje block med JavaScript-funktionalitet motsvarar ett objekt, tillåter dess metoder:

  • åtkomst till kapslade element:
// anta att blockObj pekar på ett blockobjekt <div class="tabbed-pane"> blockObj . elem ( 'panel' ); // returnerar element <div class="tabbed-pane__panel">
  • arbeta med modifierare
// anta att blockObj pekar på ett blockobjekt <div class="tabbed-pane"> blockObj . setMod ( 'avaktiverad' ); // ställer in modifierare <div class="tabbed-pane tabbed-pane_disabled"> blockObj . delMod ( 'inaktiverad' ); // ta bort modifierare Reaktion på installation/borttagning av modifierare

Eftersom modifieraren återspeglar blockets tillstånd, när modifieraren tilldelas, måste blocket eller elementet föras till lämpligt tillstånd. För att ändra utseendet räcker det att tilldela en modifierare CSS-klass. I mer komplexa fall kräver JavaScript-funktionalitet för att föra blocket till önskat tillstånd. Därför måste JavaScript-ramverket som används kunna deklarera en lista med åtgärder som motsvarar modifieraren.

BlockObj . on ({ active : function () { // do smth when active }, disabled : function () { // do something when disabled } }); i-bem.js

Hittills erbjuder ramverket i-bem.js(en del av biblioteket bem-core) den mest kompletta implementeringen av BEM-principer i JavaScript. Information om ramverket och exempel på användning finns på sidorna:

Mallar

Projektfilstruktur

På filsystemet representeras block, element och modifierare som filer av deras implementeringar i olika webbteknologier. Filer som tillhör ett block kombineras till en katalog.

Platt struktur

Den enklaste projektstrukturen involverar inte kapsling i blockkatalogen:

knapp/ button.css button.js button.tpl button_control.css rubrik/ header.css header.tpl header_christmas.css tabbed-pane/ flikar panel.css tabbed-pane.js tabbed-pane.tpl Kapslad struktur

I stora projekt eller bibliotek är det praktiskt att använda en kapslad blockfilstruktur, där kataloger allokeras för element och modifierare.

knapp/ __kontrollera/ button_control.css button.css button.js button.tpl rubrik/ _jul/ header_christmas.css header.css header.tpl tabbed-pane/ flikar panel.css tabbed-pane.js tabbed-pane.tpl

Applikation

Metodiken utvecklades av Yandex och används i stor utsträckning i detta företags produkter [2] .

Den har hittat tillämpning som en del av ett speciellt utvecklat HTML5- ramverk för omdesign och omstrukturering av mail.ru- posttjänsten [3] [4] .

Samma metodik användes bland annat av BBC:s tv- och radioföretag när de utvecklade sin nya webbplats [5] .

BEM används också i Googles 2015- release av Material Design Lite , ett HTML5- ramverk som Twitter Bootstrap som stöder materialdesign [6] .

Anteckningar

  1. ↑ Harry Roberts. MindBEMding – få huvudet runt BEM-syntax . csswizardry (25 januari 2013). Hämtad 7 juli 2015. Arkiverad från originalet 8 juli 2015.
  2. ↑ Varvara Stepanova. Vad kan du låna från Yandex frontend dev . Riga WebConf, bem.info (november 2012.). Hämtad 7 juli 2015. Arkiverad från originalet 8 juli 2015.
  3. ↑ Yury Vetrov. Produktdesign Unification Fallstudie: Mobile Web Framework . Smasing Magazine (4 februari 2015). Hämtad 7 juli 2015. Arkiverad från originalet 8 juli 2015.
  4. ↑ Jurij Vetrov. Design Unification: The Mail.Ru Group Framework for the Mobile Web . bem.info (20 maj 2015). Hämtad 7 juli 2015. Arkiverad från originalet 8 juli 2015.
  5. ↑ Andrew Hillel. Senior webbutvecklare, innehåll. Hur vi byggde den nya BBC-hemsidan . BBC Blog (16 februari 2015). Tillträdesdatum: 7 juli 2015. Arkiverad från originalet 3 juli 2015.
  6. ↑ Förstå B.E.M. material-design-lite. Hämtad 7 juli 2015. Arkiverad från originalet 11 januari 2019.

Litteratur

Länkar