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.

Komentáře

Okomentovat

Populární příspěvky z tohoto blogu

Jak vytáhnout zvuk z videa pomocí VLC? Návod

Obrázek
Dnes jsem připravil jeden užitečný návod pro všechny uživatele video portálu YouTube.com (ale i jiných) . Mnoho z Vás si jistě někdy chtělo uložit některé video do svého počítače a případně z něj vytáhnout zvukový podklad . V tomto návodu Vám ukáži, jak toho docílíte krok za krokem a to bez použití jakéhokoli specializovaného programu typu Youtube Downloader a jemu podobných. Upozorňuji, že tento návod je hlavně pro uživatele operačního systému Windows . Pro uživatele systémů Linux či Mac OS je postup obdobný. Co budeme potřebovat? Tento návod Internetový prohlížeč Stabilní připojení k internetu VLC media player Dávku trpělivosti Jak to vlastně provedeme? Princip je prostý. Využijeme toho, že si každý internetový prohlížeč sám pro sebe ukládá dočasná data od každé webové stránky. Takže v momentě, kdy dáme načíst nějaké video, uloží se do složky s dočasnými soubory na našem disku a jediné co bude poté potřeba udělat je, že tento dočasný soubor najdeme a převedeme ho do ...
čtěte dále »

Chrome OS budoucností osobních počítačů

Obrázek
Společnost Google představila v půli roku 2009 svou vizi operačního systému. Budeme si v blízké budoucnosti zvykat na nové uživatelské prostředí a na zcela nové pojetí práce s počítačem? V tomto článku se s velkou dávkou optimismu pokusím nastínit, jak by to již za pár let mohlo na našich počítačích vypadat. Pokud se blíže zamyslíme, jaká je nejčastější funkce , ke které používáme své osobní počítače, zjistíme, že se prakticky již neobejdeme bez internetového připojení. Ať už chceme komunikovat s ostatními, vyhledávat informace, sledovat videa, poslouchat hudbu, hrát hry, provádět kancelářskou práci, vždy najdeme nějaký důvod k využití největší celosvětové sítě internetu . Společnost Google si tento fakt moc dobře uvědomuje a proto přichází s revolučním operačním systémem s názvem Chrome OS , kompletně založeném na webových aplikacích. Je to vlastně zjednodušený linuxový systém s grafickým rozhraním připomínající již dobře známý internetový prohlížeč Google Chrome, ve kterém jsou sp...
čtěte dále »

Quick Tip: Názvy tříd v CSS a AdBlocker

Obrázek
Při nedávnem prohlížení mých starých projektů jsem si všiml, že se mi nezobrazují některé elementy na stránce. Po chvilce pátrání jsem zjistil , že má toto na svědomí nově nainstalovaný AdBlocker . Pro ty co neví: AdBlocker je hojně užívané rozšíření internetového prohlížeče, jehož úkolem je zablokování (skrývání) reklamních bloků na stránkách. Jak spolu ale souvisí názvy tříd a AdBlocker? Kromě jiných technik blokování reklamy, využívá Adblocker svou vlastní databázi CSS tříd , které používají nejznámější poskytovatelé reklamních bannerů na internetu. Takže pokud se taková třída na vašich stránkách objeví, je více než možné , že se u klienta, který má AdBlocker nainstalovaný daný prvek stránky prostě nezobrazí . A které to jsou?  Toto se samozřejmě mění od verze k verzi, ale většina má společné rysy. V názvu třídy se vyskytuje slovo " AD " či " Advertisement ". Moje rada tedy zní Snažte se vyhnout používání výše zmíněných slov v názvech vašich tří...
čtěte dále »