[CSS] Kilka sposobów na optymalizację kodu CSS
Ten wpis ma 17 lat. Od tego czasu przeglądarki i narzędzia mogły się zmienić, więc zanim użyjesz kodu, sprawdź go z aktualną dokumentacją.
Wpadłem dzisiaj na pomysł, aby podzielić się z Tobą metodami na ograniczenie wielkości plików CSS.
Część z nich na pewno znasz, część nie musisz.
Przyznam się do tego, że sam pisząc taką poradę nie stosuję się do jednej z nich, ale to z własnego wygodnictwa. Chodzi o ustawienie jednego pliku graficznego z kilkoma wersjami obrazka, który jest bardzo przydatny w stosowaniu efektów :hover, czy :visited na stronach w linkach.
- Kilka obrazków w jednym, tzw. CSS Sprites
Jest to metoda pozwalająca na ograniczenie liczby zapytań wysyłanych na serwer, ponieważ obrazek jest pobierany raz z serwera i zawiera on wszystkie potrzebne elementy graficzne strony
- Łączenie kilku plików CSS w jeden
Sprawa jest podobna jak w powyższym przypadku, czyli zamiast kilku zapytań na serwer w celu odnalezienia plików CSS jest jedno zapytanie, które pobiera jeden plik ze wszystkimi stylami strony.
- Unikanie wstawienia stylów bezpośrednio do kodu HTML, tylko jako osobny plik CSS
Dzięki temu uzyskamy znacznie bardziej czytelny kod, przez co jest łatwiejszy do edycji.
- Unikanie wpisu @import w plikach CSS
To nie prowadzi do niczego, niby jest główny plik, ale wszystkie style pochodzą z innych plików.
Najlepiej wpisać wszystkie style do jednego głównego pliku. - Używanie skrótów w pisaniu kodów CSS
Tutaj chodzi o to, aby unikać pisania kodu w stylu:
Przykład 1CSS div { background-color: #f00; background-image: url(background.gif); background-repeat: no-repeat; background-attachment: fixed; background-position: 0 0; }
czy też:
Przykład 2CSS h1 { font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 12px; line-height: 140%; font-family: "Tahoma", sans-serif; }
Tylko wstawiać kod w następujący sposób:
Przykład 3CSS div { background: #f00 url(background.gif) no-repeat fixed 0 0; } h1 { font: italic small-caps bold 12px/140% "Tahoma", sans-serif; }
Dzięki temu zaoszczędzisz na wielkości pliku końcowego CSS.
- Grupowanie podobnych stylów koło siebie
Chodzi tu o to, aby unikać deklarowania podobnych stylów dla różnych elementów. Dzięki grupowaniu stylów odpowiadających np. za nagłówki, wiemy że mamy określone style nagłówkowe w jednym miejscu zamiast szukać ich po całym miejscu.
Czyli zamiast:Przykład 4CSS h1 { padding: 5px 0; font-family: verdana; font-weight:700; } #box1 .heading { padding:5px 0; font-family: verdana; font-weight:700; } #box2 .heading { padding:5px 0; font-family:verdana; font-weight:700; }
Robimy tak:
Przykład 5CSS h1, #box1 .heading, #box2 .heading { padding: 5px 0; font-family: verdana; font-weight: 700; }
- Komentowanie kodu CSS
To jest ekstremalnie przydatna rzecz w kodowaniu. Dzięki temu wiemy, co za co odpowiada w kodzie, i tą zasadę warto stosować nie tylko w kodzie CSS, ale także w programowaniu ogólnie.
Mam nadzieję, że tak garstka informacji pomoże Tobie w pisaniu optymalnego kodu CSS, który nie będzie pożerał łącza i zasobów serwera.
O autorze
