Optymalizacja CSS
Pierwszy krok w moim cyklu wpisów na temat „Optymalizacji stron internetowych”.
Mając na myśli optymalizację CSS myślę o uproszczeniu kodu i skróceniu do jak najmniejszej liczby wierszy. Poniżej opiszę przykłady skracania kodu, które w rezultacie poprawią czytelność i rozmiar pliku. Jeśli poruszam temat rozmiaru plików, to są dostępne darmowe programy do optymalizacji plików CSS takie jak Icey’s CSS Compressor czy CleanCSS ich średnia skuteczność to około 25%, czyli o tyle potrafią zmniejszyć rozmiar pliku CSS. Ich wada po takiej kompresji kod staje się nieczytelny, innymi słowy nasze piękne drzewko CSS i poukładane klasy zlewane są w jedną całość. Jeśli ktoś dysponuje portalem o średniej unikalnej porównywalnej do największych portali to jest to narzędzie pozwalające zaoszczędzić kilka cennych KB. Jednak musimy pamiętać o zachowaniu kopi z drzewkiem ponieważ edycja takiego skompresowanego CSS przyprawia o ból głowy. Jest to chyba ich jedyna wada przez którą osobiście nie używam takich czarodziejów. Klient czy programista od Back-end’u oczekuje czytelnego, prostego i łatwego w edycji CSS, a nie koszmarka z którego nie wiele można wyczytać.
Reset czyli od tego powinien zaczynać się każdy arkusz.
Na początku arkusza użyjmy *(atrybuty znajdujące się w klamrach będą dodane do każdego selektora na zasadzie dziedziczenia) i zamiast resetować wartości oddzielnie przy każdym selektorze stwórzmy taki kod dzięki, któremu zaoszczędzimy masę czasu i miejsca nie powtarzając tego samego w koło. Przy okazji resetujemy atrybuty dla wszystkich przeglądarek, dzięki czemu unikniemy dodawania domyślnych wartości przez przeglądarki. Reset powinien wyglądać tak.
1 2 3 4 5 6 | * { margin: 0; padding: 0; list-style: none; border: none; } |
Grupowanie identyfikatorów i klas.
Często zdarza się tak, że pisząc kod dla kilku selektorów okazuje się ze atrybuty nieznacznie się różnią. Zamiast przepisywać kolejny raz pogrupujmy je oddzielając „przecinkiem” Taka kompresja wygląda w następujący sposób.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | .headline { font-size: 11px; color: #fff; padding: 10px; border-top: 2px; } #box { font-size: 11px; color: #fff; padding: 10px; } #header { font-size: 11px; color: #fff; padding: 10px; background: url(‘images/header.jpg’); } /*Po kompresji*/ .headline, #box, #header { font-size: 11px; color: #fff; padding: 10px; } .headline { border-top: 2px; } #header { background: url(‘images/header.jpg’); } |
Dziedziczenie w CSS.
Trochę trudniejsza kompresja chociażby z racji, że przeglądarki nie zawsze dziedziczą w identyczny sposób, a samych sposobów dziedziczenia z racji istnienia dużej ilości selektorów w HTML jest tyle, że przybliżę tylko prosty schemat działania dziedziczenia. Polega to na przejmowaniu wartości napisanych wcześniej dla tzw. ”rodzica” przez „dzieci”. Czyli innymi słowy zapisując wartość dla body jest ona dziedziczona dla wszystkiego co jest w środku pomiędzy <body></body> . Czy zapisując coś dla p (paragrafu) wszystkie elementy znajdujące się wewnątrz dziedziczą ten atrybut. Oczywiście wystarczy dla danego selektora nadać ten sam atrybut z innymi wartościami, aby nasz selektor zmienił wartość dla wcześniej dziedziczonego atrybutu.
Dobrym przykładem dziedziczenia jest ustalenie dla body czcionki. Zazwyczaj strona jest napisana w jednej głównej czcionce, a tylko np. menu będzie wymagało zadeklarowania innej. A więc zastosowanie dziedziczenia w tym przypadku zastąpi nam nawet kilkadziesiąt wierszy z deklaracją czcionki, którą normalnie musielibyśmy dodać do większości selektorów.
Jest to bardzo ogólny przykład bo dziedziczenie możemy wykorzystywać w wielu innych przypadkach. Przykład dziedziczenia poniżej.
1 2 3 4 5 6 7 8 9 | p { color: red; } p span { /*span już odziedziczy kolor*/ } p.class { /*ta klasa już odziedziczyła kolor*/ } |
Skracanie CSS po przez kompresje atrybutów.
Czynność, która nie tylko poprawia czytelność, ale również znacznie skraca liczbę wierszy w naszym arkuszu jak i pozwala na znaczne skrócenie czasu poświęconego na wklepywanie z palca naszych styli. Poniżej zaprezentuje, atrybuty dla których możliwy jest rodzaj takiej kompresji.
Margin, padding, border-color, border-width, border-style
Cztery wartości po skompresowaniu ustawiane są zgodnie z ruchem wskazówek zegara zaczynając od góry (góra prawa dół lewa). Jest to kompresja najmniej skomplikowana 
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px; /* Po kompresji */ margin: 1px 2px 3px 4px; padding-top: 1px; padding-right: 2px; padding-bottom: 3px; padding-left: 4px; /* Po kompresji */ padding 1px 2px 3px 4px; border-top:1px; border-right:2px; border-bottom:3px; border-left:4px; /* Po kompresji */ border-width: 1px 2px 3px 4px; /*Tak samo dla border-style, border-color*/ |
Obramowanie (border)
Podajemy w kolejności (szerokość styl kolor ). Możemy stosować zarówno dla wszystkich (border) jak i dla wybranych takich jak (border-top, border-right, border-bottom, border-left). Jeśli pominiesz którąś z wartości zostanie przyporządkowana wartość domyślna.
1 2 3 4 5 6 7 | border-width: 2px; border-style: solid; border-color: #000; /*Po kompresji*/ border: 2px solid #000; border-top: 2px solid #000; |
Tło (background)
Podajemy w kolejności (color image repeat attachment position). Jeśli pominiesz, którąś z wartości zostanie przyporządkowana wartość domyślna.
1 2 3 4 5 6 7 8 | background-color: #000; background-image: url(‘bg.jpg’); background-repeat: no-repeat; background-attachment: fixed; background-position: 0 0; /*Po kompresji*/ background: #000 url(‘bg.jpg) no-repeat fixed 0 0; |
Czcionki (font)
Podajemy w kolejności (style variant weight size height family). Możesz pominąć każdą z wartości oprócz font-size i font-family, które są obowiązkowe. Pamiętaj o zachowaniu kolejności.
1 2 3 4 5 6 7 8 9 | font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 11px; line-height: 18px font-family: Tahoma, sans-serif; /*Po kompresji*/ font: italic small-caps bold 11px 18px Tahoma, sans-serif; |
Listy (list-style)
Podajemy w kolejności (type position image). Samą formę list-style-type możemy skrócić do list-style.
1 2 3 4 5 6 | list-style-type: square; list-style-position: inside; list-style-image: ('li.gif'); /*Po kompresji*/ list-style: square inside url('li.gif'); |
Skracanie CSS po przez kompresje wartości.
O ile powyżej skracaliśmy style w pionie. To jest również możliwość skracania samych wartości, czyli skracamy nasze style w poziomie. Pozwala to oczywiście jak zwykle zaoszczędzić czas podczas wklepywania kodu.
Dla margin, pudding, border zamiast czterech wartości po dwukropku możemy zapisać np. tak
1 2 | margin: 10px; /*oznacza nadanie 10px dla wszystkich (top, right, bottom, left) */ margin: 10px 20px /*10px dla top/bottom i 20px dla left/right */ |
Dla color zamiast zapisywać kolor składający się z 6 (cyfr/liter) możemy skrócić do 3. Żeby wykonać taki skrót nasz kolor musi składać się z kolejnych par np. #FF22BB i z każdej pary wyrzucamy po jednej powtarzającej się (cyfrze/literze) w wyniku czego otrzymujemy #F2B, który jest dokładnie w ten sam sposób interpretowany. Przykład:
1 2 3 4 | color: #ffffff; /*Po kompresji*/ color: #fff; |
Definicja typów dla klas i identyfikatorów
Dość kontrowersyjna, ale jeśli chcemy zmniejszać i kompresować nasz CSS to również przydatna. Definicja typów dla klas lub identyfikatorów poprawia przejrzystość w naszego CSS, ale z drugiej strony po co pisać przed #id typ skoro jest on przyporządkowany tylko i wyłącznie dla jednego elementu. Uwaga ! Pamiętaj, że klasa może być deklarowana w html wiele razy i usunięcie typu z przed klasy powoduje, że klasa bez typu ma niższy priorytet od tej z TYPEM. Przykład:
1 2 3 4 5 6 | Div#header {} p.my-class {} /*Po kompresji*/ #header {} .my-class {} |
Podsumowanie
Jeśli doszedłeś, aż tutaj to po pierwsze chciałbym Ci podziękować za czas poświęcony na czytanie mojego jak dotąd najdłuższego wpisu. Jednocześnie chciałbym poprosić Cie o częstsze odwiedzanie bloga. Bo poświęcanie czasu na takie wpisy ma tylko wtedy sens, gdy ma on swoich odbiorców. Mam nadzieje, że nie zapomniałem o innych formach kompresji, a nawet jeśli coś pominąłem to daj mi znać w komentarzach lub na mail, a ja na pewno uzupełnię wpis.
Bardzo szybki i konkretny artykuł.
Oczywiście, że chcemy więcej.
Przy kompresji plików CSS zapomniałeś wspomieć o ostatnio popularnym Google Page Speed, które zajmuje się (m.in.) CSS-em. Nie robi z CSS-a sieczki, a minimalizuje definicje w tych plikach, m.in. według reguł, które podałeś.