Zkoušeli jste někdy kódovat své vlastní webové stránky, ale moc Vám to nešlo? Měli jste problémy se zobrazováním webu v "problémovém" prohlížeči Internet Explorer? Vídáte stejný kód v CSS víc než častěji? Říká Vám kodér často, že něco nejde? Rozhodnul jsem se podělit se s velmi jednoduchým, efektivním a zároveň i správným způsobem, jak správně kódovat web. Článek není vhodný pro úplné začátečníky, snaží se doplnit znalosti a dává logický pohled na způsob tvorby a psaní webu. Pod rukama mi prošly práce mnoha lidí, od začátečníků ke "kodérům" až po profesionály, ale všude ty samé chyby - nejednostnost, žádný systém, chybějící znovupoužitelnost, opakování kódu. Pojďme to společně napravit a naučit se, jak jednoduše kódovat web, který bude správně.
Pro své stránky používejte základní kostru stránky, měla by v 99 % stačit.
Ještě než se pustíme do práce, určete si pravidla kódování, kterých se budete držet po celou dobu vývoje stránky a ještě se před samotným začátkem trochu zamyslíme a práskneme pár užitečných tipů.
Pravidla kódování
Před začátkem každého projektu je dobré si předem určit, co a jakým způsobem budete psát, dodržujte jednotný styl, vyhněte se míchání různých způsobů dohromady a snažte se být trochu perfektcionalista, bude Vás to při vývoji těšit :-)
- způsob odsazení (na toto téma existuje mnoho diskusí a je pouze na Vás, zda zvolíte mezery nebo se rozhodnete pro tabulátor), já doporučuji tabulátor, protože k odsazování je určený, každý si může určit jeho šířku a zabírá jen jeden znak
- názvy identifikátorů a tříd pište jednotně, osobně mám rád přehlednost a proto v nich píšu pomlčky (důvodem je i využití pomlček v samotném CSS a jednoduchost jejich psaní)
- názvy identifikátorů a tříd, tentokrát myslím jejich skutečné názvy, přemýšlejte o nich, aby nebyly příliš složité a odpovídaly jejich skutečnému účelu
- názvy identifikátorů a tříd potřetí, nikdy nepoužívejte názvy například jako .cervena, .vyska-150, .okraj-10 apod. Později dojde k tomu, že budete jejich vlastnosti měnit, takže ve výsledku dostanete, že třída .cervena znamená modrý text, třída .vyska-150 se změní na 80 pixelů místo původních 150, atd.
- dodržování maximální délky řádku a nemačkat všechno na řádek jeden, velkou výhodu poznáte, až budete využívat verzovací systém (například Git)
- angličtina nebo čeština v kódu, nemíchejte názvy dohromady
- nekódujte tak, abyste získali co nejdřív výsledek, ale pro radost a s pocitem, že to umíte a že to děláte dobře :-) Nepracujte s přesvědčením, že všechno už znáte a umíte nejlépe, vždycky se najde někdo, kdo Vás dostane a umí problémy řešit čistěji, proto se nebraňte změnám a stále se vzdělávejte nebo zůstanete na mrtvém bodě.
Identifikace stránky
K html tagu napište identifikátor, který bude jednoznačně určovat stránku, případně její podmnožinu, vhodné například v případě využívání oblíbeného MVC/MVP frameworku, kde název kontroléru je brán jako onen identifikátor s nějakým prefixem, například:
<html id="page-{název}">
K čemu je to dobré? Pokud budete potřebovat na jedné stránce zobrazit něco trošku jinak než na druhé, máte se čeho chytit. Příkladem mohou být odlišná pozadí na různých stránkách.
Další uplatnění si identifikace stránek najde v JavaScriptu, kde můžeme chtít aplikovat kus kódu pouze na určité stránce.
Kódujeme logicky
Důležité je si uvědomit, co právě chceme na sránku vytvořit. Potřebujeme hlavní navigaci? Jaký element a s jakým označením zvolíme? Každá stránka má obsahovat pouze jednu hlavní navigaci, proto element označíme identifikátorem namísto třídou. Například
<ul id="nav">
Proč jsem zvolil pro navigaci značku <ul>? Navigace je seznam odkazů. Nebyla by vhodnější značka <nav>? Nebyla, tato značka je poměrně nová a v prohlížečích, které se dnes stále používají nejde stylovat, pokud nevyužijete kousek JavaScript kódu a to za to nestojí, protože její využití nepřinese žádné výhody. Nepoužívejte všechny HTML5 značky jen proto, protože jsou moderní, někdo Vám to nařídil a nebo si myslíte, že nové je vždycky lepší.
Pokud chcete seznam, využijte značku určenou pro seznam, pokud chcete vytvořit něco, co vypadá jako tabulka, využijte tabulku a nesnažte se ji jakkoli obejít či nahradit. Není důvod nad tím přemýšlet. Seznam? <ul>. Tabulka? <table>. Hlavička tabulky? <thead>, atd. Je to jednoduché a logické. Proč se pořád někdo snaží vytvářet tabulky pomocí <div>ů, které se při různých šířkách mohou snadno rozpadnout?
Pevná výška elementů s (nejen) textovým obsahem
Jedna z velmi častých a smutných chyb kodérů. V žádném případě nedávejte obsahovým elementům pevnou výšku, vše dělejte dynamicky, velikost textu se může kdykoli změnit - může si ji změnit sám uživatel buď v prohlížeči a nebo nastavením v systému, může mít jiné písmo, které je jinak velké apod. Od teď už nenastavujte pevnou výšku tak často, jako doposud, a to ani kdyby se grafik stavěl na hlavu, kopal přitom nohama a prosil Vás o to.
Jsou tu však i vyjímky, u kterých je pevná šířka naopak žádoucí - jednořádkový text, typicky tlačítko s krátkým textem. V té chvíli je vhodné nastavit (minimálně) tyto vlastnosti:
line-height: 30px;
height: 30px;
Tím text na tlačítku vertikálně zarovnáme.
Vymýšlíme tlačítko, ale dá to zabrat
Je to až neuvěřitelné, ale málokdy se setkám se správným nakódováním tak jednoduchého prvku na webu, jako je tlačítko. Tak schválně mi do komentářů napište, jaké označení byste vybrali pro červené tlačítko na modro bílém webu, abyste zachovali jednoduchost názvu označení, znovupoužitelnost a vyhnuli se nesprávnému pojmenování.
Jedna třída button-red nebo obráceně red-button? To myslíte vážně? Zkuste více přemýšlet, protože to je při psaní kódu velmi důležité. Třída button a k tomu další třída red? O něco lepší, ale ani teď to není správné. Ještě jednou si položme otázku, čeho vlastně chceme dosáhnout a pak proveďme dekompozici: chceme tlačítko, třída button je tedy správně, zároveň také chceme, aby bylo červené, třída red je ale špatně, jak jsme si určili v pravidlech, kdykoli později ho můžeme přebarvit, a tak by nám vzniklo tlačítko s třídou red, které by mohlo mít modrou barvu, protože si to klient přál. To nedává smysl!
Ideálním pojmenováním je primary button, neboli hlavní tlačítko, které je na modro bílém webu dost vidět. Podobně můžeme volit i další názvy, například secondary, tiny, small, large, big atp.
U takto globálního prvku je důležité nenastavovat vlastnosti, které u něj mít opravdu nechceme. Příkladem může být například spodní okraj, který chceme na jediném tlačítku. Díky jedinečnosti tlačítka ho můžeme označit identifikátorem a můžeme napsat:
#button-registration { margin-bottom: 20px; }
pro HTML
<input type="submit" id="button-registration" class="button" value="Registrovat se">
a ostatní tlačítka zůstanou nedotčená. Budete-li takto uvažovat v každém směru a při vytváření jakéhokoli dalšího prvku na stránce, vznikne hned několik podobných globálních tříd, které se rádi naučíte používat a nebudete se jich chtít vzdát. Myslete dopředu, nebráňte se znovupoužitelnosti a mějte všechno co možná nejjednodušší - usnadníte si práci a nenecháte zbláznit se kolegu z Vašeho výtvoru, když zrovna onemocníte.
Často se setkávám tím, že tlačítka jsou určená příliš specifickým selektorem natolik, že jsou k použití jen na jednom místě. To je samozřejmě špatně. Díky takovým zápisům a neustálým kopírováním všech vlastností k dalšímu a dalšímu selektoru obsah souboru roste a při vytváření responsivní verze se stává nezvladatelným - nedělejte to a mějte chytrá tlačítka (někdy mám problém v mých oblíbených NetBeans editovat CSS soubor, který má přes 11 tisíc řádků - v tuto chvíli vynechme prosím CSS preprocesory).
Další obrovskou výhodou je, že tlačítko můžeme jednoduše změnit na jednom místě a změní se nám všude.
Absolutní pozice na nesprávných místech
Už jste se dozvěděli, že není správné nastavovat pevnou výšku, ale určitě jste se už setkali s přeskládáváním bloků pomocí absolutních pozic, typicky hlavní navigace, která má být vizuálně nahoře je v kódu umístěna dole právě proto, aby dala přednost důležitějšímu bloku - obsahu.
V tuto chvíli Vám nezbývá nic jiného, než buď navigaci nastavit výšku a dělat, že se nic neděje nebo nechat elementy za sebou v HTML tak, jak se objeví na stránce a nebo využít flexbilní boxy ,které k jsou k tomu právě určené, ale nejsou ještě příliš podporované napříč prohlížeči.
V případě dynamicky generovaných položek do absolutně pozicované navigace se ale objevuje problém, texty lehce mohou začít přesahovat do obsahové části a to nevypadá vůbec profesionálně a Váš klient z toho bude brzy nešťastný, až zjistí, že si nemůže navigaci sám jednoduše přizpůsobit. Vhodné je nastavit dostatečně velké písmo v pixelech, které se zvětšovat nebude.
---
V dalším díle se už podíváme na praktické ukázky, jak kódovat základní prvky, kde spousta kodérů dělá chyby. Buďte jiní a kódujte správně, jednoduše a efektivně.