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

Technologie Ondřej Jonáš

Vyhněte se takzvanému „špageta“ kódu. Prozradím vám, jak díky BEM a SASS udržet kód přehledný a čitelný i v případě, že používáte u modifikátoru mnohočetné zanořování.

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?

Co si dále přečíst

Je třeba zabít Google?Je třeba zabít Google?
Je třeba zabít Google?

Začátkem minulého týdne upozornil server borovan.cz na fakt, že společnost Google v České republice odvedla na daních z příjmu pouze 8,2 milionů k...

Technologie

Cognito.cz, s.r.o.