Unikaj zasady !important
Chociaż w niektórych przypadkach zasada !important może być darem niebios, powinieneś jej używać tylko w ostateczności. Ta reguła tworzy wyjątek od kaskady. Dlatego, jeśli dodasz !important do deklaracji CSS, zastąpi ona wszelkie inne deklaracje, nawet te o większej specyficzności.
Jeśli w Twoim CSS jest zbyt wiele reguł !important, przeglądarka użytkownika będzie musiała przeprowadzić dodatkowe kontrole kodu, co może znacznie spowolnić stronę. Zasadniczo nigdy nie używaj !important w CSS w całej witrynie lub podczas tworzenia motywu lub wtyczki. Jeśli to możliwe, używaj go tylko wtedy, gdy chcesz zastąpić CSS pochodzący z biblioteki innej firmy.
Rafaktoryzacja CSS
Chociaż refaktoryzacja CSS rzadko jest łatwym zadaniem, w wielu przypadkach może znacznie poprawić wydajność witryny. Na przykład, gdy twoje pliki CSS są zbyt duże lub odziedziczyłeś starszą bazę kodu lub masz bardzo słaby czas ładowania strony, który poważnie szkodzi współczynnikowi konwersji. Celem refaktoryzacji CSS jest uczynienie twojego kodu bardziej eleganckim, łatwiejszym w utrzymaniu i szybszym ładowaniu.
Refaktoryzacja CSS to wieloetapowy proces, podczas którego musisz przeanalizować każdy aspekt bazy kodu CSS. Musisz sprawdzić kilka różnych rzeczy, takich jak:
- czy masz niewykorzystane lub zduplikowane reguły lub zasoby CSS,
- możesz skorzystać z bardziej nowoczesnych technik, takich jak flexbox i CSS grid,
- używasz zbyt dużej specyficzności (możesz to obliczyć za pomocą kalkulatora specyficzności wizualnej),
- struktura twoich plików CSS jest rozsądna (na przykład łatwiejsze jest utrzymywanie mniejszych plików niż dużych),
- warto wdrożyć narzędzie do automatycznej kompilacji,
- i wiele innych.
Przed rozpoczęciem refaktoryzacji skonfiguruj mierzalne cele i wybierz wzorce, których użyjesz, takie jak czas ładowania strony, abyś mógł porównać ich wartości przed i po.
Nie zapomnij także użyć narzędzia kontroli wersji, takiego jak Git. W ten sposób, jeśli coś pójdzie nie tak, możesz wrócić do poprzedniej wersji kodu.
Podsumowanie 3 ostatnich wpisów na temat CSS
Istnieje wiele porad dotyczących optymalizacji CSS, których możesz użyć, aby poprawić wydajność swojej witryny. Większość z nich jest łatwa do wdrożenia, ale może mieć znaczący wpływ na czas ładowania strony. Szybsze ładowanie stron nie tylko poprawia komfort użytkowania, ale także pomaga uzyskać lepsze rankingi w Google i innych wyszukiwarkach.