CSS může být pro návrháře nesmírně silný značkovací jazyk.

Produkt CSS, který se vyrábí, je však jen tak dobrý, jako zásady, kterými následuje návrhář, který vytváří kód.

Zatímco si možná myslíte, že někdo může vyčistit CSS, existuje velký rozdíl mezi psaním CSS a produkcí špičkových CSS.

Abyste se ujistili, že jste na správné cestě, je zde osm zásad CSS, které by měl každý webový designér sledovat.

1. Udělejte čas na ověření

Pokud budete investovat čas do kódování CSS, má smysl věnovat jen čas ověřit kód, který vytvoříte. Nicméně mě nikdy nezapomíná, kolik návrhářů přeskočí tento důležitý krok. Ověření vašeho kódu vám umožní vyčistit všechny problémy a zajistit, že to bude fungovat dobře pro vaše návštěvníky.

Kromě ověření souboru CSS byste měli také ověřit soubory HTML nebo XHTML. Než ověříte tyto soubory, ujistěte se, že jste vybrali správný HTML nebo XHTML DOCTYPE. Vyhlášení vašeho DOCTYPE může vypadat jako světský detail, ale nemohu počítat, kolik diskusí jsem měl s frustrovanými designéry, kteří nadále měli problémy s designem, jen aby zjistili, že to bylo proto, že deklarovali zastaralý DOCTYPE (nebo neoznámil vůbec DOCTYPE).

2. Dokument (ale ne ve vašem kódu)

Ať už pracujete na projektu samostatně nebo s týmem návrhářů, je důležité zdokumentovat práci, kterou vytvoříte. Pravděpodobně víte, proč by to bylo důležité v kontextu designového týmu, ale možná se divíte, proč by bylo důležité, pokud pracujete na sólovém projektu. Existuje vždy šance, že se váš sólový projekt nakonec vyvine do skupinového projektu, a pokud se tak stane, je mnohem snazší mít dokumentaci na ruce než pokusit se o návrat a vytvoření. Dokonce i v případě, že váš projekt zůstává jedním mužem, možná vás překvapí, jak užitečná dokumentace je, když se rozhodnete znovu navštívit projekt poté, co se na něj nepodíváte rok.

Pokud jde o vytváření dokumentace pro kód CSS, přirozeným impulsem většiny návrhářů je přidání přímo k jejich kódu tím, že se umístí mezi / * a * /. Stejně jako mnohé ze zásad uvedených v tomto seznamu neexistuje technicky nesprávný přístup k tomuto přístupu. Přidání komentářů přímo do kódu CSS však zvýší velikost souboru, což může zvýšit dobu načítání a zpomalit celkový výkon webových stránek. Pokud máte zájem psát špičkový kód CSS, měli byste dokumentovat svůj kód, ale v samostatném souboru.

I když jsem upřímně přesvědčen, že je efektivnější dokumentovat v samostatném souboru, vím, že existuje spousta souborů, které jednoduše nesouhlasí s touto praxí. Pokud odmítnete dokumentovat v samostatném souboru, můžete použít další kompresor CSS (dokonce i když se rozhodnete použít samostatný soubor pro dokumentaci, stále můžete využít kompresoru CSS). Můžete to použít Kompresor CSS z CSS Drive Gallery nebo jednoduše vyhledejte společnost Google k nalezení alternativního kompresoru CSS.

3. Neříkejte Hackům

Ačkoli se hacks staly přijatelnou praxí pro mnohé v komunitě CSS, neznamená to, že "CSS hacking" je princip, který byste měli sledovat. Problém s tímto přístupem k navrhování je, že znamená, že záměrně hledáte komplikované řešení problémů. Zatímco si možná myslíte, že jednou nebo dvěma hackami každou chvíli nikoho neublížíte, aniž byste se dostali do myšlení "hackingu", všechny problémy, se kterými se setkáte, mohou mít negativní dopad na Vaši celkovou mentalitu návrhu.

Vyhýbat se hackům je rada, kterou odborníci dávno vydávají. Můžete se vrátit až do roku 2003 a uvidíte to Peter-Paul Koch (který je dokumentem vývojářem a autorem) již nějakou dobu upozorňoval designéry na důsledky hackerů CSS: "Složitá monstra se objevila právě v centru moderního webového vývoje. Dnes se nezjavuje jako nekonečně vnořený stůl, ale jako nekonečně komplikovaný CSS hack. "

4. Nezneužívejte Divs

Protože divs poskytují vysokou úroveň flexibility, může být snadné jejich nadměrné používání. Ve skutečnosti se tento problém stal tak častým u návrhářů, že komunita CSS vytvořila svůj vlastní termín pro označování tohoto problému: divitus. Abyste se vyhnuli tomu, že se stanete poškozen touto podmínkou, než se automaticky použije značka div, měli byste se vždy zeptat, jestli existuje skutečná značka HTML, která vám za vás udělá práci. Například namísto vytváření více záhlaví div, proč nepoužíváte značky hlavičky HTML, které jsou již k dispozici, jako například H1 a H2?

