chevron-left chevron-right

[CSS] Kilka sposobów na optymalizację kodu CSS

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.

  1. 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

  2. Łą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.

  3. 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.

  4. 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.

  5. Używanie skrótów w pisaniu kodów CSS

    Tutaj chodzi o to, aby unikać pisania kodu w stylu:

    div {
    background-color: #f00;
    background-image: url(background.gif);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 0 0;
}

    czy też:

    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:

    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.

  6. 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:

    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:

    h1, #box1 .heading, #box2 .heading  {
    padding: 5px 0; font-family: verdana; font-weight: 700;
}

  7. 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.