Kaskádové šablony stylů se staly standardním způsobem úpravy a rozvržení webových stránek. Návrháři používají šablony stylů sdělit prohlížeči, jak by měl být web zobrazen, pokud jde o vzhled a chování, pokrývající takové faktory, jako je barva, mezery, písma a mnoho dalšího.
Styly CSS se nasazují dvěma způsoby:
- Inline - v rámci kódování samotné webové stránky, individuálně po jednotlivých prvcích
- V samostatném dokumentu CSS, se kterým je web propojen
Osvědčené postupy pro CSS
„Osvědčené postupy“ jsou metody navrhování a vytváření webů, které se ukázaly jako nejúčinnější a přinášejí co největší návratnost práce. Sledovat je CSS ve webovém designu pomáhá webům vypadat a fungovat co nejlépe. Vyvinuli se v průběhu let spolu s dalšími webovými jazyky a technologiemi a preferovaným způsobem použití se stal samostatný seznam stylů CSS.
Následující osvědčené postupy pro CSS mohou váš web vylepšit několika způsoby:
- Odděluje obsah od designu: Jedním z hlavních cílů CSS je odstranit designové prvky z HTML a umístit je na jiné místo, které si designér ponechá. Tato praxe také slouží k oddělení návrhářů od vývojářů, aby se každý mohl soustředit na své oblasti odborných znalostí. Designér nemusí být vývojář, aby udržel vzhled webu.
- Usnadňuje údržbu: Jedním z nejvíce přehlížených prvků webového designu je údržba. Na rozdíl od tiskových materiálů není web nikdy „jeden a hotový“. Obsah, design a funkce se mohou a měly by se časem vyvíjet. Díky tomu, že je CSS na centrálním místě, místo aby byl rozstřikován po celém webu, je údržba mnohem snazší.
- Udržuje váš web přístupný: Používání stylů CSS pomáhá vyhledávačům a postiženým jednotlivcům komunikovat s vaším webem.
- Udržuje váš web aktuální déle: Využíváním osvědčených postupů v CSS dodržujete standardy, které se ukázaly jako stabilní, ale dostatečně flexibilní, aby vyhověly změnám v prostředí webového designu.
Vložené styly nejsou osvědčeným postupem
Vložené styly, i když mají svůj účel, obecně nejsou nejlepším způsobem údržby vašeho webu. Jdou proti každému z nejlepších postupů:
- Vložené styly neoddělují obsah od designu: Vložené styly jsou přesně stejné jako vložené písmo a další neohrabané návrhové značky, proti kterým moderní vývojáři pracují. Styly ovlivňují pouze konkrétní jednotlivé prvky, na které jsou použity; zatímco tento přístup vám může poskytnout podrobnější kontrolu, ztěžuje také další aspekty designu a vývoje - například konzistenci.
- Vložené styly způsobují bolesti hlavy při údržbě: Když pracujete s tabulkami stylů, může být obtížné zjistit, kde se styl nastavuje. Když máte co do činění se směsí vložené, vložené a externí styly, musíte zkontrolovat mnoho míst. Pokud pracujete v týmu webdesignu nebo potřebujete přepracovat nebo udržovat web vytvořený někým jiným, budete mít ještě větší potíže. Jakmile najdete styl a změníte ho, budete to muset udělat na každém prvku na každé stránce, kde byl umístěn. To astronomicky zvyšuje rozpočet na čas a práci.
- Vložené styly nejsou tak přístupné: Zatímco moderní čtečka obrazovky nebo jiné pomocné zařízení může být schopen zpracovat vložené atributy a tagy efektivně, některá starší zařízení nemohou, což může mít za následek nějaký podivně zobrazený web stránky. Znaky navíc a text mohou ovlivnit i to, jak vaši stránku prohlíží robot vyhledávače, takže vaše stránka není z hlediska optimalizace vyhledávače tak dobrá.
- Vložené styly zvětšují vaše stránky: Pokud chcete, aby se každý odstavec na vašem webu zobrazoval určitým způsobem, můžete to udělat jednou se šesti řádky kódu v externí šabloně stylů. Pokud to však děláte s vloženými styly, musíte tyto styly přidat do každého odstavce vašeho webu. Pokud máte pět řádků CSS, je to pět řádků vynásobených každým odstavcem na vašem webu. Tato šířka pásma a doba načítání se mohou ve spěchu přidat.
Alternativou k vloženým stylům jsou externí šablony stylů
Místo použití vložených stylů použijte externí šablony stylů. Poskytnou vám všechny výhody osvědčených postupů CSS a jsou snadno použitelné. Tímto způsobem využívané všechny styly použité na vašem webu žijí v samostatném dokumentu, který je poté propojen s webovým dokumentem pomocí jediného řádku kódu. Externí šablony stylů ovlivní jakýkoli dokument, ke kterému jsou připojeny. Pokud máte 20stránkový web, na kterém každá stránka používá stejnou šablonu stylů - což je obvykle způsob hotovo - každou z těchto stránek můžete změnit jednoduše úpravou těchto stylů jednou, v jedné místo. Změna stylů na jednom místě je pohodlnější než hledání tohoto kódování na každé stránce vašeho webu. Tato flexibilita výrazně usnadňuje dlouhodobou správu webů.