Jakmile začnete brát v úvahu problém divs, rychle uvidíte výhody použití příslušné značky HTML namísto automatického vytvoření nové div. Nejenže může snížit množství kódu, který je třeba vytvořit (což vám ušetří čas a zároveň sníží dobu načítání vašich webových stránek), ale také dá váš kód logičtější struktuře.

5. Přemýšlejte o názvech tříd

Pokud se zeptáte nového nebo nezkušeného návrháře o tom, jak se rozhodnou pojmenovat své třídy, mohou říci, že to na tom nezáleží. Zatímco to je technicky pravdivé, je to velmi krátký pohled na pojmenování tříd CSS. Ačkoli jsou návrháři, kteří spadají do kategorie, že se nezajímá o názvy tříd CSS, existují i ​​designéři, kteří si myslí o svých názvech tříd, ale ve skutečnosti se chovají špatně.

Vzhledem k tomu, že vás nechci prostě porazit nad hlavou s teoretickými příklady, dovolte mi to konkrétně vysvětlit. Řekněme, že vytváříte třídu pro ovládání jedné z polí na vaší stránce. Krabice bude umístěna v dolní části stránky, bude obsahovat komentáře od čtenářů a použijete CSS, abyste získali pozdní pozadí a ovládání polstrování. Namísto pojmenování tohoto .tan-boxu (což je to, co by hodně designérů dělali), pojmenujte to .comment-box. Důvod, proč .comment-box je lepší název třídy než .tan-box je, protože pokud se rozhodnete změnit barvu pozadí na modrou po silnici (nebo se rozhodnete přesunout rámeček z dolní části stránky do jiné oblasti) , nebudou vám nebo jiným designérům, kteří se dívají na CSS pro tuto webovou stránku.

6. Obejme zkratku

Zatímco zkratka může být matoucí návrhářům, kteří právě začínají psát svůj vlastní kód CSS, jakmile si zvyknete na styl zkráceného zkrácení, stává se jednou z nejúčinnějších postupů, které můžete sledovat jako návrhář .

Existuje několik výhod použití zkrácené vazby. Jeden sníží velikost souborů, což sníží dobu načítání vašich webových stránek. Kromě toho nejen usnadní uspořádání kódu, ale také usnadňuje, pokud budete muset v budoucnu provést změny kódu. Jakmile se začnete přizpůsobovat zkratce, měli byste se také dostat do praxe psaní kódu na jednom řádku (namísto šíření deklarací na více řádků).

7. Nezapomeňte na tiskárny

Jako designér jste mnohem technickyji nakloněni než kdokoli jiný v běžné populaci. Protože jste součástí menšiny, která žije a dýchá technologií, existuje mnoho zvyků, které máte, o kterých si většina lidí nikdy nepřemýšlela. Například jste pravděpodobně vyhnali vaší cestě k odstranění co nejvíce "papírové stopy", jak je to možné ve vašem životě. Je však důležité si uvědomit, že většina obyvatel stále pravidelně tiskne věci. Zatímco pravděpodobně označíte položku del.icio.us, když ji chcete uložit pro budoucí použití, průměrný uživatel internetu vytiskne stejnou stránku.

Vzhledem k tomu, že lidé stále tisknou informace z internetu, je důležité používat službu CSS, která vám umožní přizpůsobit obsah tiskárny . Návštěvníci ocení veškerou práci, kterou jste vytvořili při vytváření krásného rozvržení webových stránek, které navštěvují, ale když se rozhodnou vytisknout stránku z této webové stránky, ocení vás ještě víc, když si uvědomí, že jejich výtisk obsahuje pouze text, který chtějí (a žádná z úžasných grafiky, které vypadají skvěle na svém počítači, ale by zbytečné množství inkoustu z tiskárny). Vzhledem k tomu, že CSS je velmi jednoduché zajistit, aby byl obsah řádně naformátován při vytištění, neexistuje žádná omluva, aby skutečný návrhář zanedbal tento krok návrhu.

8. Nikdy nezastavujte učení

Možná si myslíte, že tento konečný princip zní klišé, ale je pravděpodobně nejdůležitější z celého seznamu. Pokud jste odhodláni být nejlepším návrhářem možným, musíte se ujistit, že se vždy snažíte rozšířit své znalosti CSS . Naštěstí je to snadné, pokud máte touhu a vůli se zavázat k dalšímu vzdělávání CSS. Zatímco další vzdělávání může být obtížným úkolem pro jednotlivce v mnoha průmyslových odvětvích, které nemají technický charakter, protože internet je doslova základem pro CSS, množství bezplatných zdrojů, ze kterých se můžete naučit, jsou doslova nekonečné. Pokud si myslíte, že přeháním, stačí zadat "CSS" do Googlu a uvidíte, že je pro vás 483 000 000 výsledků procházet.

Kromě výuky z online zdrojů (a pokud chcete, můžete tisknout zdroje) se můžete hodně naučit od jiných návrhářů CSS. Bez ohledu na to, zda analyzujete svou práci, posloucháte rady, které vydávají on-line nebo s nimi mluví v situacích tváří v tvář, získáte hodně hodnoty interakcí a potenciálně spolupracovat s jinými designéry, kteří se zavázali dodržovat zásady špičkový design CSS a produkce úžasných děl.