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:

1

<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:

1

<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
2

<div class="czerwona_ramka">
</div>

A w arkuszu stylów CSS zapisać:

1
2
3

.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:

1
2
3

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

Możesz je także zapisać jako:

1

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ć:

1
2
3
4
5
6
7
8
9
10
11
12
13

#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ć:

1
2
3
4
5
6
7
8
9
10
11
12
13

#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łę:

1
2
3
4

* {
  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:

1
2
3

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:

1
2
3
4

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:

1
2
3

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łę:

1
2
3

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ą:

1
2
3

.akapit_w_prawej_kolumnie {
  background: yellow
}

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

1
2
3

#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:

1
2
3

.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ść:

1
2
3

#prawo p.niebieski {
  background: blue
}

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

1
2
3

.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:

1

/*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.

Może Cię zainteresować:

1. HTML i CSS – Optymalizacja kodu CSS
2. Przyciski rollover w CSS
3. eSportowa liga mistrzów