BEM, SASS, přehledný kód a klidné kodérské sny

BEM (Block Element Modifier) a preprocesor SASS

Práci na frontendu mi často usnadňuje metoda BEM (Block Element Modifier) a preprocesor SASS. BEM má jednu nespornou výhodou v tom, že když se do projektu zapojí jakýkoliv další vývojář, ví, v jakém stylu má být kód zapsán. Eliminujeme tak nepořádek v kódu. Díky preprocesoru si snadno určíte custom helpery, které vám usnadní každodenní práci a zvýší efektivitu.

Určitě se vám již stalo, že při zanořování u modifikátoru ve stylech došlo k menší komplikaci. Uvedu na příkladu:

<div class="custom">
   <div class="custom__child">
       <p>Toto je jen ukázka</p>
   </div>
</div> 

Tento kód nám definuje modifikátor a jeho child. Ve stylech bychom to pak zapsali nějak takto:

.custom {
 display: flex;
 margin: 1rem 0;

 &__child {
   @include font-size(22);
   color: $black;

   p {
     margin: 0;
   }
 }
}

Specifikum modifikátoru

Tímto stylem si definujeme základní nastavení pro modifikátor a také pro jeho child. Co když ale budeme chtít přidat k modifikátoru nějaké specifikum, například barvu pozadí a rozdílnou barvu textu pro child? To bychom běžně udělali následovně:

<div class="custom">
   <div class="custom__child">
       <p>Toto je jen ukázka</p>
   </div>
</div>

<div class="custom custom--black">
   <div class="custom__child">
       <p>Ukázka s černým pozadím</p>
   </div>
</div>

.custom {
 display: flex;
 margin: 1rem 0;

 &__child {
   @include font-size(22);
   color: $black;

   p {
     margin: 0;
   }
 }

 /* Black background */
 &--black {
   background: $black;

   .custom__child {
     color: $white;
   }
 }
}

Custom variable

Na příkladu vidíte, že využívám zanoření a ampersand (&). Ale v modifikátoru, kde upravuju barvu pozadí, už nemůžeme využít zanoření u child elementu, protože bychom dostali třídu ve stylu .custom--black__child. Což nechceme, protože se tato třída nikde jinde nevyskytuje a výsledné CSS by mělo o chlup větší velikost, než je třeba. Jak tedy tento problém vyřešit? Definujeme si custom variable v modifikátoru a ten pak šikovně využijeme:

.custom {
 $def: &;
 display: flex;
 margin: 1rem 0;

 &__child {
   @include font-size(22);
   color: $black;

   p {
     margin: 0;
   }
 }

 /* Black background */
 &--black {
   background: $black;

   #{$def}__child {
     color: $white;
   }
 }
}

Variable $def

Použili jsme variable $def (můžete využít libovolný název) a k němu přiřadili již zmiňovaný ampersand (&). Výsledkem je, že po kompilaci bude styl vypadat jako .custom__child u specifického modifikátoru .custom--black. Tento variable jsme schopni využít u prvků zanořených libovolně hluboko a vždy nám bude odkazovat na náš výchozí modifikátor, u kterého jsme si variable určili. Díky tomu můžeme kontrolovat kód, i když jsme zanořeni v modifikátoru nebo child elementu, a vždy dosáhneme požadovaného výsledku s ušetřením několika znaků navíc.

Chcete od nás web?