Letos musíme v Cognitu naši tradiční listopadovou husu spojenou se šifrovačkou oželet, tak jsme připravili svatomartinské menu alespoň pro vás. Na...

14. 3. 2018Technologie
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í. 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: Tento kód nám definuje modifikátor a jeho child. Ve stylech bychom to pak zapsali nějak takto: 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ě: 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: 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. Letos musíme v Cognitu naši tradiční listopadovou husu spojenou se šifrovačkou oželet, tak jsme připravili svatomartinské menu alespoň pro vás. Na... Jsme tu s další náloží novinek od nás z Cognita. Tentokrát se dozvíte, jak udělat z vašeho města lepší místo pro život, pozveme vás do našeho krea... Webové aplikace vyvíjíme již více než 12 let. Naše práce už dávno není jen o programování. Navrhujeme také design produktů, obchodní modely i mark...BEM (Block Element Modifier) a preprocesor SASS
<div class="custom">
<div class="custom__child">
<p>Toto je jen ukázka</p>
</div>
</div>
.custom {
display: flex;
margin: 1rem 0;
&__child {
@include font-size(22);
color: $black;
p {
margin: 0;
}
}
}
Specifikum modifikátoru
<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
.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
Co si dále přečíst