CSS rozvržení a styly

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

Cascading Style Sheets (CSS) jsou jazyk pro popis vzhledu a rozvržení dokumentů HTML. Moderní CSS pokrývá vše od typografie a barevných schémat přes responzivní layouty s Flexboxem a Gridem až po témata jako proměnné, vrstvy kaskády, container queries a performance. Cílem je navrhnout odolné, přístupné a udržovatelné rozhraní napříč zařízeními 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 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 porazí .btn.
• !important používat výjimečně; narušuje předvídatelnost kaskády.
• Proměnné (Custom Properties) dědí: --brand-hue může být nastaven na :root a přepsán lokálně.

Vrstvy kaskády a rozsah stylů

@layer umožňuje deterministické pořadí vrstev (např. reset → base → components → utilities). @scope (kde je podporováno) vymezuje platnost stylů uvnitř konkrétního subtree bez nutnosti složitých selektorů.

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

Box model a proudění dokumentu

Každý prvek je obdélník se složkami content, padding, border, margin. S box-sizing: border-box je šířka/výška včetně výplní a rámečku, což zjednodušuje výpočty. Normální tok (flow) řídí, jak se elementy skládají bez explicitního pozicování.

Displejové modely: block, inline, inline-block, flow-root

• display: block zabírá celou šířku; inline respektuje textový řádkový kontext.
• inline-block kombinuje řádkové chování s možností rozměrů.
• flow-root vytváří nový block formatting context a izoluje kolaps marginů či floaty.

Pozicování, vrstvení a kontexty

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

Floaty a jejich moderní náhrady

Historické float layouty nahrazují Flexbox a Grid. Floaty ponechte pro obtékání obrázků v textu, nikoliv pro komplexní rozvržení.

Flexbox: jednorozměrné rozvržení

Flexbox je ideální pro osiřazené řádky/sloupce, zarovnání a distribuci 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/kurz: 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 pro asistivní technologie).

CSS Grid: dvourozměrné rozvržení

Grid řeší komplexní mřížky, vyrovná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 fluidní sloupce.
• Intrinsické rozměry: min-content, max-content, fit-content().
• Subgrid (kde je k dispozici) umožňuje potomkům dědit stopu mřížky rodiče pro konzistentní zarovnání.

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

• Media queries pro podmínky jako šířka, barvový gamut či preference uživatele (prefers-reduced-motion, prefers-color-scheme).
• Container queries stylují komponentu podle rozměrů jejího kontejneru místo viewportu, což podporuje truly modular 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 plynulou typografii a rozměry.
• Řádkování a čitelnost: line-height bez jednotek, délka řádku 45–90 znaků, hyphens: auto pro zalamování.

Barvy, témata a systém design tokens

Moderní barvy zahrnují rgb()/hsl() i rozšířené barevné prostory (podle podpory). Témata lze řídit proměnnými na :root a přepínat např. [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řeni.

Komponentový přístup a architektura CSS

• Metodiky: BEM, ITCSS, SUIT pro škálovatelnost a čitelnost.
• Policy-as-code pro styly: konvence názvů, předem určené 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

S rozvahou používejte transition a @keyframes. Preferujte transformace (transform, opacity) nad vlastnostmi vyvolávajícími reflow (width, top). Respektujte @media (prefers-reduced-motion: reduce) a nabídněte alternativy.

Performance 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.
• Ukládejte mezery jako gap namísto margin hacků pro jednodušší mřížky a menší riziko kolapsů.

Přístupnost a sémantika

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

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

• Tisk: @media print, skrytí nepotřebných prvků, barvy a velikosti písma přizpůsobené papíru.
• Vícesloupcový layout: columns/column-count/column-gap pro textové novinové formáty.

Práce s obrázky a rozměry

• Poměr stran: aspect-ratio pro předvídatelný layout bez obsahových skoků.
• Responzivní obrázky: v HTML srcset a sizes, v CSS kontrola vykreslení přes object-fit a object-position.

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

Stylování formulářů je omezené pro zachování použitelnosti. Využijte appearance, accent-color, systémové color-scheme a respektujte přístupnost (rozsah klikací plochy, stavy chyb, popisky a instrukce).

Strategie layoutu: kdy použít Flexbox a kdy Grid

• Flexbox: navigace, toolbary, jednorozměrné zarovnání, auto-obsah.
• Grid: celostránkové mřížky, dashboardy, karty s pravidelnou stopou, 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), vizuální regresní testy.
• U komponent zachovejte stabilní API tříd a proměnných; změny dělejte verzovaně.

Bezpečné fallbacky a progresivní vylepšení

• @supports umožní aplikovat nové techniky pouze, když je prohlížeč podporuje, a ponechat fallback jinak.
• Navrhujte nejprve jednoduché layouty (flow), následně vylepšujte Grid/Flexboxem a efekty.

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

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

Časté chyby a jak se jim vyhnout

• Přehnaná specifita a všudypřítomné !important místo úklidu kódu a vrstev.
• Fixní rozměry místo fluidních jednotek a min()/max()/clamp().
• Vizuální pořadí odlišné od DOM bez adekvátního ARIA kontextu.
• Nadužívání absolutního pozicování; raději využijte sílu Flexboxu/Gridu a logických vlastností.

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 layout nástrojů. 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 zaručí, že styly budou dlouhodobě udržitelné a připravené na budoucí změny zařízení i obsahu.