Jaký je váš styl CSS?

Jedním z nejvíce matoucích aspektů práce s CSS (Cascading Style Sheets) je to, že můžete psát styly mnoha způsoby. Podobně jako při psaní prózy, to, že rozumíte základním pravidlům gramatiky a pravopisu, neznamená, že jste zvládli psaní stručné prózy.

Zkušení návrháři CSS tráví spoustu času vytvářením stručných a jasných CSS, které lze snadno upravovat a aktualizovat. Ale ti, kteří jsou v CSS noví, mají sklon psát více stylů, než je nutné, a vytvářet nadbytečné styly.

Nejen, že stahování redundantního kódu do webového prohlížeče trvá déle, ale je mnohem obtížnější jej později upravovat nebo revidovat. A čím je váš kód redundantnější, tím je pravděpodobnější, že narazíte na konflikty stylů.

Zde je pět tipů pro psaní čistých a efektivních stylů:

• Nikdy nevytvářejte dva styly, když jeden stačí. Můžete například vytvořit styl pomocí selektoru značek pro všechny

  tagy, které změní rodinu písem vašich nadpisů, a poté vytvořte druhý styl pomocí selektoru třídy, který můžete použít na nadpisy a změnit barvu.

  Ale efektivnější by bylo definovat barvu i rodinu písem ve stejném stylu. Pamatujte, že pokud chcete změnit formátování stylu, vždy se můžete vrátit a upravit styl a přidat další pravidlo.

• Zkraťte hexadecimální kódy barev. Barvy můžete definovat v CSS zahrnutím celého hexadecimálního kódu barvy. Pokud však používáte barevné kódy, které se opakují, musíte zahrnout pouze první tři znaky. Například #ffffff je totéž jako #fff; obojí vytvoří bílou barvu.

• Použijte externí šablony stylů. Styly můžete definovat v interní šabloně stylů v horní části každé webové stránky nebo můžete styly uložit do externího souboru s příponou .css a připojit tuto šablonu stylů ke všem svým webovým stránkám. Externí šablony stylů jsou ze své podstaty efektivnější, protože vám umožňují používat stejný styl na kterékoli nebo všech stránkách vašeho webu.

  Pokud například definujete styl, díky kterému budou všechny hlavní nadpisy tučné, modré a velké, uložení tohoto stylu do externí šablony stylů vám umožní použít stejný styl pro každý nadpis. Pokud se později rozhodnete, že chcete změnit své nadpisy na zelené, můžete změnit styl v jedné externí šabloně stylů a změnit všechny nadpisy najednou.

  Pokud byste styly uložili do interní šablony stylů, museli byste upravit styl nadpisu v každém souboru.

• Vytvořte konvenci pojmenování pro své styly. Ačkoli můžete styly vytvořené pomocí selektorů třídy nebo ID pojmenovat jakkoli, nejlepší je vybrat styly, které mají význam kromě formátování. Pokud například vytvoříte styl nazvaný .redHeadlines a později se rozhodnete, že chcete, aby všechny vaše .redHeadlines byly modré, buď skončíte s modrým stylem nadpisu s názvem .redHeadlines, nebo budete muset styl přejmenovat.

  A přejmenování stylu zahrnuje návrat a opětovné použití tohoto stylu všude, kde máte červený nadpis, který chcete zmodrat, což tak trochu neguje sílu stylů provádět globální aktualizace. Chcete-li se tomuto problému vyhnout, vytvořte názvy stylů, které odkazují na pozici nebo důležitost prvků, například .mainHeadlines nebo .sidebarHeadlines.

• * Otestujte a ověřte svůj kód. I zkušení návrháři CSS dělají chyby, a proto Dreamweaver obsahuje tolik skvělých nástrojů pro testování a ověřování kódu na vašich webových stránkách. Ujistěte se, že jste svůj CSS otestovali na běžné chyby.

  Následují dvě online testovací služby, které můžete použít ke kontrole chyb v kódu CSS. Jednoduše zadejte adresu URL jakékoli webové stránky na internetu do pole adresy na kterékoli z těchto stránek a klikněte na tlačítko Odeslat, abyste obdrželi zprávu s případnými chybami ve vašem kódu:

  • W3C CSS Validation Service

  • XHTML-CSS : Buď platný, nebo zemři učení