5 kroků do CSS nebe

Se psaním CSS je stejné jako se sexem. Ne každý to dělá správně i když ví, jak by se to mělo dělat. W3C má několik standartů, ale na druhou stranu je psaní CSS individuální a každý to řeší po svém. Zde je 5 malých tipů a nápadů k vytváření vašeho přehledného, uspořádaného CSS. A díky tomu se přiblížit k CSS heaven (CSS nebe).

1) Vytvořte si přehlednou tabulku

Úplně nahoře vašeho CSS dokumentu, napište mimo přehlednou tabulku. Například, ve vašem návrhu jsou tři různé oblasti, které chcete dát do stylu (hlavička, obsah, zápatí atd). Tak použijte mezi nima velkou a zřetelně oddělenou část.  Nejen kvůli tomu, aby váš dokument vypadal čístě. Ale hlavně, pokud budete chtít upravit později něco v určité části webu, víte kde to máte hledat.

Podivejte se na příkladný soubor 1

2) Oddělte poziční vlastnosti od typografických vlastností Proč? Je to jedna z povinností úpravy dokumentu. Ale je to taky důležité kvůli úpravě typografických vlastností. Pokud měníte typografické, poziční vlastnosti ve vašem CSS dokumentu. Můžete objevit, že se zbytečně opakujete.

Podívejte se na příkladný soubor 2

3) Izolujte jednotlivé vlastnosti, které používate často

Když sám objevíte něco, co často využíváte. Není nic lepšího, než to spojit s ostatními části využívající stejnou vlastnost. Ale dávejte si pozor, že když změníte vlastnost, změníte jí u všech částí.  

Podívejte se na příkladný soubor 3

4) Důkladně to přezkoušejte v online CSS kompresoru

Ale ne na to co myslíte. Moc nevěřím v CSS kompresoru, a často náklad (ztráta lidské čitelnosti) ubere několik Kb z vašeho CSS souboru je lepší než prospěch (nepatrně rychlejší stahování). Nicméně, můžou udělat dobrý zdrojový kód pro naučení nových triků – několik metod jak srazit velikost vašeho CSS souboru méně extrémní cestou.

5) Naučte se využívat přirozeného kaskádování CSS

Tento bod je samozřejmostí, ale občas je přehlížen. Ale doporučuji vám udělat si dva rozdílné boxy na stránce – jeden s použitím CSS a druhý bez stylu. A uvidíte ten rozdíl.

Podívejte se na příkladný soubor 5

Zdroj: Pingmag