CSS preprocesory

Při použití klasického CSS, na vetších webových projektech, je budování funkcí opětovného použití nebo dědictví elementů velmi těžce dosažitelné, nastává pak problém s jejich údržbou a spravovatelností. HTML a CSS jde stále dopředu a neustále jsou zaváděny nové a nové specifikace a vylepšení funkcí, výrobci prohlížečů se tyto nové funkce, které ještě nejsou oficiálně podporované zavádí do svých prohlížečů a mnohdy musí přidat vlastní předpony (prefixy) před nové vlastnosti CSS (například v pozadí gradientu). Kódování těchto tzv. prefixových vlastností se pomalu stáva velkou příteží. (Aktuálně by mělo být CSS 3 plně podporováno dnes běžně používanými prohlížeči).

Aby bylo možné psát lepší CSS, existují různé přístupy a různé pracovní postupy, jako je oddělování definic do menších, parciálních, souborů a jejich import do jednoho, hlavního souboru. Tento přístup pomohl vypořádat se s komponenty, ale nebylo vyřešeno opakování stejných elementů resp. vlastností a problémy s udržitelností. Jiný přístup bylo možnost implementovat objektově orientované CSS. V tomto případě, použití jedné nastylované třídy pro více různých prvků, kód se ale stává méně udržovatelný.

CSS preprocesory, s jejich pokročilými funkcemi, přispělo k dosažení snadného psaní opakovatelného kódu, udržovatelnosti a rozšířeních v CSS. Pomocí těchto nástrojů můžete snadno zvýšit produktivitu a snížit množství kódu, který obsahuje Váš webový projekt.

Ukázka kódu v CSS:

.container {
  background: green;
}
.container .button {
  color: black;
}
.container .button span {
  text-align: center;
}
					

Ten stejný zápis, ale pomocí preprocesoru:

.container {
  background: green;

  .button {
    color: black;

    span {
      text-align: center;
    }

  }

}

Okamžitě zápis vypadá lépe a více čitelně, protože .container nemusíme třikrát kopírovat. Naopak musíme přemýšlet dopředu, pokud bychom chtěli použít .button mimo třídu .container, nebude nám tento styl fungovat. I na tuto otázku mají preprocesory odpověď.

.container2 {
  .btn {
    .container.button; // všechny styly se přesunou z .container.button
  }
}
					

Podívejte se na další pratické příklady zde.

Provedl jsem srovnání co nejvíce preprocesorů, které jsem nalezl a dosadil je do tabulky, tu můžete najít v sekci výběr preprocesoru.

• Vaše CSS bude DRY (suché) - DRY (Don't repeat yourself), to znamená neopakujte se. Neopakujte se je základní princip programování.
• Méně psaní kódu = více ušetřeného času celkově
• Správa stylopisů je mnohem jednoduší - Při použití proměnných, které všechny preprocesory obsahují, můžete napřiklad velikost fontu nebo barvu, změnit na jednom místě v souboru a změna se projeví ve všech parciálních.
• Zdrojové soubory stylopisu jsou lépe organizované
• CSS frameworky jsou z 90% psané pomocí preprocesorů - Pokud zvažujete využití některého z open-source frameworků, např. pro responsivitu webu. Není nic jednodušího než si jej předělat podle vlastních představ, pomocí CSS preprocesorů.
• Instalace a použití je velmi snadné