Jan Mikoláš
Slovník pojmů
CSS
CSS rozhoduje, jak se HTML zobrazí v různých kontextech. Jeho cascade dovoluje kombinovat více pravidel, ale bez jasných hranic může stejný mechanismus vytvořit křehké a těžko vysvětlitelné rozhraní.
Stručná definice
Pravidla CSS přiřazují vlastnosti prvkům dokumentu.
CSS pravidlo tvoří selektor a deklarace vlastností. Selektor určí, na které HTML elementy pravidlo míří, deklarace nastaví například color, display, gap nebo font-size. Prohlížeč pak vyhodnotí cascade, specificitu, pořadí pravidel, dědičnost a dostupný prostor, aby určil výsledný styl.
Název Cascading Style Sheets připomíná, že na jeden prvek může působit více stylů. Nejde o pořadí souborů bez dalších pravidel: rozhoduje také původ stylu, důležitost, specificity a inheritance. CSS proto není jen „barva a mezera“, ale samostatný systém pro layout a prezentaci HTML.
K čemu se používá
Vizuální hierarchie, layout a přizpůsobení displeji
CSS spojuje obsah webu s konkrétní vizuální podobou bez nutnosti měnit jeho HTML význam.
- typografie, barvy, mezery a vizuální hierarchie produktového detailu
- Flexbox a Grid pro karty, navigaci, filtr katalogu a administrační přehledy
- media queries pro mobilní zobrazení, širší panel a tisk
- hover, focus-visible a disabled stavy interaktivních ovládacích prvků
- světlé a tmavé téma nebo sdílené design tokeny v komponentovém rozhraní
Praktický příklad
Responzivní karta produktu bez změny HTML významu
Stejný článek produktu může být ve dvou sloupcích na široké obrazovce a v jednom na mobilu. CSS mění layout, nikoli roli nadpisu, cenu nebo tlačítka. Použití minmax brání nechtěnému přetečení dlouhého obsahu a media query přizpůsobí počet sloupců podle dostupného místa.
Focus-visible je samostatný stav. Hover neexistuje na každém zařízení a nesmí být jediný nosič informace nebo akce. Kontrast se posuzuje mezi skutečně vykresleným textem, ikonou či focusem a jejich pozadím.
CSS
.product-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
@media (max-width: 40rem) {
.product-grid { grid-template-columns: 1fr; }
}Jak funguje
Od HTML elementu k výslednému layoutu
Výsledná podoba nevzniká z jednoho pravidla, ale z vyhodnocení všech relevantních stylů a velikosti kontejneru.
- HTML vytvoří strukturu Elementy, třídy, atributy a jejich strom dávají CSS prvkům, na které lze cílit.
- Selektor najde prvky Například .product-grid vybírá konkrétní komponentu; příliš obecný selektor zasáhne více míst, než návrh zamýšlel.
- Cascade vybere deklaraci Při konfliktu prohlížeč zohlední původ, důležitost, vrstvu, specificitu a pořadí pravidel.
- Layout vypočte prostor Box model, Flexbox nebo Grid rozdělí dostupnou šířku a výšku mezi potomky podle jejich pravidel.
- Media a uživatelovy preference Podmínky mohou upravit styl podle viewportu, tisku nebo preferencí; obsah a ovládání zůstávají stejné.
Důležité pojmy a synonyma
Stylesheet, pravidlo a cascade mají přesný význam.
„Stylesheet“ je soubor či sada CSS pravidel; pojmy Flexbox a Grid jsou layoutové mechanismy, ne celé náhrady CSS.
Selektor a specificita
Selektor určuje cílové elementy. Specificita pomáhá řešit konflikt pravidel, ale dlouhé řetězce selektorů a !important obvykle zhoršují údržbu.
Cascade a dědičnost
Cascade vybírá vítězící deklaraci. Některé vlastnosti, například color nebo font-family, se mohou dědit; jiné, například margin, nikoli.
Box model
Obsah, padding, border a margin určují skutečný prostor prvku. Neporozumění box modelu často vytváří zdánlivě nevysvětlitelné přetečení.
Flexbox a Grid
Flexbox se hodí pro rozložení v jedné ose, Grid pro řádky i sloupce. Správný výběr vychází z potřebného layoutu, ne z oblíbenosti nástroje.
Custom properties
CSS proměnné, například --color-accent, podporují sdílené tokeny. Nejsou totéž co proměnné preprocesoru a jejich hodnota se může dědit.
Vztah k ostatním technologiím
Vzhled nemá nést význam ani bezpečnostní rozhodnutí.
Při oddělení vrstev lze redesignovat rozhraní bez rozbití obsahu a serverové ochrany.
- HTML
- Vyjadřuje, co prvek je. CSS určuje, jak vypadá, ne zda je odkaz bezpečně dostupný nebo akce povolená.
- JavaScript
- Přepíná stav komponenty či načítá data. Konec animace nebo skrytý obsah nesmí ztratit klávesový focus.
- Frontend framework
- Komponenta může CSS organizovat, ale nezruší pravidla cascade, responzivity a kontrastu.
- CSP
- Politika může omezovat, odkud stránka načítá styl. Zdroje a nonce je nutné navrhovat společně s bezpečností aplikace.
Výhody a omezení
Silná prezentace potřebuje jednoduchá a předvídatelná pravidla.
Přínosy
- změna vzhledu bez zásahu do HTML obsahu
- responzivní layout pro různé velikosti displeje
- sdílené komponenty a design tokeny napříč rozhraním
- stavy focus a kontrast podporující ovládání klávesnicí
Rizika a časté chyby
- !important jako trvalá náhrada za nejasnou cascade
- layout založený na pevných šířkách, který na mobilu přetéká
- informace dostupná jen při hoveru nebo jen barvou
- globální selektor, který nečekaně rozbije jinou komponentu
- vizuální přeuspořádání, které vytvoří matoucí pořadí pro klávesnici či čtečku
Kdy volit jednodušší řešení
Rozvržení navrhovat podle obsahu a skutečných šířek.
Malý web často vystačí s přehlednými třídami, custom properties a několika layoutovými pravidly. V rozsáhlejší administraci pomůže pojmenovaný design systém, izolace komponent a společná pravidla pro spacing, barvy a stavy. Cílem není maximalizovat počet utility tříd či abstrahovat každou hodnotu, ale udržet konzistentní a změnitelný výstup.
Responzivita není jen breakpoint pro telefon. Je vhodné ověřovat dlouhé překlady, zvětšený text, chybový stav formuláře, prázdný seznam i skutečný obsah produktů. CSS neumí napravit špatný textový kontrast, pokud návrh vybere nevhodné barvy; to je potřeba testovat v konkrétním rozhraní.
Na co myslet
Vyhnout se křehkému CSS dříve, než začne vznikat.
Pravidla mají mít jasný rozsah, odolný layout a přístupné interaktivní stavy.
- držet selektory blízko konkrétní komponenty a neeskalovat specificitu bez důvodu
- pro layout používat Flexbox či Grid místo ručních posunů a pevných rozměrů
- testovat mobil, dlouhý obsah, zvětšení textu a horizontální přetečení
- zajistit kontrast, viditelný focus a stav disabled; hover není jediný mechanismus
- před použitím !important nejdřív pochopit, odkud konflikt cascade vzniká
Časté otázky
CSS v praxi
Jaký je rozdíl mezi CSS a HTML?
HTML popisuje strukturu a význam obsahu. CSS určuje jeho prezentaci, například typografii, barvy, rozvržení a responzivní chování.
Kdy použít Flexbox a kdy Grid?
Flexbox je často přirozený pro jednu osu, třeba řádek navigace. Grid se hodí pro vztahy řádků a sloupců, například katalog karet. Záleží na layoutu.
Je !important správná oprava konfliktu?
Jen výjimečně. Obvykle zakryje příčinu v rozsahu selektoru nebo cascade a ztíží další změnu. Lepší je pravidla a jejich pořadí zpřehlednit.
Řeší responzivita jen mobil?
Ne. Reaguje na dostupný prostor a ověřuje také zvětšený text, dlouhý obsah, orientaci a různé způsoby ovládání.
Jak stavím webové rozhraní v praxi
Vzhled propojuji s přístupnou strukturou a reálným obsahem.
U e-commerce a aplikačních rozhraní řeším responzivní layout, interaktivní stavy i to, aby frontend správně navazoval na backendová data.