7 złych praktyk CSS, których musisz unikać

W tym artykule poznasz 7 złych praktyk, których musisz unikać podczas pisania stylów CSS. Obok złych praktyk umieszczone są również ich przeciwieństwa – dobre praktyki. Dzięki temu możesz natychmiast poprawić jakość Twojego kodu.

Nadużywanie deklaracji !important

Deklaracja !important pozwala na nadpisanie wcześniejszych reguł dodanych do selektora (bez względu na specyficzność). !important jest często nadużywany z powodu lenistwa – łatwiej dodać tę regułę niż tworzyć bardziej/mniej specyficzny selektor.  Niestety powoduje to problemy w późniejszych pracach nad stylami i kod staje się znacznie trudniejszy w utrzymaniu.

Opisywanie stylów w nazwach selektorów

Nazwa selektorów nie powinna określać jego stylów. Spójrz na poniższy przykład. Pierwszy selektor .szare-tlo będzie poprawny tak długo, jak tło będzie szare. Problem w tym, że style często się zmieniają.

.szare-tlo { background-color: grey; } /* Źle */

.glowne-tlo { background-color: grey; } /* Dobrze */

Klient może zdecydować, że tło powinno mieć jednak inny kolor. Będziesz musiał zmieniać wtedy nazwę selektora, który już przecież odwołuje się do kilkunastu elementów na stronie. Drugą opcją będzie zmiana samego koloru:

.szare-tlo { background-color: red; } /* Bardzo źle */

.glowne-tlo { background-color: red; } /* Dobrze */

Jak widzisz selektor nieopisujący stylów (.glowne-tlo) będzie zawsze poprawny.

Powiązanie selektorów ze strukturą HTML

Kolejnym często popełnianym błędem jest wiązanie selektorów ze strukturą HTML

.footer > nav > li > button {  } /* Źle */

.footer-button {  } /* Dobrze */

Problem z pierwszym zapisem pojawi się podczas zmiany struktury HTML. Możemy zdecydować, że element nav powinien zostać umieszczony w dodatkowym divie. Cała reguła przestanie wtedy działać.

Drugi zapis będzie zawsze poprawny, bez względu na strukturę HTML.

Pisanie długich selektorów

Używanie zbyt długich selektorów powoduje problemy ze specyficznością. Efekt jest podobny do !important – kod staje się trudniejszy w utrzymaniu i modyfikacji.

#about .team .members div .person {  } /* Źle */

.person {  } /* Dobrze */

Zawsze bierz pod uwagę, że prawdopodobnie ktoś za kilka tygodni/miesięcy/lat będzie pracował nad Twoim kodem. Nie dokładaj innym/sobie niepotrzebnej pracy 🙂

Ignorowanie kolejności elementów HTML

Ignorowanie kolejności elementów HTML podczas pisania stylów CSS wprowadza niepotrzebne zamieszanie i nieporządek.

/* Źle */

.footer {  }
.header {  }

/* Dobrze */

.header {  }
.footer {  }

Pisz style CSS według kolejności elementów HTML.

Ignorowanie specyficzności w kolejności selektorów

Selektory powinny być ułożone w kolejności od najmniej specyficznego.

Źle:

.klasa:first-child {  }
.klasa {  }
.klasa:last-child {  }

Dobrze:

.klasa  {  }
.klasa:first-child {  }
.klasa:last-child {  }

Możesz zauważyć, że dobra praktyka jest jednocześnie złą (ignorowanie kolejności elementów HTML). To jest wyjątek, ponieważ działamy tutaj w obrębie jednego elementu.

Używanie stylów inline

Jest to jedna z najgorszych praktyk, mimo to nadal jest szeroko stosowana. Zaprzecza głównemu przeznaczeniu CSS, którym jest rozgraniczenie warstwy prezentacji od struktury. Style inline są również najbardziej specyficzne, więc jedynym sposobem na ich nadpisanie jest użycie !important.

<p style="font-size: 18px; color: red;">Korzystanie ze stylów inline to zła praktyka.</p>

Istnieje jednak jeden wyjątek – emaile HTML. Tutaj jesteśmy zmuszeni do ich użycia. Możemy jednak tego uniknąć używając frameworków takich jak MJML.