Kategoria:CSS

Antywzorce w CSS - 10 najczęściej popełnianych błędów

  • Czas potrzebny na przeczytanie:8 minut
  • Opublikowane:20 grudnia 2021

Mimo tego, że CSS nie jest językiem programowania, to często Frontend Developerzy popełniają w nim te same błędy. Zebrałem je w całość i stworzyłem listę Antywzorców w CSS, czyli najczęściej popełnianych błędów początkujących i nie tylko 😉

Stylowanie po id i tagach

Stylowanie po id i tagach to zdecydowanie najczęściej popełniany błąd 😱 Co w tym takiego strasznego? Pisanie w ten sposób znacząco zwiększa specyficzność przez co style stają się cięższe w utrzymaniu i ponownym wykorzystaniu.

Jak to naprawić? W naszych stylach chcemy zachować jak najbardziej płaską specyficzność, dlatego najlepiej korzystać po prostu z klas:

Inline style i !important

Dokładnie z tych samych powodów powinniśmy unikać tzw. inline styles oraz deklaracji !important. Najczęściej zdarza mi się obserwować użycie inline styles przy zmianie wartości za pomocą JavaScript lub po prostu w HTML, bo chcemy zmienić tylko jedną właściwość. Użycie !important za to jest często poprawką na nasze własne błędy spowodowane zbyt wysoką specyficznością w stylach.

Jak to naprawić? Ponownie, wystarczy dodać odpowiednią klasę:

Niezarządzanie z-index

Nadajesz elementowi z-index, nie działa, zwiększasz wartość, nie działa, dajesz 999999999 - działa! Za miesiąc wracasz do tego kodu, próbujesz dodać nowy modal, który potrzebuje mieć największy z-index w projekcie i sytuacja się powtarza... Znasz ten ból? Ja tak, z-index w CSS napsuł mi sporo krwi, nawet czasem mam wrażenie, że większe wartości nie przynoszą pożądanego efektu, czy to w ogóle możliwe? Okazuję się, że jak najbardziej, dlatego tak ważne jest zadbanie o porządek w z-index w projekcie.

Do zarządzania z-index przydadzą nam się zmienne CSS, to dzięki nim będzie mogli uporządkować i przede wszystkim odpowiednio nazwać poszczególne indexy. W :root deklarujemy zmienne z odpowiednimi nazwami:

Ogarnij swoje kolory

A co z kolorami? W jakim formacie najlepiej je podawać? Hex, Hsla, Rgb?

Według mnie sam format nie jest aż tak istotny, najważniejsze jest aby ponownie korzystać ze zmiennych oraz z takich samych formatów. Wykorzystanie zmiennych daje nam możliwość skorzystania z koloru ponownie, a ten sam format to pewna forma konsekwencji w kodzie:

Magiczne wartości

Mam dla Ciebie jeszcze jeden świetny przykład wykorzystania zmiennych. Załóżmy, że nasz element pozycjonujemy absolutnie i chcemy mu nadać właściwość top:

Dość popularny błąd, czyli tzw. magic numbers. Występują one najczęściej w językach programowania, ale CSS jak najbardziej ma ich odpowiedniki. Bardzo często spotykałem się z sytuacjami, gdzie ktoś zadeklarował jakąś szaloną wartość typu 43.54% i teraz domyśl się o co w tym chodzi! Zmienne znowu przychodzą z pomocą, nie musimy ich nawet deklarować globalnie w :root, wystarczy to zrobić na poziomie bloku:

Nieużywanie konwencji nazewniczej

Trzymanie się pewnych założeń, konwencji w kodzie to bardzo ważna rzecz, nie tylko pod względem technologicznym, ale również zespołowym. Nie warto tracić czasu na sprzeczanie się, czy lepszą nazwą klasy jest .box-text, czy .box_text. Dzięki takiej pewnej niekonsekwencji my sami po czasie możemy się pogubić jak tak naprawdę powinniśmy pisać w naszym projekcie.

Zamiast używać różnych wariacji klas, warto spojrzeć chociażby na BEM, który narzuca nam sposób nazewnictwa klas w CSS:

Powtarzanie się

Don't repeat yourself, czyli ulubiona zasada programistów sprawdza się również w CSS. Gdy mamy wspólne style dla np. dwóch związanych ze sobą klas, możemy je zamknąć w jednym bloku. Idealnym przykładem tego są pseudoelementy ::before i ::after:

Niekorzystanie ze skrótów

A czemu by nie napisać tego krócej?

Zaburzanie kolejności elementów

Podczas korzystania z flexboxa i grida mamy możliwość zmieniania kolejności elementów w kontenerze. O ile może być to czasem przydatne, to najczęściej nie jest to dobrą praktyką. Załóżmy, że mamy kontener, a w nim pięć elementów interaktywnych, jeśli w kontenerze ustawimy właściwość flex-direction na row-reverse, to elementy zostaną wyświetlone w odwrotnej kolejności. Zmienienie kolejności w CSS nie spowoduje jednak przemieszczenia się elementów w strukturze HTML, a ten potrzebny jest dla czytników ekranowych. Dla użytkowników czytników może być to dość frustrujące, gdy będą przemieszczali się po elementach w złej kolejności. Jeśli checesz zmieniać kolejność, zrób to w HTML:

Usuwanie outline

Jedną z największych bolączek związanych z accessibility na stronach internetowych jest brak wizualnego wskaźnika outline dla elementów interaktywnych, takich jak np. link. Bardzo często usuwamy outline, bo nie podoba nam się jej wygląd, ale niesie to za sobą poważne konsekwencje. Użytkownicy, którzy korzystają tylko z klawiatury do poruszania się na stronie, nie będą widzieli na jakim dokładnie elemencie się znajdują...

Rozwiązaniem tego problemu jest ostylowanie outline lub zapewnienie innych styli, które posłużą nam za taki wizualny wskaźnik. Pamiętaj, aby nie korzystać tutaj z samych kolorów, niektórzy użytkownicy mogą ich nie rozróżniać:

Podsumowanie

To by było na tyle, jeśli chodzi o najczęściej popełniane błędy w CSS. Lista jest jak najbardziej subiektywna, wynika z tego, co udało mi się zaobserwować podczas code review :)

Do usłyszenia!

O autorze

Olaf Sulich

Olaf jest Frontend Developerem, blogerem i nosi rybacki kapelusz 🎩 Pisze o wszystkim co związane z frontendem, ale nie boi się backendu i designów 🦾 Ma głowę pełną pomysłów i nadzieję, że znajdziesz tutaj coś dla siebie!

Dołącz do społeczności!

Bo w programowaniu liczą się ludzie

Wchodzę