CSS: Styly a rozvržení stránky pomocí moderních vlastností

Proč rozumět stylům CSS a rozvržení

Cascading Style Sheets (CSS) jsou jazykem pro popis vzhledu a rozvržení dokumentů HTML. Moderní CSS zahrnuje vše od typografie a barevných schémat přes responzivní layouty s Flexboxem a Gridem až po témata, jako jsou proměnné, vrstvy kaskády, container queries a výkon. Cílem je navrhovat odolná, přístupná a udržovatelná rozhraní pro různá zařízení a kontexty.

Kaskáda, dědičnost a specifita

Kaskáda určuje, které deklarace se uplatní, když stylují tentýž prvek. Rozhoduje pořadí původu (autor > uživatel > UA), specifita selektoru a jeho pozdější výskyt v souboru. Dědičnost přenáší určité vlastnosti (např. font-family, color) z rodiče na potomka.

Specifita: id > třída/atribut/pseudotřída > tag/pseudoelement. Příklad: #hero .btn.primary má přednost před .btn.
!important používejte výjimečně; narušuje předvídatelnost kaskády.
Proměnné (Custom Properties) se dědí: --brand-hue lze nastavit na :root a lokálně přepsat.

Vrstvy kaskády a rozsah stylů

@layer umožňuje deterministicky určit pořadí vrstev (např. reset → base → components → utilities). @scope (tam, kde je podporováno) vymezuje platnost stylů uvnitř konkrétního podstromu, aniž by bylo nutné používat složité selektory.

Příklad vrstvení: @layer reset, base, components, utilities; a následně definice v jednotlivých vrstvách.

Box model a tok dokumentu

Každý prvek je obdélník se složkami content, padding, border a margin. Při použití box-sizing: border-box zahrnuje šířka/výška vnitřní odsazení a rámeček, což zjednodušuje výpočty. Normální tok (flow) určuje, jak se prvky skládají bez explicitního pozicování.

Modely zobrazení: block, inline, inline-block, flow-root

display: block zabírá celou šířku; inline respektuje kontext textového řádku.
inline-block kombinuje řádkové chování s možností nastavení rozměrů.
flow-root vytváří nový block formatting context a izoluje kolaps okrajů či obtékání pomocí floatů.

Pozicování, vrstvení a kontexty

position: relative/absolute/fixed/sticky umožňuje přesné umístění. Stacking context vzniká například při použití position s z-index, opacity < 1 nebo transformace, což ovlivňuje překrývání prvků. Rozumné používání z-index vyžaduje znalost kontextů nadřazených prvků.

Floaty a jejich moderní náhrady

Historická rozvržení založená na float nahrazují Flexbox a Grid. Floaty používejte pro obtékání obrázků v textu, nikoli pro komplexní rozvržení.

Flexbox: jednorozměrné rozvržení

Flexbox je ideální pro uspořádání řádků/sloupců, zarovnání a rozdělení volného prostoru.

Kontejner: display: flex nebo inline-flex, směr flex-direction: row|column.
Zarovnání: justify-content (hlavní osa), align-items (příčná osa), gap (mezery bez hacků).
Růst/smršťování: flex: 1 1 0 rozděluje prostor rovnoměrně; flex-basis určuje výchozí velikost.
Responzivní řazení: order mění vizuální pořadí (pozor na pořadí ve stromu kvůli asistivním technologiím).

CSS Grid: dvourozměrné rozvržení

Grid řeší komplexní mřížky, zarovnání a roztažení v obou osách.

Definice: display: grid, grid-template-columns a grid-template-rows, gap.
Funkce: repeat(), minmax(), auto-fit/auto-fill pro pružné sloupce.
Vnitřní rozměry: min-content, max-content, fit-content().
Subgrid (tam, kde je k dispozici) umožňuje potomkům převzít mřížkové stopy rodiče a dosáhnout tak konzistentního zarovnání.

Responzivní design: media queries, container queries a logické vlastnosti

Media queries pro podmínky, jako jsou šířka, barevný gamut či preference uživatele (prefers-reduced-motion, prefers-color-scheme).
Container queries stylují komponentu podle rozměrů jejího kontejneru, nikoli viewportu, a podporují tak skutečně modulární design.
Logické vlastnosti (margin-inline, padding-block, inset-block-start) respektují směr psaní a usnadňují internacionalizaci.

Jednotky, typografie a měřítko

Relativní jednotky: em, rem, vw, vh, svh/lvh/dvh pro mobilní prohlížeče, ch pro typografii.
Funkce: calc(), min(), max(), clamp() pro plynulé nastavení typografie a rozměrů.
Řádkování a čitelnost: line-height bez jednotek, délka řádku 45–90 znaků, hyphens: auto pro dělení slov.

Barvy, témata a systém design tokens

Moderní barvy zahrnují rgb()/hsl() i rozšířené barevné prostory (v závislosti na podpoře). Témata lze řídit proměnnými na :root a přepínat například pomocí [data-theme="dark"].

