CSS je nedílnou a důležitou součástí vývoje webového designu. O tom není pochyb. Každý webový vývojář se s ním setkává pravidelně a více či méně ho tvoří. Důležitým faktorem každého CSS souboru je nejen jeho funkčnost ale i jeho čitelnost. Nečitelný kód je nejen mnohem těžší modifikovatelný ale i chybovější. Navíc většinou se s daným kódem dříve či později setkají i další kolegové a když nebude čitelný pro vás jako tvůrce tak pro ně už určitě ne. Proto se při jeho tvorbě snažme dodržovat určitá pravidla. Uvádím několik nejčastěji doporučovaných v návodech a těch které se nám v ui42 nejvíce osvědčily.
#1. CSS styly „v řádku“ vs. „pod sebou“
Co se týče tohoto pravidla, tak se vývojáři dělí na dva tábory. Těch kterým vyhovuje styl psaní v řádku a těch co píší pod sebou. Technicky jsou oba způsoby správné. Návody a doporučení se však shodují na jednom: používejte ten způsob který nejvíce vyhovuje vám, ale důležité je aby byl jednotný, to znamená, že když začnete v řádku, tak potom celé CSS v řádku a naopak.
V řádku:
#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žívejte “Reset”
Při tvorbě CSS se určitě setkáte s tím že některé věci se vám zobrazují různě na různých prohlížečích. To je jeden z největších problémů při tvorbě HTML/CSS. Do jisté míry se však tento problém dá eliminovat používáním sady CSS pravidel, které vám sjednotí zobrazení elementů mezi různými prohlížeči. Můžete si napsat své nebo použít některé z již existujících, které se běžně používají, jsou volně dostupné, vyzkoušené a odladěné.
Nejznámější jsou:
Mayerův reset:
http://meyerweb.com/eric/tools/css/reset/index.html
Reset od Yahoo:
http://yuilibrary.com/yui/
#3. Používejte zkratky (ShortHands)
Vaše CSS tím značně odlehčíte. Zkratky můžete používat hlavně pro styly jako font, margin, padding a některé další.
Standardní 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žití zkratky:
div {
font: bold 14px/16px Arial;
margin: 0 auto;
}
#4 Nepoužívejte typové selektory
V případě že to není nutné, vyvarujte se typovým selektorům.
Nesprávně:
ul#nav {...}
div.wide {...}
Správně:
#nav {…}
.wide {…}
#5 Pište správně (validně)
Vyvarujte se drobným zlozvykům při tvorbě CSS. Nejenže to udělá váš kód správný ale bude i pro ostatní srozumitelnější:
- V selektorech používejte pomlčku místo podtržítka.
- Za každou definicí stylu použijte středník.
- Mezi dvojtečkou a názvem stylu nedávejte mezeru ale až za dvojtečku.
- Místo uvozovek používejte apostrofy.
- Nepište apostrofy (ani uvozovky) okolo hodnoty v „url()“.
Tip na závěr
Ať už píšete CSS do řádku nebo pod sebou, řaďte si jednotlivé styly podle abecedy. Ze začátku si na to musíte trochu zvyknout, ale později se vám to zautomatizuje a usnadní vám to orientaci a vyhledávání mezi vašimi styly.
