V kontextu informačních technologií a webového vývoje označuje termín Vanilla CSS použití čistého jazyka Cascading Style Sheets (kaskádové styly) bez jakýchkoliv externích knihoven, frameworků (jako Bootstrap či Tailwind) nebo preprocesorů (jako Sass či Less).

Slovo „vanilla“ (vanilkový) se v IT komunitě používá k popisu základní, neupravené verze softwaru nebo programovacího jazyka – podobně jako je vanilková zmrzlina považována za základní standard bez příchutí.

Vanilla CSS znamená psaní stylů přímo v souborech s příponou .css, které prohlížeč interpretuje nativně. Programátor definuje vzhled prvků pomocí:

• Selektorů (class, id, elementy),
• Vlastností (color, margin, display),
• Hodnot (16px, flex, #ffffff).

V minulosti bylo Vanilla CSS vnímáno jako těžkopádné, ale s nástupem moderních standardů (CSS3 a novější) získalo schopnosti, které dříve nabízely pouze složité nástroje.

Nepotřebujete instalovat Node.js, npm, ani konfigurovat kompilátory. Kód, který napíšete, je okamžitě připraven k použití v prohlížeči.

Prohlížeč nemusí stahovat velké knihovny (často stovky KB), které obsahují tisíce řádků kódu, z nichž využijete jen zlomek. Výsledkem je rychlejší vykreslování stránky a lepší skóre v metrikách jako Google PageSpeed Insights.

Dnešní Vanilla CSS už není „chudý příbuzný“. Díky funkcím jako:

• CSS Variables (proměnné přímo v prohlížeči),
• CSS Grid a Flexbox (pokročilé rozvržení),
• Calc() (matematické operace),

…je psaní čistého kódu stejně efektivní jako v preprocesorech.

Když v Inspektoru prohlížeče vidíte chybu, přesně víte, ve kterém řádku vašeho souboru se nachází. Neexistuje žádný „vygenerovaný“ kód, který by byl nečitelný.

Přes své výhody má Vanilla CSS i slabé stránky, zejména u obřích projektů:

• Duplicita kódu: Bez preprocesorů může být těžší dodržet princip DRY (Don't Repeat Yourself), i když proměnné tento problém částečně řeší.
• Chybějící nesting: (Ačkoliv se již do prohlížečů dostává nativní podpora vnořování), tradiční Vanilla CSS neumožňuje vnořování selektorů do sebe, což může vést k dlouhým názvům tříd.
• Udržovatelnost: U projektů s tisíci řádky kódu může být správa jednoho obřího CSS souboru nepřehledná, pokud se nepoužije striktní metodika (např. BEM).

Vanilla CSS zažívá v posledních letech renesanci. Díky tomu, že moderní prohlížeče (Chrome, Firefox, Safari, Edge) implementují nové standardy velmi rychle, potřeba berliček v podobě frameworků klesá. Je ideální volbou pro:

• Menší a střední weby,
• Projekty, kde je prioritou rychlost načítání,
• Vývojáře, kteří chtějí mít plnou kontrolu nad každým pixelem.

Tip: I když používáte Vanilla CSS, doporučuje se dodržovat metodiky jako BEM (Block Element Modifier), aby váš kód zůstal čitelný i po letech vývoje.