Jak CSS funguje
CSS pracuje na principu selektorů a deklarací. Selektor určuje, na které HTML elementy se styl aplikuje (všechny nadpisy h2, element s třídou .card, element s ID #header). Deklarace obsahuje vlastnost a hodnotu — například color: #FF6B35 nastaví barvu textu na oranžovou. Styly se mohou definovat inline (přímo v HTML), v hlavičce stránky nebo v externím CSS souboru — poslední varianta je nejčistější a umožňuje sdílení stylů napříč stránkami.
Responsivní design s CSS
Moderní CSS nabízí mocné nástroje pro responsivní design — vytváření webů, které vypadají skvěle na monitoru, tabletu i mobilu. Media queries umožňují aplikovat různé styly podle šířky obrazovky. Flexbox řeší jednorozměrné rozložení (řádek nebo sloupec), CSS Grid dvourozměrné layouty (řádky a sloupce současně). Container queries (novinka v CSS) umožňují stylovat podle velikosti rodičovského prvku, ne celé obrazovky. V Appitect navrhujeme vždy mobile-first.
CSS frameworky a preprocesory
Psaní čistého CSS pro velké projekty může být nepraktické, proto existují nástroje, které vývoj zefektivňují. Preprocesory jako Sass nebo Less přidávají proměnné, mixiny a vnořování. Frameworky jako Tailwind CSS (utility-first) nebo Bootstrap (komponentový) poskytují předpřipravené třídy. CSS-in-JS řešení jako styled-components umožňují psát styly přímo v JavaScriptu. My v Appitect používáme Tailwind CSS, který považujeme za optimální mix rychlosti vývoje a flexibility.
CSS a výkon webu
CSS přímo ovlivňuje rychlost načtení stránky a Core Web Vitals. Velký CSS soubor zpomaluje vykreslení, protože prohlížeč musí zpracovat všechny styly před zobrazením obsahu. Proto je důležité minimalizovat CSS, odstranit nepoužívané styly (tree-shaking v Tailwindu) a kritické CSS vložit inline do hlavičky. Animace je lepší provádět přes transform a opacity, které prohlížeč zvládne efektivně přes GPU, než měnit rozměry nebo pozice elementů.
Praktický příklad
Když otevřete web na mobilu a navigace se změní na hamburger menu, to je CSS media query. Když produkty v katalogu automaticky přeskládají ze 4 sloupců na 2 podle šířky obrazovky, to je CSS Grid. Když se tlačítko plynule změní z oranžového na tmavě oranžové při najetí myší, to je CSS transition. Když se celý web přepne do tmavého režimu jedním kliknutím, to jsou CSS custom properties (proměnné).