BEM

Aktuální verze stránky ještě nebyla zkontrolována zkušenými přispěvateli a může se výrazně lišit od verze recenzované 11. října 2015; kontroly vyžadují 23 úprav .

BEM (Block-Element-Modifier) ​​​​je metodika vývoje webu , stejně jako sada knihoven rozhraní, rámců a pomocných nástrojů.

Přehled

Základní pojmy

"Blok", "prvek" a "modifikátor" jsou základní pojmy BEM. Toto jsou nezbytné a dostatečné koncepty pro popis rozhraní jakékoli složitosti.

Blokovat

Blok je nezávislá komponenta rozhraní. Blok může být jednoduchý nebo složený (obsahuje další bloky). Při vytváření bloku je třeba zajistit, aby mohl být použit kdekoli na webové stránce a také opakován na stejném místě na stránce (nadřazený prvek). Blok musí obsahovat veškerou implementaci nezbytnou k reprezentaci části rozhraní, kterou vyjadřuje.

Prvek

Prvek je součástí bloku. Prvky jsou závislé na kontextu: smysl dávají pouze v rámci svého bloku. Prvek je volitelná součást bloku, malé bloky se obejdou bez prvků.

Modifikátor

Modifikátor je vlastnost bloku nebo prvku, která určuje změny jeho vzhledu nebo chování. Modifikátor může být booleovský (např button_big. ) nebo pár klíč–hodnota (např . menu_type_bullet, menu_type_numbers). Blok nebo prvek může mít více modifikátorů současně.

Účel vytvoření BEM

BEM nabízí společný sémantický model pro všechny technologie používané při vývoji front-endu (HTML, CSS, JavaScript, šablony atd.)

Pomocí pojmů "blok", "prvek" a "modifikátor" je možné popsat stromovou strukturu dokumentu. Takový popis se nazývá strom BEM a je sémantickou reprezentací rozhraní, abstrakcí nad stromem DOM.

Aplikace BEM v různých webových technologiích

HTML/CSS

V HTML / CSS jsou bloky, prvky a modifikátory reprezentovány jako třídy CSS pojmenované podle konvence pojmenování. Na stejném uzlu DOM může být umístěno více bloků, v takovém případě má uzel DOM přiřazeny 2 třídy CSS. Blok a prvek jiného bloku mohou být také umístěny na stejném uzlu DOM.

Pravidla pojmenování tříd BEM z Yandexu

Třída CSS bloku odpovídá názvu bloku. Pomlčka se používá k oddělení slov ve složitých názvech bloků.

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

Třída CSS prvku obsahuje název bloku a název prvku oddělené dvěma podtržítky.

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

Třída CSS modifikátoru obsahuje název bloku a název modifikátoru oddělené jedním podtržítkem. V případě, že je modifikátorem pár klíč–hodnota, jsou také odděleny podtržítkem. U modifikátoru prvku je název bloku i název prvku uložen ve třídě CSS. Modifikační třída CSS se používá ve spojení s její třídou bloku (nebo prvku).

<div class= "header header_christmas" > ... </div> <!-- Vánoční vydání záhlaví --> <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 třídy pojmenování konvence od Harryho Robertse

Alternativní jmenovací konvence byly navrženy Harrym Robertsem [1] . Doporučuje používat 2 pomlčky k oddělení názvů bloků a prvků od modifikátoru.

<div class= "header header--christmas" > ... </div> <!-- Vánoční vydání záhlaví --> <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> Předpony

Některé konvence pojmenování doporučují používat předpony . Všechny třídy bloků tedy mohou začínat prefixem b-.

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

Někdy se jako předpona používá zkrácený název projektu. Například OrangePool->op.

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

JavaScript

V BEM pracuje JavaScript s abstraktní strukturou blokových prvků a modifikátorů, aniž by přímo přistupoval k základním uzlům DOM a jejich třídám CSS. K identifikaci uzlů DOM se také nepoužívají žádné další třídy CSS „specifické pro JavaScript“. K zajištění této možnosti se používá framework nebo jeho vlastní sada pomocníků.

Pomocníci pro práci se strukturou BEM

Pokud tedy každý blok s funkcí JavaScriptu odpovídá objektu, jeho metody umožňují:

  • přístup k vnořeným prvkům:
