Stwórz mniejsze pliki css

Czy tworzyć pliki css małe (5kb) czy duże (25kb) ? Odpowiedź jest prosta – mniejsze. Bo strona będzie się szybciej ładować i sam plik będzie czytelniejszy. Tym samym jego modyfikacja w przyszłości będzie wygodniejsza. Oczywiście wielkość pliku css zależy też od typu strony tzn. czy robimy spory serwis czy małą stronę informacyjną z kilkoma podstronami. Nie należy też przesadzać i starać się na siłę zooptymalizować kod np. usuwając komentarze. Komentarze pozwolą później łatwiej dotrzeć do właściwej części kodu gdy będziemy chcieli go zmodyfikować. Poniżej przedstawię kilka dróg, dzięki którym możemy uzyskać mniejsze pliki css. Najpierw przedstawię optymalizację komentarzy. Są dwie drogi zapisu komentarzy w kodzie. Bardziej rozbudowana:

/*----------------------*/
/*-----Comment-----*/
/*----------------------*/

i krótka:

/*Comment*/

Możliwe, że bardziej rozbudowana forma czyni komentarz bardziej widocznym w kodzie, lecz stosując minimalną wersję oszczędzamy sporo na wielkości pliku. Kolejną sprawą są kody kolorów w systemie szesnastkowym. Również niektóre z nich można skrócić np. zapis

color: #ffffff;
color: #ff88ff;

można zmienić na:

color:#fff;
color:#f8f;

Oczywiście nie wszystkie zapisy kolorów można skrócić np.

color: #f8f7f2;

nie da się zapisać w skróconej formie. Kolejnym krokiem do zmniejszenia wielkości pliku jest stosowanie tzw. atrybutów mieszanych. np. zapis:

margin-left:10px;
margin-right:20px;
margin-top: 0;
margin-bottom:30px;

można skrócić na

margin: 0 20px 30px 10px;

Spójrzmy na jeszcze jeden przykład. Poniższy kod

padding-left:10px;
padding-right:10px;
padding-top: 0;
padding-bottom: 0;

i jego skrócona forma

padding:10px 0;

Teraz zastosujemy skróconą formę dla font. Poniższy kod

font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 14px;
line-height: 18px;
font-family: Arial;

można zapisać w następujący sposób:

font: italic small-caps bold 14px /18px Arial;

Należy pamiętać, że kolejność wpisywania atrybutów w jednej linii jest następująca: font-style, font-variant, font-weight, font-size, line-height, font-family. Nie trzeba oczywiście wypisywać wszystkich atrybutów. Ponadto przed wartością atrybutu line-height trzeba obowiązkowo postawić ukośnik. Kolejny sposób to opuszczanie symbolu jednostki (np. px, pt, em) przy wartości 0. Ilustruje to poniższy przykład. Zapis

padding: 10px 0px 0px 0px;

można zastąpić przez

padding: 10px 0 0 0;

W stylach css bardzo ważne jest definiowanie klas i korzystanie z identyfikatorów. Ułatwia to pracę nad modyfikacją wizualną dokumentu. Jednak nie twórzmy zbyt długich nazw dla klas i identyfikatorów np. #prawastronalayoutu można skrócić na #prawastrlay lub jeszcze bardziej #psl. Ważne żebyśmy wiedzieli do czego dany identyfikator lub klasa się odnoszą. Spójrzmy teraz na poniższy kod

h1{
margin:0;
padding:0;
}
h2{
margin:0;
padding:0;
}
h3{
margin:0;
padding:0;
}

Widać, że dla wszystkich trzech rodzajów nagłówków dodane są te same deklaracje. Zapis ten można bardzo zmniejszyć. To zdecydowanie krótszy zapis tego kodu.

h1, h2, h3{
margin:0;
padding:0;
}