Úloha 5 – Refaktoring a optimalizace CSS pravidel

Úvod k úloze

Umět napsat funkční CSS je důležité, ale teprve práce s přehledností a udržitelností kódu odlišuje začátečníka od pokročilého tvůrce webů. Stylopis se časem rozrůstá – ze začátku jde o pár řádků, ale ve větším projektu to mohou být stovky či tisíce řádků. Proto je potřeba psát CSS tak, aby bylo čitelné, efektivní a snadno rozšiřitelné. Správná organizace kódu šetří čas, předchází chybám a umožňuje spolupráci v týmu.

Teorie a principy

Redundance a seskupování selektorů
- Pokud se opakují stejné deklarace u více selektorů, je lepší je spojit:
Zkrácené zápisy (shorthands)
- Místo čtyř vlastností pro margin lze psát:
  
  což znamená 10px nahoře a dole, 20px vlevo a vpravo.
- Podobně fungují padding, border, background, font.
CSS proměnné (custom properties)
- Umožňují definovat opakovaně používané hodnoty:
Formátování a komentáře
- Dodržujte odsazování a jednotný styl zápisu.
- Komentáře /* ... */ používejte k oddělení sekcí nebo vysvětlení záměrů.
Zápisové konvence
- Používejte smysluplné názvy tříd (.tlacitko-primarni místo .cervene).
- Udržujte konzistentní jednotky (např. všude px nebo rem).
- Vyhněte se nadbytečným pravidlům – prohlížeč zbytečně zpracovává kód.

Praktický příklad

Původní (neefektivní) kód

Upravený (optimalizovaný) kód

Ukázka s proměnnými

Typické chyby / záludnosti

Opakování stejných pravidel pro více prvků místo jejich seskupení.
Ignorování shorthand zápisu → zbytečně dlouhý a nepřehledný kód.
Nepoužívání proměnných – když se barva nebo velikost změní, musíte přepisovat desítky řádků.
Chaotické pojmenování tříd – vede k nejasnému kódu.
Chybějící komentáře – u větších projektů se bez nich snadno ztratíte.

Shrnutí

Udržitelné CSS je čisté, stručné a konzistentní.
Redundantní deklarace nahrazujte seskupenými selektory.
Využívejte shorthand zápisy (margin, padding, border, font).
Proměnné (--nazev) usnadňují sjednocení vzhledu a úpravy.
Dbejte na formátování, komentáře a smysluplné názvy tříd.