Na začátku minulého roku jsem si říkal, že 2013 bude ve znamení optimalizací. Řada firem totiž vytvářela „responsivní“ webové stránky, které šlo zobrazit na mobilních zařízeních, ale ve finále byl uživatel stejně nucen stahovat megabajty dat, aby si mohl výsledný web prohlédnout. Rok poté vidíme, že situace stále není ideální, ale určitá osvěta v tomhle směru už zafungovala. Nicméně objevil se tu ještě jeden problém. Větší poptávka po responsivních webech opět o něco zesložitila vývojářům psaní kaskádových stylů. Minulý rok se tak začalo více hovořit o používání standardů jako jsou OOCSS, SMACSS a BEM, které mají za cíl zlepšit strukturu psaní CSS. Ve své praxi se mně zatím nejvíce osvědčila metodika BEM. Proto bych rád tento článek věnoval jejím základům a položil tak úvod pro další zajímavé články do budoucna.

Jak tato metodika vznikla?

Metodika Block Element Modifier, zkráceně BEM, byla poprvé použita ve společnosti Yandex při vývoji robustního interního systému. Na počátku bylo potřeba dosáhnout několika cílů:

• Najít postup pro rychlý vývoj komponent, které přežijí uvnitř rozrůstajícího se projektu
• Znovu použitelnost kódu
• Snadná a rychlá pochopitelnost pro nové členy v týmu

BEM se tak postupně zformovala po několika letech práce na projektu. Výsledkem je poměrně přísný, ale na druhou stranu velice přehledný způsob pojmenovávání CSS tříd. To dělá tuto metodiku ideální pro vývoj projektů, které bude třeba udržovat i několik let.

BEM nepoužívá ID selektory

BEM nepočítá s používáním #ID selektoru v CSS. Já s tímto přístupem naprosto souhlasím a hned vysvětlím proč.

První nevýhodou totiž je, že takovéto elementy není možné znovu použít v kódu. Obečně totiž platí, že na vykreslené HTML stránce musí být každá ID použita pouze jednou. Můžeme sice říct, že naše kaskádové styly se aplikují i v případě, že bude konkrétní ID použito několikrát na stránce. Problém však nastává u JavaScriptu, kde se zohledňuje pouze první výskyt daného ID a dál už se nehledá. To je také důvod, proč použití ID je pro JavaScript rychlejší. Pokud se ale vyhneme tvorbě zbytečně složitých webů, bude tento rozdíl nepatrný.

Druhou větší nevýhodou, je priorita ID selektoru. Důležitější selektor „přebíjí“ méně důležitý. A právě ID selektory mají vyšší prioritu než běžné třídy u HTML elementů. To je taky důvod proč vznikl v CSS zápis !important. Naštěstí všechno, co dokážeme vyjádřit pomocí ID selektoru, můžeme hezky popsat pomocí běžných tříd. Navíc získáme znovupoužitelné komponenty a právě to je pro tuto metodiku podstatná vlastnost.

BLOCK, ELEMENT, MODIFIER

Základem je blok

Jednotlivé části webové stránky lze rozdělit do ucelených komponent - bloků. Jeden blok tak představuje skupinu prvků sdílejících společné vlastnosti. Příkladem může být například hlavička, patička, hlavní menu, produkt, filtr produktů atd. Ukažme si vše na bloku znázorňujícím hlavičku webové stránky, kterou označíme následující třídou.

.header {}

Blok může mít své části

Samotné bloky se můžou skládat z více součástí – elementů. Aby bylo zřejmé, že tyto části patří k naší komponentě, označíme je pomocí vzoru:

.block__element {}

V zápisu používáme k odlišení bloku a elementu dvojí podtržítko. Naše ukázková hlavička může obsahovat např. logo, navigaci, vyhledávání.

.header__logo {}
.header__nav {}
.header__searchbar {}

Specifické elementy

Může se stát, že takto vytvořené bloky a elementy budeme potřebovat ještě v určitých situacích modifikovat. K těmto účelům slouží v BEM takzvané modifikátory. V zápisu používáme k odlišení dvojí pomlčku:

.block--modifier {}
.block__element--modifier {}

Pokud si vezmeme náš ukázkový příklad, může být takovým modifikátorem třeba třída, která z naší navigace udělá navigaci fixní:

.header__nav--sticky {}

Nebo hlavičku roztáhneme na 100% šířky stránky:

.header--fullscreen {}

Jak na zápis v HTML?

Jednotlivé komponenty se můžou dále navzájem prolínat. Náš ukázkový příklad s hlavičkou z předchozího odstavce obohatíme ještě o blok .main-nav, který ponese styly pro hlavní navigaci na webu. Výsledný zápis může vypadat v HTML třeba takto:

<header class="header header--fullscreen">
  <a href="/" class="header__logo"><img src="logo.png" alt="Logo webu" title="Velké logo" /></a>
  <nav class="header__nav main-nav">
    <ul>
      <li class="main-nav__link"><a href="/str1.html">Stránka 1</a></li>
      <li class="main-nav__link main-nav__link--active"><a href="/str2.html">Stránka 2</a></li>
    </ul>
  </nav>
  <form class="header__searchbar" action="process.php">
    <input type="text" name="searchtext" />
    <input type="submit" value="Hledat" />
  </form>
</header>

Závěrem

Pokud jste metodiku BEM ještě nepoužili v praxi, může vám připadat podobný zápis tříd poměrně upovídaný. Ano, názvy tříd jsou o něco delší, nicméně je potřeba se přes to trochu přenést. Až si BEM více osvojíte, tak zjistíte, že vám do vaší práce vnese pořádek a nestane se vám, že byste si začali jednotlivé definice kaskádových stylů mezi sebou omylem přepisovat.