Dobre praktyki tworzenia stron

Preview Mode

You're viewing this material in preview mode. Sign up to track your progress and access all features.

Dobre praktyki tworzenia stron

In Progress

Dobre praktyki na koniec części HTML/CSS

Porządkowanie kodu i wcięcia

Pisząc HTML, zachowuj czytelną strukturę. Zagnieżdżone elementy wysuń w prawo (najczęściej używa się wcięć o stałej wielkości, np. 2 lub 4 spacje). Dzięki temu widać, co jest w czym zawarte. Unikaj pisania wszystkiego w jednej linii lub chaotycznych przerw — spójny styl formatowania pomaga zarówno Tobie, jak i innym, którzy będą czytać kod.

<body>
    <header>
        <h1>Tytuł</h1>
    </header>
    <main>
        <section>
            <h2>Sekcja</h2>
            <p>Jakiś tekst...</p>
        </section>
    </main>
</body>

Podobnie w CSS: każdą regułę zaczynaj od nowej linii, właściwości wewnątrz wcięte. Możesz grupować sekcje CSS, komentując je (np. /* Nagłówki */, /* Sekcja nawigacji */).

Komentarze w HTML i CSS

Komenty pomagają opisać trudniejsze fragmenty lub tymczasowo ukryć elementy podczas testów. Używaj ich konstruktywnie, ale nie zostawiaj w kodzie produkcyjnym dużych bloków niepotrzebnego zakomentowanego kodu.

HTML: 
CSS: /* komentarz */

Nazewnictwo klas (BEM i inne metody)

Dobrą praktyką jest nadawanie klasom i identyfikatorom nazw, które oddają rolę lub zawartość elementu, a nie jego wygląd. Złe podejście: .czerwony. Lepsze: .alert lub .btn-primary.

Metodologia BEM

Podstawowe zasady:

Block – komponent lub większy element interfejsu (np. menu, card).
Element – część składowa bloku, zapisywana po podwójnym podkreślniku, np. menu__item, card__title (element nie występuje samodzielnie).
Modifier – wariant lub stan, dopisywany po podwójnym myślniku, np. menu__item--active, card--featured.

Przykładowa struktura klas BEM:

<ul class="menu">
    <li class="menu__item menu__item--active"><a href="#">Strona główna</a></li>
    <li class="menu__item"><a href="#">O nas</a></li>
</ul>

BEM zapobiega nadpisywaniu się stylów i jasno pokazuje zależności. Nie musisz rygorystycznie stosować BEM w małych projektach, ale warto unikać ogólnych nazw jak .box, .left, .green na rzecz bardziej opisowych.

Unikanie nadmiernej ilości efektów

Mniej znaczy więcej — szczególnie na początku. Zbyt wiele animacji, czcionek, cieni czy gradientów może przytłoczyć użytkownika i spowolnić stronę. Kilka praktycznych wskazówek:

Animacje i skrypty: stosuj z umiarem. Animacja powinna mieć cel (np. przyciągnąć uwagę do ważnego elementu) i nie przeszkadzać użytkownikowi.
Kolorystyka i czcionki: trzymaj się ograniczonej palety barw. 1–2 rodzaje fontów wystarczą (np. jeden do nagłówków, drugi do tekstu).
Efekty CSS: cienie, tła wideo i rozbudowane gradienty używaj oszczędnie — mogą wyglądać elegancko, ale w nadmiarze obciążają przeglądarkę.
Dźwięki i media automatyczne: nigdy nie odtwarzaj dźwięku bez akcji użytkownika. Auto-play filmów i dźwięków jest uciążliwy i może zużywać transfer na urządzeniach mobilnych.

Podsumowanie

Pisz czytelny i semantyczny kod — ułatwia to rozwój projektu i pracę zespołową.
Stosuj spójne wcięcia i formatowanie zarówno w HTML, jak i w CSS.
Nazwy klas opisuj funkcję/rolę komponentu (np. BEM), a nie wygląd.
Umiarkowanie w efektach poprawia użyteczność i wydajność strony.

Back to Topic