7 porad dla mistrzów CSS

Trzymając się wymienionych zasad, sprawisz że twój kod CSS stanie się bardziej przejrzysty. To oznacza, że będzie łatwiejszy w modyfikacji, a ty będziesz mógł pisać go jeszcze szybciej, niż dotychczas.

Nie łącz kodu HTML i CSS

Staraj się nigdy nie łączyć ze sobą kodu CSS i HTML. Ta podstawowa zasada ma największy wpływ na przejrzystość kodu strony i szybkość wprowadzania zmian. Kod CSS powinien zawsze znajdować się w osobnym arkuszu lub arkuszach stylów. Zły jest więc poniższy sposób tworzenia stylów:

<div border="1px" border-color="red">

Powyższy zapis kodu może być przydatny w przypadku szybkiego testu (a i to jest wątpliwe), ale na pewno nie jest pasuje do profesjonalnego projektu. Kod ten możesz zapisać jeszcze w inny sposób:

<div style="border: 1px red">

Taka droga na skróty może kusić szybkością zapisu, ale nie łudź się, że w przypadku skomplikowanych serwisów uda ci się zapanować nad tego typu kodem. Taki styl zapisywania kodu CSS skończy się niemal na pewno kompletnym chaosem i trudną do ogarnięcia "zupą tagów". Co więc należy zrobić? Oczywiście użyć odpowiedniego identyfikatora lub klasy:

1. <div class="czerwona_ramka">
2. </div>

Listing zwinięty - 2 linii

A w arkuszu stylów CSS zapisać:

1. .czerwona_ramka {
2.   border: 1px red
3. }

Listing zwinięty - 3 linii

Powtórzmy to jeszcze raz. Fundamentalną zasadą, która znacznie ułatwia tworzenie stron jest rozdzielenie kodu HTML i CSS.

Grupuj właściwości

Często kilka właściwości można zapisać razem, gdy odnoszą się one do tego samego elementu i występują w jednej regule CSS. Przyjrzyj się tej grupie właściwości i wartości:

1. background-image: url(/img/tlo.png);
2. background-position: top;
3. background-repeat: repeat-x;

Listing zwinięty - 3 linii

Możesz je także zapisać jako:

background: url(/img/tlo.png) top repeat-x

Jest to definicja krótsza i bardziej przejrzysta. Jej jedno użycie w kodzie CSS nie sprawi z pozoru większej różnicy, ale w przypadku rozbudowanych projektów suma tego rodzaju drobnych zmian przynosi w rezultacie zupełnie nową jakość.

Grupuj selektory

Nie tylko podobne właściwości mogą być grupowane. Jeżeli kilku selektorom nadajesz takie same właściwości, to w wielu przypadkach warto je grupować. Zamiast więc pisać:

 1. #kolumna_lewa {
 2.   margin: 10px;
 3.   border: 2px dotted gray
 4.   padding: 5px;
 5.   background: white
 6. }
 7.  
 8. #kolumna_prawa {
 9.   margin: 10px;
10.   border: 1px solid blue;
11.   padding: 5px;
12.   background: white
13. }

Listing zwinięty - 13 linii

Możesz napisać:

 1. #kolumna_lewa, #kolumna_prawa {
 2.   margin: 10px;
 3.   padding: 5px;
 4.   background: white
 5. }
 6.  
 7. #kolumna_lewa {
 8.   border: 2px dotted gray
 9. }
10.  
11. #kolumna_prawa {
12.   border: 1px solid blue
13. }

Listing zwinięty - 13 linii

Powtarzające się w dwóch regułach pary właściwości i wartości zostały zapisane tylko jeden raz, a selektory w pierwszej regule oddzieliliśmy przecinkiem. Im więcej powtarzających się par właściwości i wartości znajduje się w twoim kodzie, tym większe znaczenie ma grupowanie selektorów.

Wyzeruj wartości

Przygotowując plik CSS dla nowego serwisu, warto należycie zadbać o domyślne wartości niektórych właściwości. Każda przeglądarka może je definiować inaczej. Niektóre programy posiadają domyślne style nadające określone szerokości marginesom, a inne paddingom. Aby uniknąć problemów, warto wstawić na początek pliku CSS regułę:

1. * {
2.   padding: 0;
3.   margin: 0
4. }

Listing zwinięty - 4 linii

Selektor gwiazdki oznacza, że reguła odnosi się do wszystkich elementów strony. Jednak początkowego resetowania mogą wymagać także inne właściwości, np. obramowanie elementu img:

1. img {
2.   border: 0
3. }

Listing zwinięty - 3 linii

W przeciwnym razie, niektóre przeglądarki mogą nadać obramowanie obrazkom znajdującym się wewnątrz odnośników. Ogólna zasada brzmi: resetuj wszystkie właściwości, które mogą być nieprzewidywalne, a w razie potrzeby definiuj je według własnego uznania.

