Dobre praktyki: DRY, logiczne grupowanie treści

W tej lekcji skupimy się na konkretnych zasadach, które pozwalają pisać lepszy, bardziej skalowalny i łatwiejszy w utrzymaniu kod HTML. Na poziomie zaawansowanym liczy się nie tylko to, czy coś działa, ale jak zostało napisane. Dzięki dobrym praktykom możesz uniknąć bałaganu, duplikacji i problemów ze stylowaniem lub dostępnością.

Zasada DRY (Don’t Repeat Yourself)

Powielanie struktury HTML to częsty błąd, który szybko prowadzi do trudnego w utrzymaniu kodu. Zamiast pisać pięć razy ten sam blok kodu, warto oprzeć się na komponentach i klasach.

<!-- Źle: ten sam kod pisany ręcznie -->
<div class="box">Funkcja 1</div>
<div class="box">Funkcja 2</div>
<div class="box">Funkcja 3</div>

<!-- Dobrze: komponent "feature-box" -->
<section class="features">
  <article class="feature-box">Funkcja 1</article>
  <article class="feature-box">Funkcja 2</article>
  <article class="feature-box">Funkcja 3</article>
</section>

Dzięki wspólnej klasie feature-box możesz ustalić wspólny wygląd, animację, układ – bez potrzeby edycji każdego bloku osobno.

Logiczne grupowanie treści

Zamiast tworzyć „płaski” HTML, który jest trudny w odbiorze i utrzymaniu, grupuj elementy logicznie i semantycznie:

używaj <section> dla dużych bloków treści,
<article> dla jednostek samodzielnej treści (np. postów, kart),
<ul> i <ol> do list logicznych (nie tylko punktowania),
<header> i <footer> dla nagłówków sekcji i ich zakończeń,
<aside> dla treści pomocniczych (np. boczne panele, cytaty, przypisy).

Przykład logicznej, dobrze pogrupowanej struktury

<main>
  <section class="team">
    <header>
      <h2>Nasz zespół</h2>
      <p>Poznaj specjalistów, którzy tworzą naszą firmę.</p>
    </header>
    
    <ul class="team-list">
      <li class="team-member">
        <h3>Anna Kowalska</h3>
        <p>Front-end Developer</p>
      </li>
      <li class="team-member">
        <h3>Jan Nowak</h3>
        <p>UI Designer</p>
      </li>
    </ul>
  </section>
</main>

Ta struktura:

jest w pełni semantyczna,
jest łatwa do stylizacji i reużycia,
może być dynamicznie zasilana z CMS lub z JavaScript,
jest czytelna dla czytników ekranu.

Spójność klas i komponentów

Klasy powinny mieć spójne prefiksy i być przewidywalne. Zamiast:

<div class="blok1">
  <h2 class="naglowekX">Tytuł</h2>
</div>

lepiej używać:

<section class="section-title">
  <h2 class="section-heading">Tytuł</h2>
</section>

To podejście nie tylko ułatwia pracę Tobie, ale także każdemu, kto będzie czytać lub rozwijać Twój kod.

Dobre praktyki a dostępność

Zawsze używaj nagłówków w logicznej kolejności – np. <h2> po <h1>
Dodawaj atrybuty alt do obrazów
Formularze powinny mieć <label> powiązane z polem za pomocą for i id
Unikaj używania <br> do tworzenia odstępów – od tego jest CSS

🛠️ Twoje zadanie

Wybierz jeden z wcześniej stworzonych komponentów (np. kartę lub CTA) i:

utwórz z niego powtarzalną strukturę z minimum 3 kopiami,
nadaj mu klasy o spójnej konwencji (np. cta-box, cta-button),
dodaj do tego komentarze w kodzie opisujące funkcję każdego elementu,
przetestuj całość w JSFiddle.

✅ Podsumowanie

Nie powielaj kodu – twórz komponenty
Grupuj treści logicznie i semantycznie
Stosuj spójne nazewnictwo klas
Myśl o dostępności i przyszłościowym rozwoju kodu

Previous Temat

Back to Zagadnienie

Next Quiz