Artykuł

flickr.com/photos/mauriz/4059476052 flickr.com/photos/mauriz/4059476052
sty 17 2014
0

Jak uniknąć podstawowych błędów przy tworzeniu arkusza CSS

CSS jest specyficznym językiem, który wywołuje skrajnie różne emocje. Wielu uważa, że jest on bardzo prosty, inni gubią się we wszelkiej maści selektorach dostępnych w tej technologii. Jedno jest pewno - sporo grono użytkowników używa go źle i choć często ich kod CSS działa, to w praktyce nie jest on do końca optymalny.

Sam nie uważam się za eksperta CSS, ale przeżyłem już kilka solidnych refaktoryzacji swoich projektów i wyciągnąłem z tego parę istotnych, w moim odczuciu wniosków z tych działań. Dziś mam zamiar się nimi z Wami podzielić. Z pewnością wiele z tych zasad i reguł już znacie, ale mimo wszystko wierzę, że każdy znajdzie coś dla siebie;-)

Czyszczenie domyślnych reguł przeglądarki

Każda z przeglądarek posiada domyślny zestaw stylów, które dla konkretnych znaczników posiadają pewne określone wartości. Dla przykładu, jeśli nie ustawimy właściwości font-family dla paragrafu, to wyświetlając go w dowolnej przeglądarce zobaczymy tekst napisany czcionką szeryfową (z reguły pierwszy na liście jest Times New Roman) o wielkości 16px.

Spójrzcie na powyższy obrazek. Jak widać, mamy tu gotowy zestaw styli, mimo że nie napisaliśmy sami ani jednej linijki kodu CSS! Na domiar złego, użytkownik może zmienić domyślne style przeglądarki i naprawdę nie jest to trudne. W Firefoksie wystarczy wejść na kartę Treść w oknie dialogowym opcji. Nie muszę mówić, jak katastrofalne może przynieść efekty, ciekawski użytkownik w akcji.

Jak widać, domyślne style przeglądarki są naprawdę rozbudowane, dlatego czasem, by uzyskać pełną kontrolę nad własną stroną, tworzy się swego rodzaju kod resetujący:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li, img,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, canvas, details, figcaption, figure, footer, header, 
hgroup, menu, nav, section, summary {
    border: 0;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
    text-decoration: none;
}

Autorem tego rozwiązania jest Eric Meyer, ceniona sława w obszarze CSS. Osobiście polecam stosowanie powyższego snippetu, ponieważ dzięki takiemu podejściu, możemy bezstresowo tworzyć większość własnych reguł, bez obawy że przy linku pojawi się podkreślenie, a przy jakimś divie nieoczekiwany border.

Display:block dla elementów HTML5 w starszych przeglądarkach

HTML w wersji piątej wprowadził wiele nowych, semantycznych znaczników do języka, z którymi niektóre starsze przeglądarki mogą mieć problem. Czasem pomocny był skrypt html5shiv (pisałem już o nim wcześniej tutaj), ale w wielu przypadkach problem dało się łatwo rozwiązać za pomocą reguł CSS, które ustawiały odpowiednią wartość właściwości display. Spójrzcie na poniższy kod:

article, canvas, details, figcaption, figure, footer, header, 
hgroup, menu, nav, section, summary {
    display: block;
}

Prosta reguła, która w wielu przypadkach załatwia sprawę niewyświetlających się znaczników strukturalnych;-)

Efektywne dziedziczenie

Dziedziczenie jest tą działką, która obok reguł domyślnych może sprawić najwięcej problemów wśród początkujących programistów CSS. Tworząc arkusze styli niestety łatwo o tym zapomnieć.

Podczas wytwarzania kodu HTML oraz CSS, warto na dokument spojrzeć jak na drzewo. Mamy tutaj więc kolejne zagnieżdżone znaczniki, które dziedziczą ustawienia CSS po swoich rodzicach. W praktyce działa to tak, że mając strukturę body - div - p, szukamy najpierw czy określona właściwość występuje w paragrafie, w przypadku gdy jej tam nie znajdziemy zaglądamy do diva, a w skrajnym przypadku do body.

body{
	font-family: Verdana;
}

div{
	/* Odziedziczona Verdana */
}

p{
	/* Odziedziczona Verdana */
}

Zakładając że na naszej stronie mamy wszędzie tą samą czcionkę, wystarczy ustawić właściwość font-family w znaczniku body, a wszystkie pozostałe znaczniki otrzymają ją niczym mannę z nieba;-)

