ID pro body tag
Pokud se vám podaří donutit programátory, aby předávali ID stránky podle pravidel, která určíte, bude se vám velmi snadno spravovat odlišný vzhled stránek. Například pro různé sekce webu potřebujete odlišně barevné záhlaví a podsekce menu. Pokud budete mít ID stránky v body, můžete tím krásně řídit celou barevnost webu a nemusíte myslet na to, v které šabloně jste zapomněli napsat správné třídy.
Oddělte CSS hacky
Pokud vám nezbude jiná možnost a jste donuceni použít CSS pro odlišné prohlížeče, oddělte je do samostatných souborů a ty volejte pomocí podmíněných komentářů.
<!--[if lte IE 6 ]>
<link rel="stylesheet" type="text/css" href="css/ie6.css" />
<![endif]-->
<!--[if IE 7 ]>
<link rel="stylesheet" type="text/css" href="css/ie7.css" />
<![endif]-->
Použijte @import
Pokud pro vložení CSS použijete direktivu @import, bezpečně odříznete velmi staré prohlížeče, jako IE4 a Netscape 4, které mají velmi špatnou podporu CSS a je mnohem lepší pro ně zobrazit pouze strukturovaný html dokument.
Použít “master” CSS dokument?
K použití master CSS dokumentu – tedy CSS souboru, který sám o sobě obsahuje pouze importy dalších CSS souborů jako CSS pro fonty, CSS pro layout, CSS pro všeobecné třídy, mám dvě výhrady. Jednak každým souborem navíc zvyšujete počet HTTP požadavků (což vám bude jedno na prezentaci firmy, kam přijde maximálně několik desítek návštěvníků denně) a hlavně – pokud rozdělovat CSS dokumenty, tak jsem spíš pro logické než strukturální dělení, tedy zvlášť CSS pro layout, barvy a fonty a zvlášť CSS pro samostatné sekce – např. homepage, detail produktu, kontakty. Zde je ovšem opět nutná součinnost programátorů, aby příslušná CSS volali dle sekce kde se návštěvník nachází, pokud by jste CSS vkládali najednou a sekce rozdělovali pode ID body (například), tak vám raději doporučuji použít jeden CSS soubor. Výhodou jednoho CSS souboru je také rychlá orientace při editaci a možnost rychle něco najít pomocí hledání v editoru.
Zkracujte zápis CSS
CSS v mnohých případech dovoluje použít zkráceného zápisu. Výhody – ušetříte datovou náročnost a zvýšíte čitelnost vašeho CSS dokumentu.
Například:
margin-top: 2em;
margin-right: 6px;
margin-bottom: 0;
margin-left: 1em;
Lze zapsat jako:
margin: 2em 6px 0 1em;
Není to přehlednější?
Víte například že mnoho definic písma lze zapsat do následujícího krásně zkráceného zápisu?
font: oblique small-caps 900 12px/14px arial, sans-serif;
Definujte si barvy
Na začátku CSS dokumentu si v zakomentovaném bloku vypište všechny použitelné barvy a kde se používají. Nic nezdržuje víc, než se neustále přepínat do Photoshopu a kapátkem chytat barvy. Dobře popište kde se barvy používají, včetně kombinací barva/pozadí. Pokud vám grafik poslal návrh, kde odkazy mají šest různých modrých odstínů, klidně mu to vraťte – i v Photoshopu si můžete definovat vlastní paletku barev.
Odsazujte tabelátorem
Dlouho mě vůbec nenapadlo odsazovat celé bloky kódu podle logického zanoření v DOMu. Když jsem objevil onu pověstnou Ameriku, tak jsem zjistil že se jedná o jednu z nejlépe zpřehledňujících technik. Kdykoliv budete hledat nějakou definici, nebo budete nějakou potřebovat dopsat, najdete velmi rychle místo kam patří.
#head {
background: #fff;
}
#head p {
margin: 0;
}
#head a {
text-decoration: underline;
}
#head a span {
font-weight: bold;
}
Jak řadit CSS vlastnosti?
Každý kodér si časem najde svůj vlastní způsob jak píše pořadí vlastností. Například já, když mám nějaký element, kterému nastavují šířku, výšku a float, tak je do CSS píšu přesně v pořadí jako jsem napsal v této větě. No jo, ale co když hrozí že na CSS se bude podílet víc lidí, nebo že v budoucnu bude mít správu pod palcem někdo jiný než vy? Asi nejjednodušší je vypisovat CSS vlastnosti abecedně.
Vnitřní rozdělení CSS dokumentu
CSS dokument je dobré členit do logických celků a dle kaskády. Mě se osvědčilo jako první vypisovat HTML entity (p, ul, a), následuje layout (a tedy všechny prvky na stránce) a na konci dokumentu mám sekci “všeobecných” tříd se samovysvětlujícími názvy jako .bold, .noborder, .red.
Obsah
I když zrovna nepíšeme knihu, je dobré uvést na prvním místě obsah dokumentu. Kde máte jaké části layoutu, případně vypsat jejich hlavní ID. Také každou sekci v dokumentu uvádějte vizuálně dobře viditelným komentářem, aby se dalo při rychlém scrolování dokumentem dobře orientovat.
V pracovním CSS buďte velkorysí, v produkčním skoupí
Vždy si veďte dvě verze CSS dokumentu – vaší pracovní, která bude také sloužit ke všem budoucím úpravám a produkční, do které se nikdy nic neupravuje, pouze slouží k linkování z webu. V pracovní verzi nemusíte šetřit místem, dělejte vizuální odrážky pomocí komentářů, nebojte se vynechat řádek za logickým celkem definic stylů. Až bude potřeba hodit CSS dokument na ostrý web, prožeňte vaše CSS nějakým nástrojem na kompresi – dejte do Google “CSS compressor” a uvidíte že je z čeho vybírat. Nejen že se zefektivní velikost vašeho dokumentu (všeobecně lze říct že v rozmezí 10 až 30%), ale také vyhodíte všechny komentáře, které nejsou pro provoz na ostrém webu vůbec podstatné.