Idealny kod CSS powinien być odpowiednio zoptymalizowany, aby zajmował jak najmniej miejsca i był zarazem jak najbardziej przejrzysty. Prócz doświadczenia, pomocne może się okazać użycie kilku sprytnych sztuczek.
Podział kodu na sekcje
Sam arkusz stylów warto podzielić na kilka oddzielnych sekcji za pomocą zwykłych komentarzy.
Zapewne wiesz, jak wygląda typowy CSS-owy komentarz:
/* To jest komentarz */
W twoim arkuszu stylów wyodrębnij kilka oddzielnych części. Osobną na ogólne definicje,osobną na podstawowe elementy konstrukcyjne układu strony, a jeszcze inną na definicje czcionek. Oto przykład podziału arkusza, jaki czasem stosuję:
/* Ogólne */
/* Elementy konstrukcyjne */
/* Lewa kolumna */
/* Prawa kolumna */
/* Nagłówki */
/* Linki */
/* Czcionki */
/* Formularze */
/* Tabele */
/* Inne */
Użyj kilku arkuszy stylów
Dobrym pomysłem jest również podzielenie arkusza
stylów na kilka oddzielnych plików. Metoda ta sprawdza się, gdy część twoich stylów odnosi się tylko i wyłącznie do określonych podstron serwisu.
Przywołajmy tu przykład typowego bloga uruchamianego na popularnym skrypcie WordPress (http://wordpress.org).
Szablon strony z wpisem zawiera kilka elementów, których nie ma w szablonie strony głównej i kategorii. Wobec tego warto style dla tych elementów umieścić w oddzielnym arkuszu i dołączać tylko wówczas, gdy rzeczywiście istnieje taka potrzeba.
Metody łączenia właściwości
Gdy tylko jest to możliwe, należy łączyć ze sobą kilka właściwości. Omówimy to zagadnienie na podstawie właściwości MARGIN. Dla czterech boków akapitu margines można zdefiniowaćw następujący sposób:
p {
margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 12px
}
Jednak znacznie lepszy efekt dałoby skrócenie wszystkich czterech właściwości do prostszej postaci:
p {
margin: 10px 15px 20px 12px
}
Zawsze rób to zgodnie z poniższą kolejnością:
p {
margin: góra prawo dół lewo
}
Boki można także ująć w dwie pary, góra–dół i prawo–lewo, jeśli wielkości marginesów dla tych par są identyczne. Czyli zapis:
p {
margin: 20px 10px 20px 10px
}
możesz bez problemu zamienić na następujący:
p {
margin: 20px 10px
}
Powyższy sposób możesz zastosować także do łączenia właściwości PADDING i BORDER.
Kolejną metodę łączenia ze sobą kilku właściwości omówimy
na przykładzie wartości związanych z tłem:
body {
background-image: url(tlo.png);
background-position: right;
background-attachment: fixed;
}
Ustaliliśmy tło dla BODY, przesunęliśmy je na prawą stronę i sprawiliśmy, że nie nie zmienia pozycji podczas przewijania okna przeglądarki. Niestety jest to dosyć rozwlekły zapis. Lepiej będzie w takiej sytuacji wykorzystać jedną właściwość BACKGROUND:
body {
background: url(tlo.png) right fixed
}
Prawda, że kod teraz prezentuje się o wiele lepiej?
Łączenie kilku selektorów
Oprócz łączenie ze sobą właściwości warto także pamiętać o łączeniu selektorów, które mają takie same właściwości i wartości. Przyjrzyjmy się przykładowemu zestawowi selektorów:
h2 {
font-size: 1em;
color: red
}
h3 {
font-size: 1em;
color: red
}
Można je łatwo połączyć ze sobą, używając tylko jednego przecinka:
h2, h3 {
font-size: 1em;
color: red
}
Ponownie widać, że kod stał się bardziej zwarty, a jednocześnie zyskał na przejrzystości.
Pamiętaj – kilka szczegółów może się wydawać nieistotnych. Jednak kilkadziesiąt szczegółów połączonych razem tworzy już zupełnie nową jakość. Dlatego nie można ignorować zabałaganionego kodu CSS. Nawet jeżeli strona wczytuje się poprawnie, to nie znaczy, że nie zasługuje na uwagę i porządek. Dopiero po takich detalach da się poznać klasę prawdziwego webmastera.
Zdarza się, że nawet kod CSS pisany przez fachowca od lat tworzącego strony WWW jest nieprzejrzysty, ma zbyt rozrośniętą i trudną do zrozumienia strukturę. Niesie to za sobą negatywne skutki, które mogą być niezauważalne przy krótkowzrocznym sposobie patrzenia, ale mają niepodważalne znaczenie, jeśli spojrzysz na tą sprawę długoterminowo, w perspektywie nawet kilku lat. Zadaj sam sobie kilka istotnych pytań. Czy twój kod CSS jest łatwy do zrozumienia dla kogoś innego?
Czy aby na pewno już na pierwszy rzut oka wiesz, co oznacza dany fragment? Czy po roku lub dwóch nie masz problemów ze zrozumieniem tego, co sam napisałeś? Czy możesz bez żadnych obaw przekazać komuś innemu dalszą opiekę nad stroną?
Czy obawiasz się, że przy najmniejszej zmianie cała twoja strona może się nagle rozsypać? Jeżeli te pytania nie dają ci spokoju, warto, abyś poznał sposoby na optymalizację kodu CSS.
Jeżeli twój kod nie budzi wątpliwości, możesz się uważać za szczęśliwą osobę, ale być może w tym artykule znajdziesz wskazówki, które pomogą
ci jeszcze bardziej się rozwinąć.
Sposób zapisu
Pierwszą, najprostszą kwestią związaną z optymalizacją
CSS jest sam sposób zapisu reguł. Przede wszystkim powinieneś pamiętać o odpowiednich wcięciach. Jest to podstawowy element zwiększający
przejrzystość kodu. Ja stosuję najczęściej taki format:
selektor {
właściwość1: wartość1;
właściwość2: wartość2
}
Niektórzy stosują inny rodzaj zapisu, przenosząc
nawias do nowej linii:
selektor
{
właściwość1: wartość1;
właściwość2: wartość2
}
Albo też jego wariację:
selektor
{
właściwość1: wartość1;
właściwość2: wartość2
}
Który z nich jest najlepszy? Na to pytanie nie można udzielić jednoznacznej odpowiedzi. Najlepszy
jest zawsze ten, który jest najwygodniejszy dla ciebie. Natomiast na pewno zła jest metoda zapisu bez wcięć:
selektor {
właściwość1: wartość1;
właściwość2: wartość
}
Mocno zmniejsza ona przejrzystość kodu. Jeszcze gorszym rozwiązaniem jest kod, w którym ograniczono liczbę przejść do nowej linii:
selektor {
właściwość1: wartość1; właściwość2: wartość2
}
Niestety takie potworki często produkują różnego rodzaju edytory, które kuszą możliwościami pomocnymi przy szybkim tworzeniu własnej strony. Jak się okazuje, ta prostota może mieć z czasem poważne konsekwencje. Przeglądanie takiego kodu nawet po krótkim czasie od jego napisania jest prawdziwą mordęgą. O tym, aby poprawić ten kod po kilku latach od jego powstania, lepiej nawet nie myśleć.
Kwestią dyskusyjną jest natomiast, czy należy w zapisie kodu CSS stosować odstępy przy nawiasach i dwukropkach.
Możesz uznać, że wygodniejszy
jest dla ciebie taki sposób jego formatowania:
selektor{
właściwość1:wartość1;
właściwość2:wartość2
}
Moim zdaniem zmniejsza to czytelność kodu, ale jest to kwestia bardzo indywidualna. Pamiętaj zawsze, że dopracowanie własnego sposobu wymaga
czasu i eksperymentowania. Słuchaj swojej intuicji.