Dziedziczenie jest esencją CSS i odpowiednio z niego korzystając można zaoszczędzić masę kodu oraz problemów. Tworząc nowy arkusz, warto logicznie go rozplanować i konkretne reguły umieszczać możliwie najwyżej. Jeśli dla przykładu na stronie w 30 miejscach będziemy używać jednej czcionki, a tylko jeden element (np. logo) będzie korzystał z innego kroju, to warto w takim przypadku główną czcionkę zdefiniować w znaczniku body i przykryć ją odpowiednią regułą dla logo:

body{
	font-family: Verdana;
}

#my-page-logo{
	font-family: Arial;
}

Uważaj na klasy!

Klasy są niebezpieczne, bo w przeciwieństwie do identyfikatorów mogę one pojawiać się wiele razy na jednej stronie. Z ich tworzeniem wiąże się wiele pułapek:

  • Zbyt pospolite nazwy - zastosowanie klas o nazwie bold, underline itp. bywa niebezpieczne i stwarza ryzyko zdublowania kodu
  • Treść nieodpowiadająca nazwie - często tworząc klasę, przypasowujemy ją do kilku elementów i z czasem dokładamy jej kolejne właściwości. Później pierwotna nazwa często przestaje odzwierciedlać to, co dana klasa miała w istocie przekazywać, a sama klasa jest przerośniętą kobyłą
  • Zbyt szczegółowe klasy - czasem warto rozdzielić jedną dużą klasę na kilka mniejszych, które dzięki temu będzie można wykorzystać w innych miejscach kodu

Projektując klasy warto również pamiętać o kilku ważnych regułach:

  • Dublowanie nazw jest możliwe, o ile poszczególne klasy nie będą wchodzić sobie w paradę - innymi słowy, klasy muszą mieć różny zasięg, a ten najłatwiej ograniczyć poprzez wstawienie klasy w hierarchię określonego id
    #persons-table td.row-hover{
    	background: #123;
    }
    
    #marks-table td.row-hover{
    	background: #456;
    }
  • Nazwa klasy musi być pisana ciągiem - obojętnie czy będzie to styl wielbłądzi, czy też zastosujemy separację elementów za pomocą myślnika, ważne by nazwa klasy jak najlepiej odzwierciedlała jej zadania
    .thisWorks{
    	/* rules */
    }
    
    .this-also-works{
    	/* rules */
    }
  • Do każdego elementu możemy przypisać dowolną liczbę klas (wystarczy oddzielić je spacją), dzięki czemu możemy rozwiązać wspomniany wyżej problem zbyt szczegółowej klasy. Istotą klasy jest fakt, że jest ona używana w kodzie przynajmniej w kilku miejscach
    <p class="header-text highlighted">Lorem ipsum...</p>

Porządkuj, refaktoryzuj i komentuj

Warto co jakiś czas przysiąść i zrefaktoryzować napisany wcześniej kod. CSS ma stałą tendencję do bałaganienia się, ale jeśli poświęcimy mu choćby odrobinę uwagi, to z pewnością będzie lepiej.

Nie bójcie się również komentować swojego kodu. Komentarz i tak wyleci przy zastosowaniu narzędzi pokroju YUI Compressor, ale Wam bardzo się przyda w późniejszej developerce.

Pewnym rozwiązaniem jest również zastosowanie narzędzi CSS pokroju less oraz Sass, które umożliwiają pisanie bardziej przejrzystego kodu CSS, który wykorzystuje zmienne itp.

Minimalizuj wynikowy kod

Zwieńczeniem pracy przy kodzie, powinna być jego kompresja. Ja osobiście od dawno korzystam z YUI Compressora, o którym pisałem już w akapicie wyżej. Jego zastosowanie daje wymierny rezultat w wynikowym pliku który potrafi być mniejszy o dobre kilkadziesiąt procent (jego efektywność zależy po części odrobinę od Twojego stylu kodowania). Oprócz minimalizacji źródła, narzędzie to ma jeszcze jedną dodatkową zaletę - zaciemnia cały nasz napisany kod CSS, dzięki czemu istnieje mniejsze prawdopodobieństwo, że ktoś sobie pożyczy wybrane konstrukcje CSS:-)

Podoba Ci się ten wpis? Powiedz o tym innym!

Send to Kindle

Komentarze

blog comments powered by Disqus