Modułowość styli CSS

CSS jest prostym językiem i można w nim pisać kod, który jest łatwo dołączany do projektu. Początkujący web deweloper nie zawsze jest świadomy, jakie szkody może wyrządzić nieumiejętne dokładanie kodu css. Wtedy zaczyna się niestety szukanie „na szybko” przyczyny złego stylowania poszczególnych elementów.

Pułapki podczas kodowania w CSS

Jakiś czas temu pisałem o jednej z praktyk „naprawiania” kodu CSS – reguła !important. Zachęcam do lektury.

Wracając do tematu przewodniego, skupię się na wypunktowaniu podstawowych pułapek, których należy unikać, aby nasz kod CSS był w pełni poprawny.

1. Nie rozróżnianie obszarów strony – chodzi tu o zaczynanie reguł od unikalnych identyfikatorów lub klas. Nie należy skupiać się jedynie na stronie głównej, ale na całej witrynie, bo co w przypadku, gdy kod na stronie głównej oraz podstronie będzie ten sam, a przyjdzie nam zmienić coś jedynie na podstronie?
2. Pisanie całego kodu w jednym pliku. Temat jest dość obszerny, ponieważ dochodzimy do aspektów związanych z preprocesorami styli CSS (LESS, SASS). Ogólna zasada jest prosta – im bardziej fragmentaryczny kod, tym łatwiejsze znalezienie przyczyny błędów i ich naprawa.
3. Określanie wymiarów co do piksela. Niestety, przeczy to najważniejszej zasadzie frontendowców – responsywności strony. Należy stosować wartości, które pozwolą dostosować witrynę do każdego rozmiaru okna przeglądarki.
4. Nazewnictwo klas. W tym temacie również jest bardzo prosta zasada – nazwy klas tworzymy tak, aby określały czym jest element, a nie jak wygląda (np. red-button).

Kilka prostych zasad dobrego kodu CSS

• Kod atomiczny. Każda ze stron naszej witryny dobrze, gdyby miała osobny styl. Podobnie jak każdy z głównych obszarów strony (header, sidebar, content, footer, itp).
• Uniwersalne klasy elementów. Chodzi o to, aby podstawowe elementy strony takie jak np. przyciski czy linki, miały z góry narzucony domyślny styl. Później można je dowolnie personalizować.
• Wyjątki od reguły. Nie, nie dodajemy !important. Napiszmy „customową” klasę, która nadpisze nam konkretne właściwości elementu.

Obrazując powyższe zasady ustalmy hierarchię kodu CSS:

1. Główne komponenty strony, np. typografia, formularze.
2. Sekcje strony (header, sidebar, content, footer, itp).
3. Grupy elementów (np. menu).
4. Specyficzne elementy dla poszczególnych stron.

Podsumowanie

Każdy projekt traktuję jako zbiór komponentów, które już kiedyś stworzyłem. Nie jest to sztywna zasada, ale mi osobiście pomaga i usprawnia pracę. Mam nadzieję, że nieco rozjaśniłem pewne kwestie.

Jestem ciekaw waszych praktyk, jakie stosujecie i jakie wam pomagają usprawnić pracę nad stylami CSS.