Ú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

1. Redundance a seskupování selektorů

   • Pokud se opakují stejné deklarace u více selektorů, je lepší je spojit:

2. 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.

3. CSS proměnné (custom properties)

   • Umožňují definovat opakovaně používané hodnoty:

      

4. 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ů.

5. 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.

Úloha

Zadání (kontext úlohy)

Analyzuj následující fragment CSS kódu a proveď jeho refaktoring:

Cíl úlohy

Procvičíš si schopnost identifikovat redundantní zápisy a přepsat kód tak, aby byl udržitelnější, přehlednější a snadněji spravovatelný.

Vstupní podmínky

• Obdržíš soubor styles.css s níže uvedeným duplicitním/nevhodně zapsaným CSS fragmentem a jednoduchý HTML dokument, který obsahuje prvky <h1>, <h2>, <p> a <div>.

• Nesmíš měnit HTML, upravuješ pouze CSS ve styles.css.

• K práci máš běžný editor kódu; validaci a náhled provedeš otevřením HTML v prohlížeči.

Požadovaný výstup

• Použiješ seskupené selektory (např. h1, h2, p { … }).

• Využiješ zkrácený zápis vlastností (např. margin: 10px;).

• Zachováš přehledné formátování a doplníš komentáře pro lepší čitelnost.

CSS fragment k úpravě

Soubory

Odkaz na css soubor
Odkaz na html soubor

Řešení úlohy

Co je zde splněno:

• Seskupené selektory (h1, h2, p) eliminují opakovaný zápis color: red;.

• Zkrácený zápis margin: 10px; je ekvivalentní k původním čtyřem řádkům.

• Čitelnost: jasné bloky s komentáři a konzistentní formátování usnadňují údržbu.