====== Vanilla CSS v IT: Návrat ke kořenům webového designu ======

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

===== Hlavní charakteristika =====

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.

===== Proč používat Vanilla CSS? (Výhody) =====

==== 1. Žádná závislost na nástrojích (Zero Dependencies) ====
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.

==== 2. Maximální výkon a rychlost ====
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.

==== 3. Moderní funkce (CSS Variables & Grid) ====
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.

==== 4. Snadné ladění (Debugging) ====
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ý.

===== Nevýhody a výzvy =====

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

===== Srovnání: Vanilla vs. Frameworky =====

| Vlastnost | Vanilla CSS | CSS Framework (Tailwind/Bootstrap) |
| Rychlost učení | Nutná znalost základů | Nutná znalost syntaxe frameworku |
| Velikost souboru | Minimální | Často větší (pokud se nečistí) |
| Flexibilita | Neomezená | Omezená designovým systémem |
| Rychlost vývoje | Pomalejší start | Velmi rychlá u prototypů |

===== Závěr =====

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.