Aký je váš štýl CSS?

Jedným z najviac mätúcich aspektov práce s CSS (Cascading Style Sheets) je, že štýly môžete písať mnohými spôsobmi. Podobne ako pri písaní prózy, to, že rozumiete základným pravidlám gramatiky a pravopisu, neznamená, že ovládate písanie stručnej prózy.

Skúsení dizajnéri CSS trávia veľa času vytváraním krátkych a jasných CSS, ktoré sa dajú ľahko upravovať a aktualizovať. Ale tí, ktorí sú v CSS noví, majú sklon písať viac štýlov, ako je potrebné, a vytvárať nadbytočné štýly.

Nielenže sa nadbytočný kód sťahuje do webového prehliadača dlhšie, ale je oveľa ťažšie ho neskôr upravovať alebo revidovať. A čím je váš kód redundantný, tým je pravdepodobnejšie, že narazíte na konflikty štýlov.

Tu je päť tipov na písanie čistých a efektívnych štýlov:

• Nikdy nevytvárajte dva štýly, keď stačí jeden. Môžete napríklad vytvoriť štýl pomocou selektora tagov pre všetky

  tagy, ktoré zmenia rodinu písiem vašich nadpisov, a potom vytvorte druhý štýl pomocou selektora triedy, ktorý môžete použiť na nadpisy a zmeniť farbu.

  Bolo by však efektívnejšie definovať farbu aj rodinu písiem v rovnakom štýle. Pamätajte, že vždy sa môžete vrátiť a upraviť štýl a pridať ďalšie pravidlo, ak chcete zmeniť formátovanie štýlu.

• Skrátiť hexadecimálne farebné kódy. Farby môžete definovať v CSS zahrnutím celého hexadecimálneho kódu farby. Ak však používate farebné kódy, ktoré sa opakujú, musíte zahrnúť iba prvé tri znaky. Napríklad #ffffff je to isté ako #fff; oboje vytvorí bielu farbu.

• Použite externé predlohy štýlov. Štýly môžete definovať v internej šablóne so štýlmi v hornej časti každej webovej stránky alebo môžete štýly uložiť do externého súboru s príponou .css a priložiť túto šablónu štýlov ku všetkým svojim webovým stránkam. Externé šablóny štýlov sú vo svojej podstate efektívnejšie, pretože vám umožňujú použiť rovnaký štýl na ľubovoľnej alebo všetkých stránkach vašej lokality.

  Ak napríklad definujete štýl, vďaka ktorému budú všetky hlavné nadpisy tučné, modré a veľké, uloženie tohto štýlu do externej šablóny štýlov vám umožní použiť rovnaký štýl pre každý nadpis. Ak sa potom neskôr rozhodnete, že chcete zmeniť svoje nadpisy na zelené, môžete zmeniť štýl v jednej externej šablóne štýlov a zmeniť všetky nadpisy naraz.

  Ak by ste štýly uložili do internej šablóny so štýlmi, museli by ste upraviť štýl nadpisu v každom súbore.

• Vytvorte konvenciu pomenovania pre svoje štýly. Hoci štýly vytvorené pomocou selektorov triedy alebo ID môžete pomenovať akokoľvek, najlepšie je vybrať štýly, ktoré majú význam okrem formátovania. Napríklad, ak vytvoríte štýl s názvom .redHeadlines a neskôr sa rozhodnete, že chcete, aby všetky vaše .redHeadlines boli modré, buď skončíte s modrým štýlom nadpisu s názvom .redHeadlines, alebo budete musieť štýl premenovať.

  A premenovanie štýlu zahŕňa návrat a opätovné použitie tohto štýlu všade, kde máte červený nadpis, ktorý chcete zmeniť na modrý, čo tak trochu neguje silu štýlov vykonávať globálne aktualizácie. Ak sa chcete tomuto problému vyhnúť, vytvorte názvy štýlov, ktoré odkazujú na pozíciu alebo dôležitosť prvkov, ako napríklad .mainHeadlines alebo .sidebarHeadlines.

• * Otestujte a overte svoj kód. Aj skúsení dizajnéri CSS robia chyby, a preto Dreamweaver obsahuje toľko skvelých nástrojov na testovanie a overovanie kódu na vašich webových stránkach. Uistite sa, že ste svoj CSS otestovali na bežné chyby.

  Nasledujú dve online testovacie služby, ktoré môžete použiť na kontrolu chýb v kóde CSS. Jednoducho zadajte adresu URL ľubovoľnej webovej stránky na internete do poľa adresy na ktorejkoľvek z týchto stránok a kliknite na tlačidlo Odoslať, aby ste dostali hlásenie s prípadnými chybami vo vašom kóde:

  • W3C CSS Validation Service

  • XHTML-CSS : Buď platný, alebo zomri učenie