News Cognito.CZ, s.r.o.

Show all articles

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

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:

Toto je jen ukázka

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

Toto je jen ukázka

Ukázka s černým pozadím

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

Next articles

Platby za daně z nemovitostí

Květen znamená pro většinu vlastníků pozemků povinnost uhradit daň z nemovitých věcí. Číst více

News CleverMaps, a.s.

Mindforge Group SE
Obsah chlorofylu vyhodnocený pomocí družicových dat

Přes nesporné výhody družice Sentinel 2 většina služeb využívající družicová data v precizním zemědělství pracuje s indexem NDVI. ...

News CleverMaps, a.s.

Mindforge Group SE