„Borci, ta AI je blbá jak troky. Jsem to zkoušel a nikdy mi z ní nevypadl použitelný kus kódu!“. Tento názor na použitelnost ChatGPT a dalších AI ...

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:
<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;
}
}
}
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;
}
}
}
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;
}
}
}
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.
„Borci, ta AI je blbá jak troky. Jsem to zkoušel a nikdy mi z ní nevypadl použitelný kus kódu!“. Tento názor na použitelnost ChatGPT a dalších AI ...
Minulý týden jsme si odskočili na konferenci Adform Prague summit věnované digitální reklamě. Dopolednímu bloku přednášek dominovalo ožehavé téma ...
Čas od času mi zavolá nějaký kamarád, který ví, že jsem část mládí strávil na brněnské hvězdárně, s dotazem, zdali bude večer vidět Měsíc, Venuše ...