Co je HTML a CSS: pevné základy webu
HTML (HyperText Markup Language) definuje strukturu a význam obsahu webové stránky pomocí sémantických značek (např. <article>, <nav>, <header>). CSS (Cascading Style Sheets) určuje prezentaci tohoto obsahu – barvy, rozvržení, typografii, animace a responsivní chování. Společně tvoří oddělení obsahu a prezentace, což zvyšuje udržovatelnost, přístupnost i výkon.
Sémantická struktura HTML: od kostry k významu
- Hlavní bloky:
<header>,<main>,<footer>,<section>,<article>,<aside>zlepšují čitelnost pro čtečky obrazovky a SEO. - Navigace:
<nav>pro primární i sekundární menu; používejte popisné texty odkazů (např. „O nás“ místo „Klikněte zde“). - Titulky a hierarchie: udržujte logickou posloupnost nadpisů
<h2>…<h6>v rámci sekcí; každý dokument má mít jeden hlavní účel a jasnou strukturu. - Obrázky a média:
<img alt="popis">s výstižným alternativním textem; pro složitější popisy využijte<figure>a<figcaption>. - Formuláře: vždy párujte
<label for>a<input id>; používejte nativní typy (email,tel,date) pro lepší UX a validaci.
Metadata, SEO a hlavička dokumentu
- Jazyk a kódování:
<html lang="cs">,<meta charset="utf-8">. - Viewport a responsivita:
<meta name="viewport" content="width=device-width, initial-scale=1">. - Popisky:
<title>a<meta name="description">s jasným sdělením; otevřené grafy (og:) a Twitter karty pro sdílení. - Strukturovaná data: JSON-LD (schema.org) pro zvýraznění v SERP (události, produkty, články).
- Kanoničnost a indexace:
<link rel="canonical">, direktivyrobots, kvalitní interní prolinkování.
Kaskáda v CSS: pořadí, dědičnost a specificita
- Pořadí zdrojů: později načtená pravidla přepisují dřívější (pokud je specificita shodná).
- Dědičnost: vlastnosti jako
colorafont-familyse dědí; rozvržení (např.margin) typicky nikoli. - Specificita: inline styly > ID selektory > class/atribut/pseudo-třídy > tag selektory; používejte co nejnižší specificitu pro snadné přepisování.
- !important: nouzový nástroj, který komplikuje údržbu; preferujte refaktor pravidel a architekturu stylů.
Selektory a pseudo-třídy: přesné cílení bez přestřelů
- Základ: typové selektory (
p), třídy (.btn), ID (#app), potomci a sourozenci (.card > h2,+ / ~). - Atributové selektory: např.
a[href^="https"],input[type="search"]pro cílení bez extra tříd. - Pseudo-třídy UI:
:hover,:focus,:focus-visible,:disabled,:checkedzlepšují použitelnost. - Strukturální pseudo-třídy:
:first-child,:last-of-type,:nth-child()pro tabulky a seznamy. - Pseudo-prvky:
::before,::after,::markerk dekoracím bez zbytečného HTML.
Box model a typografie: základní stavebnice vzhledu
- Box model: obsah → výplň (
padding) → okraj (border) → mezera (margin). Nastavtebox-sizing: border-boxpro předvídatelné počítání. - Typografie: škálujte promyšleně (
clamp()pro fluidní velikosti), line-height 1.4–1.8 dle fontu, kontrast a délku řádku kolem 60–80 znaků. - Webové fonty:
font-display: swappro zamezení FOIT; zvažte proměnné fonty (variable fonts) pro menší počet souborů.
Moderní layout: Flexbox a CSS Grid
- Flexbox: jednorozměrné rozvržení (osy, centrování, mezery přes
gap), ideální pro řádky karet, navigace a formy. - CSS Grid: dvourozměrné mřížky, pojmenované oblasti,
minmax(),auto-fit/auto-fillpro responsivní šablony bez media dotazů. - Subgrid: konsistentní zarovnání vnořených prvků napříč složitými komponentami.
- Mezery: preferujte
gappřed margin „hřebínky“ pro jednodušší údržbu.
Responsivní design: media a container queries
- Media queries: rozvržení a typografie pro různé šířky; pracujte mobile-first (
@media (min-width: ...)). - Container queries: stylujte komponenty dle šířky jejich kontejneru, nikoli okna; zvyšuje modularitu a reusabilitu.
- Fluidní jednotky:
rem,vw,ch; funkceclamp(min, pref, max)pro plynulé škálování. - Preferované režimy: respektujte
prefers-color-scheme(světlý/tmavý) aprefers-reduced-motionpro dostupnost.
Proměnné CSS a kaskádové vrstvy
- Custom properties:
--color-primary,--space-2umožňují témata, dark mode a konzistentní designový systém. - Kaskádové vrstvy (
@layer): definujte pořadí (např.@layer reset, base, components, utilities;) a minimalizujte konflikty. - Počítané hodnoty:
calc(),min(),max()pro adaptivní rozměry bez zbytečných breakpointů.
Animace a interakce bez JavaScriptu
- Přechody:
transition: property duration timing-functionpro jemné změny stavu. - Klíčové snímky:
@keyframespro složitější pohyby; dbejte natransformaopacitykvůli výkonu. - Akcent na přístupnost: nabízejte redukované pohyby a nikdy nespoléhejte na animaci k přenosu zásadní informace.
Přístupnost (a11y) a ARIA v praxi
- Sémantika na prvním místě: nativní elementy před rolemi ARIA; ARIA „doplňuje“, nenahrazuje HTML.
- Fokus a klávesnice:
:focus-visible, logická posloupnost, viditelné obrysy; neodstraňujte outline bez náhrady. - Kontrast a barvy: dodržujte minimální kontrast; nepřenášejte informaci pouze barvou.
- Živý obsah: používejte
aria-livepro dynamické zprávy a validace formulářů.
Architektura stylů: škálovatelnost a údržba
- Metodiky: BEM (
.blok__prvek--modifikator), ITCSS (vrstvení od resetu po utility), OOCSS pro znovupoužitelnost. - Modularita: komponentové styly na úrovni UI prvků; minimalizujte globální selektory.
- Design tokens: zdroj pravdy pro barvy, mezery, radiusy, stíny; sdílení napříč platformami.
Výkon a best practices
- Kritické CSS: inline pouze nezbytné styly pro první vykreslení; zbytek načtěte asynchronně.
- Minimalizace a deduplikace: odstraňte nepoužité CSS (např. během build procesu); preferujte menší specifitu a kratší kaskádu.
- Obrázky: moderní formáty (AVIF/WebP), atributy
width/height,loading="lazy",decoding="async". - Reflow a repainty: optimalizujte layout změny přes
transform, vyhýbejte se nákladným vlastnostem (např.box-shadowve velkém rozsahu).
Kompatibilita a progresivní vylepšení
- Prohlížečová podpora: používejte
@supports()pro podmíněné styly a fallbacky. - Autoprefixer a PostCSS: generuje vendor prefixy dle cílových prohlížečů; snižuje technický dluh.
- Progresivní vylepšení: základní UX funguje všude, pokročilé efekty se aktivují tam, kde jsou podporovány.
Formuláře, validace a UX detail
- Typy vstupů:
email,number,range,datezlepšují nápovědu i klávesnice na mobilech. - Stavy polí: styly pro
:focus,:valid,:invalid,:disableda chybové zprávy zvyšují srozumitelnost. - Velikost klikacích ploch: min. ~44×44 px pro dotyk; zarovnejte label klikací na celý řádek.
Bezpečnost HTML/CSS na úrovni šablon
- Sanitace vstupů: nikdy nevkládejte neověřený HTML string do DOM; vyhnete se XSS.
- Content Security Policy (CSP): omezte zdroje stylů a skriptů; preferujte nonce/hashy namísto inline.
- Atributy bezpečných odkazů:
rel="noopener noreferrer"protarget="_blank".
Nástroje, workflow a automatizace
- Build pipeline: PostCSS, Autoprefixer, minifikace, extrakce kritického CSS.
- Linting a stylové konvence: Stylelint, Prettier; společná pravidla pro konzistentní kód.
- Design systémy: dokumentace komponent, živé náhledy, katalogizace vzorů.
- Verzování a CI/CD: kontrola regrese stylů (vizuální testy), kontrola velikosti bundlů.
Mezinárodní prostředí a lokalizace
- Směr psaní: podpora LTR/RTL pomocí
dira logických vlastností (margin-inline,padding-block). - Jednotky a formáty: místní formát data/času a čísel; dostatečný prostor pro delší řetězce v jiných jazycích.
Checklist před nasazením
- Validní HTML, sémantika, alt texty a titulky sekcí.
- Dostatečný kontrast, fokusovatelnost, klávesová navigace.
- Kritické CSS inline, zbytek odloženě; minifikace a deduplikace.
- Responsivní chování ověřené na škále šířek a zařízeních.
- Bezpečnost odkazů, CSP, bez inline stylů tam, kde to politika vyžaduje.
- Automatické testy stylů a vizuální regrese v CI.
Závěr: udržitelný web jako cíl
Kombinace sémantického HTML a disciplinovaného CSS vytváří weby, které jsou přístupné, rychlé, škálovatelné a snadno udržovatelné. Důraz na kaskádu, nízkou specificitu, proměnné a moderní layouty (Flexbox, Grid, container queries) umožňuje stavět robustní komponenty, jež se bezbolestně vyvíjejí. Když tyto principy spojíte s automatizovaným workflow a pečlivým testováním, vzniká dlouhodobě udržitelná front-endová základna.
