metodika bem
TRANSCRIPT
Metodika BEM
Martin Pešout / @martinpesout / martinpesout.cz
Co je to BEM?CO + PROČ + JAK
Milníkem byl 2013• 2013
• boom responsivního designu (RWD)
• RWD také znamená více složitějších CSS stylů
Milníkem byl 2013• 2013
• boom responsivního designu (RWD)
• RWD také znamená více složitějších CSS stylů
• 2014
• boom optimalizací vytvořených responsivních webů
• responsivní web neznamená rychlý web na mobilních připojeních
Vývoj webů v roce 2014 potřebuje metodologii
Skutečně potřebujeme dobrá pravidla
… raději než další frameworky
Proč vzniknul BEM?
• Způsob jak orgranizovat kód pro celý tým na velkých projektech
• Znovupoužitelné komponenty
• Komponenty s dlouhou životností
• Snadno se osvojuje pro nové členy v týmu
Nejde o magiiBEM není těžké se naučit.
Na webu také na toto téma najdeme celou řadu článků
a ukázek.
Nepoužívejte #ID selektory!
BEM = block + element + modifier
Block• Oddělené komponenty
• button
• menu
• heading
Block• Oddělené komponenty
• button
• menu
• heading
• Znovupoužitelné
• Nezávislé na dalších stylech
Element• Vnitřní součást blocku
• button
• menu
• heading
Element• Vnitřní součást blocku
• button - icon
• menu - item
• heading - logo
Element• Vnitřní součást blocku
• button - icon
• menu - item
• heading - logo
• Nemá význam pokud by byl použit odděleně
• Některé bloky se nemusí nutně dělit na elementy
Modifier• Definuje stav blocku nebo elementu
• button
• menu - item
• heading
Modifier• Definuje stav blocku nebo elementu
• button - color
• menu - item - active state
• heading - level
BEM používá třídy jako selectory pro bloky,
elementy a modifikátory
Konvence pro pojmenováníblock btn menu heading
Konvence pro pojmenováníblock__element btn__icon menu__item heading__logo
Konvence pro pojmenováníblock__element––modifier btn––large btn__icon––arrow menu––secondary menu__item––active
Hlavička<div class="header header--main"> <h1 class=“header__title">Brian & Jessica</h1> <div class=“header__description”> Main information about our wedding </div> </div>
Obvyklé chyby
• Nepoužívejte sdílené styly
• Nepoužívejte globální definice stylů (pouze normalize.css je povolen)
• Žádné definice vně bloku
<div class="header header--main"> <h1>Brian & Jessica</h1> <p> Main information about our wedding </p> </div>
Tlačítko<a href="#love-story" class="action-btn action-btn––arrow-down”></a>
Banner<div class=“banner"> <img src="/images/main-banner-large.jpg" alt="Bride and groom” class="banner__img"> <div class="banner__title">Soon together</div> <a href="#love-story" class="banner__btn action-btn action-btn--arrow-down"></a> </div>
Banner<div class=“banner"> <img src="/images/main-banner-large.jpg" alt="Bride and groom” class="banner__img"> <div class="banner__title">Soon together</div> <a href="#love-story" class="banner__btn action-btn action-btn--arrow-down"></a> </div>
• Můžeme kombinovat více bloků dohromady
Nezávislé styly• Můžeme změnit HTML syntax a vždy dosáhneme
stejného vzhledu
<ul class=“menu”>
<li class=“menu__item”>Home</li>
<li class=“menu__item menu__item––active”>Contact</li>
</ul>
<div class=“menu”> <div class=“menu__item”>Home</div> <div class=“menu__item menu__item––active”>Contact</div> </div>
Tipy a triky
• Preprocessor vám může pomoci k lepší organizaci stylů do více souborů. Každý blok může mít vlastní soubor.
• Použijte prefix js- pro třídy nebo ID selectory elementů, na které se odkazujete v JavaScriptových souborech
Děkuju za pozornost
Martin Pešout / @martinpesout / martinpesout.cz