Příklad proměnných: --bg: oklch(98% 0.02 95); --fg: oklch(20% 0.03 95);
Tmavý motiv: @media (prefers-color-scheme: dark) nebo atributy na kořenovém prvku.

Komponentový přístup a architektura CSS

Metodiky: BEM, ITCSS, SUIT pro škálovatelnost a čitelnost.
Policy-as-code pro styly: konvence pojmenování, předem definované vrstvy (@layer), linting a testy vizuální regrese.
Stavové třídy (.is-active, .is-invalid) místo křehkých kaskád.

Animace, přechody a pohyb

Vlastnosti transition a @keyframes používejte uvážlivě. Upřednostňujte transformace (transform, opacity) před vlastnostmi vyvolávajícími přepočet rozvržení (width, top). Respektujte @media (prefers-reduced-motion: reduce) a nabídněte alternativy.

Výkon a izolace rozvržení

Containment: contain: layout paint size; omezuje dopad změn na okolí.
Will-change používejte střídmě; vytváří vrstvy GPU a může zvýšit spotřebu paměti.
Snižte specifitu a délku selektorů; minimalizujte přepisování pravidel.
Mezery nastavujte pomocí gap místo hacků s okraji, abyste zjednodušili mřížky a snížili riziko kolapsu okrajů.

Přístupnost a sémantika

Styly vytvářejte s ohledem na sémantiku HTML; nepoužívejte CSS k simulaci prvků (např. falešná tlačítka na <div> bez role).
Kontrast barev a stavy fokusu: zajistěte viditelný fokus a nepřepisujte outline bez náhrady.
Nezaměňujte vizuální pořadí (order, grid-area) s logickým tokem; čtečky obrazovky sledují DOM.

Tisk, média a vícesloupcové rozvržení

Tisk: @media print, skrytí nepotřebných prvků, barvy a velikosti písma přizpůsobené tisku na papír.
Vícesloupcové rozvržení: columns/column-count/column-gap pro text ve stylu novin.

Práce s obrázky a rozměry

Poměr stran: aspect-ratio pro předvídatelné rozvržení bez skoků při načítání obsahu.
Responzivní obrázky: v HTML srcset a sizes, v CSS řízení vykreslení pomocí object-fit a object-position.

Formuláře a nativní ovládací prvky

Možnosti stylování formulářů jsou omezené, aby zůstaly dobře použitelné. Využijte appearance, accent-color a systémové color-scheme a dbejte na přístupnost (velikost klikací plochy, chybové stavy, popisky a instrukce).

Strategie rozvržení: kdy použít Flexbox a kdy Grid

Flexbox: navigace, panely nástrojů, jednorozměrné zarovnání, obsah s automatickou šířkou.
Grid: mřížky pro celé stránky, dashboardy, karty s pravidelnými stopami, přesné řazení v obou osách.
Kombinace: Grid pro hlavní kostru, uvnitř buněk Flexbox pro lokální zarovnání obsahu.

Modularita a škálování ve velkých projektech

Rozdělení do souborů podle vrstev (reset/base/components/utilities) a oblastí (layout/typography/forms).
Dokumentace design tokens a stylů (živé styleguidy), testy vizuální regrese.
U komponent zachovejte stabilní API tříd a proměnných; změny provádějte s verzováním.

Bezpečné fallbacky a progresivní vylepšování

@supports umožňuje použít nové techniky pouze tehdy, když je prohlížeč podporuje, a jinak ponechat fallback.
Nejprve navrhujte jednoduchá rozvržení (flow), která následně vylepšujte pomocí Gridu/Flexboxu a efektů.

Příklady základních vzorů rozvržení

Holy Grail Layout: Grid s oblastmi header, nav, main, aside, footer, adaptivními šířkami a minmax() pro postranní panely.
Responzivní galerie: grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)), plynulé zalamování karet.
Vertikální rytmus: konzistentní line-height, mezery nastavené pomocí gap a škálování pomocí clamp().

Časté chyby a jak se jim vyhnout

Přehnaná specifita a všudypřítomné !important místo úklidu kódu a správného uspořádání vrstev.
Pevně dané rozměry namísto pružných jednotek a funkcí min()/max()/clamp().
Vizuální pořadí odlišné od DOM bez odpovídajícího kontextu ARIA.
Nadužívání absolutního pozicování; raději využijte možnosti Flexboxu/Gridu a logické vlastnosti.

Závěr: principy udržitelného CSS

Úspěšný návrh stylů a rozvržení stojí na pochopení kaskády, promyšlené architektuře vrstev a využití moderních nástrojů pro rozvržení. Kombinace Gridu a Flexboxu, proměnných, container queries a logických vlastností umožňuje vytvářet modulární a odolná rozhraní. Důraz na přístupnost, výkon a testovatelnost zajistí, že styly budou dlouhodobě udržitelné a připravené na budoucí změny zařízení i obsahu.