Co nieco o CSS - optymalizacja

Witajcie!
Wiem, piszę po dosyć długiej nieobecności, ale zwyczajnie nie miałem czasu na zajęcie się blogiem.
Dziś chciałbym poruszyć kwestię optymalizacji kodu CSS.

Wielu koderów pisze kod CSS w sposób, który naprawdę mocno może obniżyć komfort przeglądania strony.
Przykładowo jeśli mamy plik CSS, który posiada ok. 8000 linii kodu i jest napisany w ten sposób:

body {

           background: #000000;

           color: #ffffff;

}

Jest to chyba najmniej optymalna wersja pisania w CSS (zbyt duże odstępy w pionie i poziomie) przez co osoba o słabym łączu będzie dłużej czekać na załadowanie się strony.

Osobiście jeśli kierujecie optymalizacją to mam dla was parę rad.



1. Kolory
Gdy piszemy kod kolorów, który składa się z tych samych cyfr/liter nie piszmy go w sześciu znakach!
Zamiast #000000 napiszmy #000, zamiast #ffffff napiszmy #fff!
Jest to nie tylko lepsze, ale i taki kod szybciej napiszemy.

2. Odstępy
Tu pozwolę sobie podzielić je na średnią optymalizację oraz na dużą optymalizację.

a) średnia optymalizacja
Jest to rozwiązanie stworzone tak, abyśmy mogli sami rozczytać kod i byśmy mogli go swobodnie edytować.

Kod piszemy wg. schematu

body {background:#000; color:#fff;}
#container {font-family:'Roboto', sans-serif;}

lub

body { 
background:#000; 
color:#fff; 
}
#container { 
font-family:'Roboto', sans-serif; 
}

Staramy się możliwe ograniczyć spację oraz przejścia do nowej linii tzw. "enter".

b) duża optymalizacja
Przy tej metodzie polecam utworzyć 2 pliki!
1 plik z kodem CSS napisanym dla nas "wygodnie". Czyli tak abyśmy mogli później odczytać/edytować bez większych problemów. Plik ten trzymamy u siebie lokalnie, nie na serwerze. Posłuży nam on do edycji w przyszłości.

2 plik jest to kod po "metamorfozie"
Już tłumaczę. W tej metodzie najlepiej posłużyć się kompilatorem dostępnym online lub niektóre programy posiadają możliwość generowania pliku CSS z takim kodem.
Przykładowy kompilator: http://taat.pl/narzedzia/csstidy/ (w metodzie kompresji należy zaznaczyć opcję "najwyższą").

Dzięki temu z kodu

body { 
background:#000; 
color:#fff; 
}
#container { 
font-family:'Roboto', sans-serif; 
}

uzyskamy taki kod

body{background:#000;color:#fff;}#container{font-family:'Roboto', sans-serif;}


Teraz porównajmy rozmiar, krótkiego kodu przed i po kompresji.

Kod nr. 1
body { 

background:#000;  

color:#fff; 

} 


#container { 

font-family: 'Roboto', sans-serif; 

} 

Kod nr. 2

body{background:#000;color:#fff;}#container{font-family:'Roboto', sans-serif;}

Różnicę widać gołym okiem! A jak wygląda sprawa pod względem rozmiaru?

Kod wejściowy: 0.123 KB, Kod wynikowy:0.078 KB, Współczynnik kompresji: 36.6% (-45 Bytes)

Rozmiar zmienił się i to jak. A to było tylko parę linijek kodu! Wyobraźmy sobie co by było przy pliku, który posiadałby 8000 linii kodu.

Mam nadzieję, że ten poradnik przyda wam się w praktyce.

Pozdrawiam was serdecznie i do następnego razu! :)