// předpokládejme, že blockObj ukazuje na blokový objekt <div class="tabbed-pane"> blockObj . elem ( 'panel' ); // vrátí prvky <div class="tabbed-pane__panel">
  • pracovat s modifikátory
// předpokládejme, že blockObj ukazuje na blokový objekt <div class="tabbed-pane"> blockObj . setMod ( 'zakázáno' ); // nastaví modifikátor <div class="tabbed-pane tabbed-pane_disabled"> blockObj . delMod ( 'zakázáno' ); // odstranění modifikátoru Reakce na instalaci/odstranění modifikátorů

Protože modifikátor odráží stav bloku, když je modifikátor přiřazen, musí být blok nebo prvek uveden do odpovídajícího stavu. Pro změnu vzhledu stačí přiřadit modifikátor CSS třídu. Ve složitějších případech vyžaduje uvedení bloku do požadovaného stavu funkčnost JavaScriptu. Použitý JavaScriptový framework proto musí být schopen deklarovat seznam akcí odpovídající modifikátoru.

BlockObj . on ({ active : function () { // udělat cokoli, když je aktivní }, vypnuto : function () { // udělat něco, když je zakázáno } }); i-bem.js

K dnešnímu dni framework i-bem.js(součást knihovny bem-core) nabízí nejúplnější implementaci principů BEM v JavaScriptu. Informace o frameworku a příklady použití naleznete na stránkách:

Šablony

Struktura souboru projektu

Na souborovém systému jsou bloky, prvky a modifikátory reprezentovány jako soubory jejich implementací v různých webových technologiích. Soubory patřící do jednoho bloku jsou sloučeny do jednoho adresáře.

Plochá konstrukce

Nejjednodušší struktura projektu nezahrnuje vnoření do adresáře bloků:

knoflík/ tlačítko.css button.js button.tpl button_control.css záhlaví/ hlavička.css hlavička.tpl hlavička_vánoce.css tablo/ panel s kartami.css tabbed-pane.js tabbed-pane.tpl Vnořená struktura

Ve velkých projektech nebo knihovnách je vhodné použít strukturu vnořených blokových souborů, kde jsou alokovány adresáře pro prvky a modifikátory.

knoflík/ __řízení/ button_control.css tlačítko.css button.js button.tpl záhlaví/ _Vánoce/ hlavička_vánoce.css hlavička.css hlavička.tpl tablo/ panel s kartami.css tabbed-pane.js tabbed-pane.tpl

Aplikace

Metodika byla vyvinuta společností Yandex a je široce používána v produktech této společnosti [2] .

Našel uplatnění jako součást speciálně vyvinutého rámce HTML5 pro redesign a refaktoring poštovní služby mail.ru [3] [4] .

Stejnou metodiku mimo jiné použila i televizní a rozhlasová společnost BBC při vývoji svého nového webu [5] .

BEM se také používá ve verzi Material Design Lite od Google z roku 2015 , což je rámec HTML5 , jako je Twitter Bootstrap , který podporuje Material design [6] .

Poznámky

  1. ↑ Harry Roberts. MindBEMding – přehled o syntaxi BEM . csswizardry (25. ledna 2013). Získáno 7. července 2015. Archivováno z originálu dne 8. července 2015.
  2. ↑ Varvara Štěpánová. Co si můžete půjčit od Yandex frontend dev . Riga WebConf, bem.info (listopad 2012). Získáno 7. července 2015. Archivováno z originálu dne 8. července 2015.
  3. ↑ Jurij Vetrov. Případová studie sjednocení designu produktu: Mobile Web Framework . Smasing Magazine (4. února 2015). Získáno 7. července 2015. Archivováno z originálu dne 8. července 2015.
  4. ↑ Jurij Vetrov. Sjednocení designu: Rámec skupiny Mail.Ru pro mobilní web . bem.info (20. května 2015). Získáno 7. července 2015. Archivováno z originálu dne 8. července 2015.
  5. ↑ Andrew Hillel. Senior Web Developer, Obsah. Jak jsme vybudovali novou domovskou stránku BBC . Blog BBC (16. února 2015). Datum přístupu: 7. července 2015. Archivováno z originálu 3. července 2015.
  6. ↑ Porozumění B.E.M. material-design-lite. Získáno 7. července 2015. Archivováno z originálu 11. ledna 2019.

Literatura

Odkazy