CSS – Čo nás roky tvorby webov v ui42 naučili

CSS je neoddeliteľnou a dôležitou súčasťou vývoja webov dizajnu. O tom niet pochýb. Každý webový vývojár sa s ním stretáva pravidelne a viac či menej ho tvorí. Dôležitým faktorom každého CSS súboru je nielen jeho funkčnosť ale aj jeho čitateľnosť. Nečitateľný kód je nielen oveľa tažšie modifikovateľný ale aj chybovejší. Navyšše väčšinou sa s daným kódom skôr či neskôr stretnú aj další kolegovia  a keď nebude čitateľný pre vás ako tvorcu tak pre nich už určite nie. Preto sa pri jeho tvorbe snažme dodržiavať isté pravidlá. Uvádzam zopár najčastejšie odporúčaných v návodoch a tých ktoré sa nám v ui42 najviac osvedčili.

#1. CSS štýly „v riadku“ vs. „pod sebou“

Čo sa týka tohto pravidla, tak sa vývojári rozdeľujú na dva tábory. Tých ktorým vyhovuje štýl písania v riadku a tých čo píšu pod seba. Technicky sú obidva spôsoby správne. Návody a odporúčania sa však zhodujú na jednom: používajte ten spôsob ktorý najviac vyhovuje vám, no dôležité je aby bol jednotný, to znamená, že keď začnete v riadku, tak potom celé CSS v riadku a naopak.

V riadku:

#header ul li { color: red; margin: 10px; padding: 10px; }

Pod sebou:

#header ul li {
    color: red; 
    font: normal 10px/12px Arial; 
    margin: 10px; 
    padding: 10px;
}

#2. Používajte “Reset”

Pri tvorbe CSS sa určite stretne s tým že niektoré veci sa vám zobrazujú rôzne na rôznych prehliadačoch. Toto je jeden z najväčších problémov pri tvorbe HTML/CSS. Do istej miery sa však tento problém dá eliminovať používaním sady CSS pravidiel, ktoré vám zjednotia zobrazenie elementov medzi rôznymi prehliadačmi. Môžete si napísať svoje alebo použiť niektoré z už existujúcich, ktoré sa bežne používajú, sú voľne dostupné, vyskúšané a odladené.

Tie najznámejšie sú:

Mayerov reset:
   http://meyerweb.com/eric/tools/css/reset/index.html

Reset od Yahoo:

   http://yuilibrary.com/yui/docs/cssreset/

#3. Používajte skratky (ShortHands)

Vaše CSS tým značne odľahčíte. Skratky môžete používať najme pre štýly ako font, margin, padding a niektoré dalšie.

Štandardný zápis:

div { 
    font-family: Arial;
    font-weight: bold;
    font–size: 14px;
    line-height:16px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
}

Využitie skratiek:

div { 
    font-family: bold 14px/16px Arial;
    margin: 0 auto;
}

#4 Nepoužívajte typové selektory

V prípade že to nie je nutné, vyvarujte sa typovým selektorom.

Nesprávne:

ul#nav {...} 
div.wide {...}

Správne:

#nav {…}
.wide {…}

#5 Píšte správne (validne)

Vyhýbajte sa drobným zlozvykom pri tvorbe CSS. Nielenže to spraví váš kód správny ale bude aj pre ostatných zrozumiteľnejší:

• V selektoroch používajte pomlčku namiesto podtrhovníka.
• Za každou definíciou štýlu použite bodkočiarku.
• Medzi dvojbodkou a názvom štýlu nedávajte medzeru ale až za dvojbodku.
• Namiesto úvodzoviek používajte apostrofy.
• Nepíšte apostrofy (ani úvodzovky) okolo hodnoty v „url()“.

Tip na záver

Či už píšete CSS do riadku alebo pod sebou, zoraďujte si jednotlivé štýly podľa abecedy. Zo začiatku si na to musíte trochu zvyknúť, ale neskôr sa vám to zautomatizuje a uľahčí vám to orientáciu a vyhľadávanie medzi vašimi štýlmi.