Moje poznatky o CSS #1

Úvodní díl mini-série z mých poznatků o CSS. Během této série se podíváme nejen na názvy tříd, psaní cross-browser CSS, testování, responzivní design a i nějaký ten výhled na budoucnost. Snad se bude líbit.

Díl 1: Pravidla pro Názvy tříd v CSS

• Sjednoťte svůj jazyk! Je vaše svobodná volba pokud se rozhodnete používat např. češtinu. Když už ji ale jednou začnete používat, zůstaňte u toho po dobu celého projektu.
• Vyvarujte se používání specifických názvů tříd - červená, modrá, Šedá, světlá, tmavá, vlevo, vpravo. Stačí například mírný zásah do grafiky webu a vaše třída .červená se bude muset v celém projektu změnit na .modrá. 
• Pište malým písmem.... prosím
• Na dlouhé názvy camelCase nebo pomlčky? Wordpress Codex doporučuje pomlčky. Osobně je mi to fuk v případě, že je tento styl opět jednotný!
• Všechny pravidla porušte. Pokud už 5 minut přemýšlíte nad správným názvem (a nepracujete na projektu, jehož kód uvidí statisíce programátorů) je na čase to vzdát a udělat to tak, aby to fungovalo a práce byla odvedená včas. Slibuji, že časem to budete dělat automaticky.

Pojďme si rozebrat co je špatně na následujícím:

.button .big .red .right

První třída .button je obecná: už název nám napovídá, že se bude jednat o nějaké tlačítko. Zde je vše v pořádku, protože název třídy nepopisuje nic o vzhledu samotného tlačítka.

Druhá třída .big: autor má na webu zřejmě více velikostí tlačítek a chtěl aby toto konkrétní tlačítko bylo velké. Ale jak velké? Co když by pak chtěl jinde na webu použít tlačítko ještě větší? Napsal by .bigger?

Třetí třída .red: Tlačítko asi bude červené, že? A barva textu? Barva rámečku?

Čtvrtá třída .right: tlačítko jsme zarovnali doprava. Možná i s textem. Při redesignu webu jsem se rozhodl, že ho chci zarovnaný na střed. Musím projít všechny html šablony a tuto třídu smazat a nechte se podat... nahradit třídou .center?

A jak to mělo být správně?

.button .highlight .default-style

Vysvětlení:

Třída .highlight: Toto tlačítko je zřejmě důležité a je třeba ho v kontextu webu vyzdvihnout, v našem případě ho teda zvětšit.

Třída .default-style: Tlačítko má mít zřejmě stejné provedení jako výchozí styl projektu. Čili červené tlačítko.

Třída .right zde nechybí, protože pozici samotného tlačítka musí určovat kontext dokumentu. V našem případě například selektor "article .highlight".

No vidíte, jde to, že?

V titulku jste si mohli všimnout označení pro první část článku. Ano, znamená to, že budou pokračovat další podobné články, které jsou inspirované mou praxí v oboru. Nicméně stále platí, že čím jsem starší, tím méně času mám na tento blog, ale slibuji, že udělám všechno možné a sérii dopsal v době, kdy to ještě stále bude aktuální téma :)

Děkuji za váš čas u tohoto mikro-článku. Snad jsem Vás přivedl na nový úhel nahlížení na CSS třídy.