Język CSS z pozoru wydaje się banalnie prosty. Nie jest on tak skomplikowany, jak typowe języki programowania. Jednak posiada możliwości, z których nie zawsze początkujący webmasterzy zdają sobie sprawę. Oto 7 najlepszych porad 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.
{ikona-nc01}
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:
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:
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:
A w arkuszu stylów CSS zapisać:
.czerwona_ramka {
border: 1px red
}
Powtórzmy to jeszcze raz. Fundamentalną zasadą, która znacznie ułatwia tworzenie stron jest rozdzielenie kodu HTML i CSS.
{ikona-nc02}
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:
background-image: url(/img/tlo.png);
background-position: top;
background-repeat: repeat-x;
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ść.
{ikona-nc03}
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ć:
#kolumna_lewa {
margin: 10px;
border: 2px dotted gray
padding: 5px;
background: white
}
#kolumna_prawa {
margin: 10px;
border: 1px solid blue;
padding: 5px;
background: white
}
Możesz napisać:
#kolumna_lewa, #kolumna_prawa {
margin: 10px;
padding: 5px;
background: white
}
#kolumna_lewa {
border: 2px dotted gray
}
#kolumna_prawa {
border: 1px solid blue
}
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.
{ikona-nc04}
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łę:
* {
padding: 0;
margin: 0
}
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:
img {
border: 0
}
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/thoughts/2007/05/01/reset-reloaded/. Warto przyjrzeć się bliżej opisanym tam poradom.
{ikona-nc05}
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:
body {
font-size: 0.79em;
font-family: Verdana, sans-serif
}
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:
h1 {
font-size: 1.5em
}
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ść.
{ikona-nc06}
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łę:
p {
background: red
}
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ą:
.akapit_w_prawej_kolumnie {
background: yellow
}
Jednak nie jest to zbyt ergonomiczne rozwiązanie. Lepiej stworzyć taką regułę:
#prawo p {
background: yellow
}
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:
.niebieski {
background: blue
}
Niestety, to nie zadziała. Wcześniejsza reguła nadal jest ważniejsza. Musisz do reguły dodać elementy, które podniosą jej specyficzność:
#prawo p.niebieski {
background: blue
}
Drugim wyjściem jest skorzystanie z najważniejszego selektora:
.niebieski {
background: blue!important
}
Jak więc widzisz, znajomość specyficzności może pomóc uniknąć wielu potencjalnych problemów.
{ikona-nc07}
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.