Wyszukując w Google frazę "css reset", znajdziesz wiele przykładów różnego podejścia do tego zagadnienia. Jedno z najsłynniejszych rozwiązań przedstawił Eric Meyer na swoim blogu we wpisie Reset Reloaded: http://meyerweb.com/eric/thoug.... Warto przyjrzeć się bliżej opisanym tam poradom.

Opanuj dziedziczenie

Umiejętne wykorzystanie dziedziczenia może zaoszczędzić ci sporo pracy. Najprostszy przykład odnosi się do tekstu, np. wielkości liter i kroju czcionki. Zamiast definiować te właściwości dla każdego elementu osobno, zdefiniuj je raz dla całego dokumentu:

1. body {
2.   font-size: 0.79em;
3.   font-family: Verdana, sans-serif
4. }

Listing zwinięty - 4 linii

Wielkość 0.79em to 79% domyślnej wielkości tekstu w przeglądarce (najczęściej wynosi on 16 pikseli). Wartości dla kolejnych elementów będą odnosić się do wartości ustalonej dla elementu body. Dzieje się tak właśnie z powodu dziedziczenia. Body jest rodzicem dla każdego innego elementu strony. Możesz teraz zmienić wielkość tekstu dla nagłówków:

1. h1 {
2.   font-size: 1.5em
3. }

Listing zwinięty - 3 linii

Tak naprawdę będzie ona wynosić około 120% pierwotnej wielkości tekstu w przeglądarce, co daje nam realną wielkość około 19 pikseli. Aby ją obliczyć musisz pamiętać o dziedziczeniu. Dziedziczenie może sprzyjać pisaniu dobrego kodu, jeśli tyko wiesz, jak działa i jak należy wykorzystać je na swoją korzyść.

Mądrze używaj kaskady

Dlaczego mówimy o kaskadowych arkuszach stylów? Ze względu na kaskadę. Mówiąc krótko, różne reguły CSS mają różne znaczenie - niektóre są ważniejsze i mogą nadpisywać inne. Po pierwsze, dzielimy je ze względu na miejsce wystąpienia. Style umieszczone bezpośrednio przy znaczniku mogą nadpisywać wszelkie inne. Następne w kolejności są style umieszczone w sekcji HEAD dokumentu, a dopiero po nich występują w hierarchii style w zewnętrznym pliku CSS.

Drugim elementem wpływającym na ważność reguł jest rodzaj selektora. Każdy z nich posiada tzw. specyficzność. Im wyższy jest jej poziom, tym ważniejsze jest selektor. Oto lista selektorów uszeregowana od najmniej ważnych:

• selektor gwiazdki - *
• selektor elementu - div, p, table
• selektor klasy - .niebieski, .prawo
• selektor identyfikatora - #menu, #lewo, #stopka
• selektor ważności - !important

Użycie !important powoduje, że dana reguła jest najważniejsza. Posiadając wiedzę na temat kaskady i specyficzności, łatwo unikniesz popularnych błędów i zaplanujesz kod CSS. Zawsze warto posiadać nawyk zwracania uwagi na specyficzność reguł.

Załóżmy, że posiadasz w stylach taką regułę:

1. p {
2.   background: red
3. }

Listing zwinięty - 3 linii

Jeżeli dla akapitów znajdujących się w prawej kolumnie chcesz stworzyć inny styl, to oczywiście możesz posłużyć się klasą:

1. .akapit_w_prawej_kolumnie {
2.   background: yellow
3. }

Listing zwinięty - 3 linii

Jednak nie jest to zbyt ergonomiczne rozwiązanie. Lepiej stworzyć taką regułę:

1. #prawo p {
2.   background: yellow
3. }

Listing zwinięty - 3 linii

W tej regule korzystamy z selektora identyfikatora oraz elementu. Upraszczając, ich specyficzność sumuje się i razem daje większą liczbę, niż samego selektora elementu. Co się jednak stanie, gdybyś chciał zmienić kolor jednego wybranego akapitu w prawej kolumnie? Możesz pomyśleć o użyciu klasy:

1. .niebieski {
2.   background: blue
3. }

Listing zwinięty - 3 linii

Niestety, to nie zadziała. Wcześniejsza reguła nadal jest ważniejsza. Musisz do reguły dodać elementy, które podniosą jej specyficzność:

1. #prawo p.niebieski {
2.   background: blue
3. }

Listing zwinięty - 3 linii

Drugim wyjściem jest skorzystanie z najważniejszego selektora:

1. .niebieski {
2.   background: blue!important
3. }

Listing zwinięty - 3 linii

Jak więc widzisz, znajomość specyficzności może pomóc uniknąć wielu potencjalnych problemów.

Dodawaj komentarze

Do kodu CSS możesz dodawać komentarze. Dobrze jest o tym pamiętać. Przykładowy komentarz wygląda tak:

/*treść komentarza*/

Do czego możesz ich używać? Na przykład do podziału dokumentu CSS na kilka sekcji lub wyjaśnienia rozwiązań o których wiesz, że mogą budzić twoje wątpliwości za jakiś czas. Komentarze mogą być też łatwo użyte do testowania różnych wersji kodu. Aktualnie nieużywany wystarczy objąć komentarzem.