Dlaczego „NIGDY” nie powinniśmy korzystać z !important?

Chcąc czy nie, !important to prawdziwe zło wcielone, którego powinniśmy unikać w naszych stylach CSS za wszelką cenę.
Dlaczego? Wszystko wyjaśnię w tym wpisie. 🙂

Czym jest !important?

!important jest „narzędziem”, które przebija wagowo wszystkie style CSS.
Jest on ważniejszy niż klasa, ID czy style dodane liniowo.

Dodanie go do jakiejś właściwości zagwarantuje nam, że to właśnie te konkretne style zostaną przypisane do danego elementu na stronie internetowej.

Przykład:

Wyobraźmy sobie, że na stronie mamy: <p class="test"></p>, a nasz CSS wygląda tak:

p {
   font-size: 36px !important;
}

.test {
   font-size: 48px;
}

Patrząc na powyższe style, możemy myśleć, że paragraf otrzyma rozmiar 48px.
Klasa w naszym CSS-ie jest niżej (więc powinna nadpisać style, które są wyżej) oraz według specyficzności jest ważniejsza, niż tag HTML.
Niestety, za sprawą !important wszystkie paragrafy będą miały rozmiar 36px.

Choć !important jest potężnym narzędziem, które – wydawać by się mogło – w niektórych przypadkach może w bardzo łatwy sposób naprawić błąd na stronie, w rzeczywistości nie jest on żadnym rozwiązaniem i nie powinniśmy z niego korzystać wcale.

Powód jest oczywiście bardzo prosty – nie ma nic, co !important przebije.

Problemy z !important

Nadużywanie !important może prowadzić do mnóstwa problemów ze stylowaniem strony, nadpisywaniem czy debugowaniem kodu. W bardzo prosty sposób moglibyśmy zapędzić się w ślepy zaułek, bo żadna nowa reguła CSS by nam po prostu nie działała.

Miałem kiedyś „przyjemność” przerabiać starą stronę, która miała ponad 40.000 linijek kodu CSS. Praktycznie na każdym kroku natykałem się na !important przez co przerobienie jednej sekcji zajmowało mi 10x więcej czasu, niż normalnie.
W wielu przypadkach musiałem pisać cały kod na nowo, bo było to dużo szybszym i łatwiejszym sposobem na odgrzebanie się z bardzo dziwnych zagnieżdżeń zostawionych przez mojego poprzednika, a i nie raz musiałem skakać po 10 różnych miejscach, aby poprawić wygląd zwykłego nagłówka, psując przy tym style innych elementów, o których nawet nie miałem pojęcia.

Kiedy korzystać z important?

Do głowy przychodzi mi tylko jeden pomysł i sam osobiście tylko w taki sposób korzystam z tego wynalazku.

Jeśli dodaję nowe style do elementu na stronie i z jakiegoś powodu one nie działają, dodaję do nich !important.

Jeśli style zadziałają, wiem, że problem leży po stronie specyficzności, więc mogę go bardzo łatwo rozwiązać.
Jeśli nie – wiem, że popełniłem błąd w kodzie. Najczęściej problemem jest jakaś literówka w nazwie klasy lub totalnie skopana struktura w pliku .html.

Oczywiście po zlokalizowaniu problemu !important od razu usuwam. 😉