Rozvíjení efektivního, zjednodušeného CSS
CSS lze porovnat s sadou nástrojů sochaře; jako sochaři v práci, jsme návrháři pomocí CSS vytvářet strukturované rozvržení webových stránek.
V průběhu let se tento proces stal organizovanějším; byla zavedena pravidla pro vytvoření osvědčených postupů kódování.
V tomto článku se podíváme na některé nápady, které můžete použít při psaní stylových listů pro urychlení vašeho kódu.
Efektivní CSS je snadno ovladatelná a snadno čitelná a může být zdrojem pro webové designéry. Získat organizaci je velký krok, ale používání CSS může být o něco složitější než to.
Když si přečtete tento článek, pamatujte si na své vlastní preference. nejlepší rady, které můžete získat od každého vývojáře, je najít vlastní způsob práce. Kombinujte několik technik zde s vlastními metodami, abyste získali co největší užitek.
Proč obtěžovat zjednodušení CSS?
Mnoho konstruktérů mluví o jazycích front-end a back-end, když mluví o kódu analýzy. CSS a HTML jsou přední designové jazyky používané k formátování a stylu prvků na webových stránkách. Soubory jsou staženy a analyzovány prohlížečem prohlížeče, což znamená, že front-end kód má podstatnou dobu načítání.
Kód stažený a analyzovaný prohlížečem potřebuje čas na čtení a výpočet, stejně jako kód napsaný v jazycích typu back-end (např. PHP nebo Ruby). Zjednodušený CSS může značně prospět webové stránce, protože může zkrátit dobu načítání a urychlit strukturování prvků stránky.
Přínosy nemusí být zřejmé u dnešních vysokorychlostních připojení a pokročilých operačních systémů. Chcete-li porovnat dobu načítání a zjistit, jak se načítá web, můžete se podívat na svůj web v mobilním prohlížeči.
Když je kódování CSS efektivně, měli byste vidět formu a styl prvků webové stránky, jak jsou zpracovávány. Může to vypadat jinak než prohlížeč, ale stále se to stane. Čím více testujete kód vašeho webu, tím víc ho uvidíte.
Udržujte kód standardizovaný a jednoduchý. Pokud aktualizujete svůj blog nebo osobní webové stránky několik měsíců po počátečním vývoji, je snadnější přecházet se styly CSS, které znáte, než s novými. Přizpůsobení zavedených standardů pomáhá v dlouhodobém horizontu.
Jak pracovat s účinným kódem
Chcete-li začít pracovat s nejkvalitnějšími způsoby kódování, budete muset přijmout několik nových nápadů. Jedná se o základní techniky CSS, které dnes používají špičkové internetové stránky a vývojáři aplikací.
Udržujte svůj kód jednoduchý
To lze snadno přehlédnout. Při mapování sady dat pro své styly je to jednoduše. Pokud potřebujete, vytvořte sady dat v zásobníku sloupců.
Začněte tím, že vytvoříte seznam různých sekcí, ve kterých budete pracovat ve svých stylech. Můžete zahrnout text, formuláře, rozvržení, záhlaví, zápatí a vše, co byste mohli potřebovat. Chcete-li se skutečně zorganizovat, můžete ji rozdělit do několika známých stylů, jako například id nebo class pro navigační odkazy.
Tento první krok vám pomůže vytvořit jednoduchý text pro vaše webové stránky, než se dostanete do jakéhokoli stylu jazyka. Poté bude sedět a psát kód mnohem jednodušší; mít seznam zdrojů před vámi vám pomůže vylévat kód téměř nadlidskou rychlostí.
Udržujte bloky kódu vymezené a řídké
Tam je probíhající debata o tom, jak by měl být napsán kód CSS. Když jsem poprvé začal, používal jsem blokovou notaci, protože to bylo všechno, co jsem kdy viděl. Jediná řádková notace je mnohem rychlejší, pokud jde o analýzu textu a jeho čitelnost.
Nehodlám ignorovat CSS ve stylu bloku - daleko od něj. Když jednáte s důležitým prvkem nebo id který má šest nebo sedm hlavních vlastností, bude udržovat v blokované podobě mnohem jednodušší. Budete izolovat důležité části vašeho stylu, takže je jednodušší najít na první pohled.
Čtení dlouhých stylů v blokovém zápisu je také jednodušší, protože většina textových editorů obtéká dlouhé čáry a čtení dvojice vlastností a hodnot může být matoucí, když máte 10 nebo více projít. Být webdesignérem, musíte zavolat, jak vyjmout kód CSS. Mějte na paměti účinnost a použijte svůj nejlepší úsudek.
Spolupráce s dalšími vývojáři
Pokud jste profesionální webový designér nebo se snažíte být jeden, je pravděpodobné, že budete s týmem dříve nebo později pracovat. To může být požehnání nebo prokletí, v závislosti na týmu.
Návrháři se často zdráhají provádět zásadní změny ve své práci. Kód CSS je trochu jiný, protože se pokoušíte vytvořit krásné rozložení, které používá pouze hodnoty vlastností, a soubory mohou být špinavé při přechodu mezi několika rukama. Takže zůstaňte organizováni.
Komentáře jsou velkou pomocí. Pokud by řádky nebo bloky kódu mohly zaměňovat nebo uvést v omyl jiné, připomínky ušetří hodiny. Vysvětlete vše, co dáte do listu stylů co nejlegálněji.
Zkontrolujte, zda nejsou přepsány žádné duplicitní nebo připojené styly. Představte si, že h1 na h4 nadpisy jsou v dokumentu CSS vytyčeny vysoko, ale pak některé písmena dolů mění své písma. To by mohlo být nesmírně matoucí pro někoho, kdo nepodepsal kód, a nyní musí projít chybu.
Komunikace je také kritická. Mohl byste napsat nejúčinnější kód kolem, ale nedostatek komunikace vám pomine. Zaměřte se na daný úkol a pracujte s kreativními nápady vytvořenými kolektivně týmem (nejenom vaším).
Sledujte samostatné dokumenty CSS
Dalším způsobem, jak udržet kód čistý a organizovaný, je udržovat typy stylů oddělené. To funguje dobře pro velké webové stránky, na kterých by byly všechny styly v jednom dokumentu nerealistické.
Facebook je dobrým příkladem. Je pravděpodobné, že má mnoho různých stylů pro všechny své stránky: profil, vyhledávání, registrace, fotografie atd. Pokud by všechny styly byly konsolidovány v jednom souboru, nechtěl bych být chlapí, který musí třídit kód jen opravit jednoduchou chybu.
Facebook získá mnohem větší návštěvnost než vaše webové stránky, ale zásady jsou stejné. Je-li organizace znepokojena, může být oddělený stylový list dlouhý. Weboví návrháři často organizují kód založený na aspektu dokumentu, který strukturuje (např. Layout.css , text.css , forms.css ).
Ne všechny styly je třeba načíst na každé stránce. A zde leží výhoda: metoda umožňuje větší přizpůsobení při vytváření webových stránek. Budete omezovat na parsování obrovsky jen tím, že vytváří oddělené pohledy a styly.
Testování podpory IE
Weboví vývojáři vždy malovali prohlížeč Internet Explorer jako darebák, zejména s CSS. Naštěstí můžete použít podmíněné komentáře (které vypadají jako pravidelné komentáře pro většinu prohlížečů) do kódu HTML.
Tyto můžete použít k použití stylů v aplikaci Internet Explorer. Podívejte se na podmíněné komentáře, pokud nejste s nimi obeznámeni. mohou se ukázat jako neocenitelné, když vlastnosti CSS nefungují správně a potřebujete jinou alternativu.
S uvolněním Internet Explorer 9 Beta , dostáváme se trochu blíž k jednotnému zážitku z internetu. Jediným problémem je počet lidí, kteří stále používají prohlížeče starší jako IE6 a IE7, které mají vážné chyby při zpracování (kvůli chybným renderingům) a někdy vyžadují i externí styly. Naštěstí se podpora zlepšila a zdá se, že společnost Microsoft obrací věci.
Přidání obsahu
Tento krok je nepovinný, ale podle mého názoru to dělá zázraky pro mé styly. Stůl můžete ukládat mimo samotný dokument CSS, ale zjistil jsem, že je to poněkud kontraproduktivní - zejména proto, že přidávání komentářů do řádku je tak snadné.
Hlavní důvody pro zařazení obsahu do vašich stylů spočívají v tom, že usnadňuje přístup a zjednodušuje proces editace. Položte značky na začátku dokumentu, abyste kód oddělili od logických rozdělení.
Vytvoření vlastních klíčů je dobrý přístup. Například pokud plánujete rozdělit tabulku podle hlavních oblastí dokumentu (rozvržení, písmo, záhlaví, navigace atd.), Můžete zadat části s jedinečnými znaky.
Můžete použít =!layout a =!font pro vymezení rozvržení a částí písma. Pravděpodobně nebudete spouštět ty přesné sekvence znaků kdekoli v kódu, takže přidání do tabulky a začátek každé sekce komentářů by mělo být bezpečné. Poté použijte vyhledávací funkci v textovém editoru, abyste přeskočili na požadovanou sekci.
To je také dobrá strategie pro projekty, ve kterých se mnoho lidí bude zabývat kódem. Udržuje vše organizované a přístupné.
Existuje mnoho způsobů, jak optimalizovat kód a zvýšit jeho účinnost a tyto tipy jsou skvělý start. CSS se vyvíjí a mnoho nových myšlenek o něm se rozvíjí.
Potřebujete vášeň a odhodlání, abyste to udělali v designovém průmyslu. Pokud se můžete držet vaší vášeň pro digitální design, udržet krok s nejlepšími postupy CSS by nemělo být obtížné. Oslovení ostatních v této obrovské globální komunitě webových designérů může být velkou pomocí; odborníci z oboru jsou obvykle rádi, že sdílejí své techniky a inovace.
Tento příspěvek byl napsán výhradně pro Webdesigner Depot od Jake Rocheleau , vášnivý webový designér a nadšenec sociálních médií. Jake miluje čtení a psaní o nejnovějších trendech v oblasti digitálních a internetových sítí a vytváření sítí s komunitou návrhářů. Chcete-li se dozvědět více o jeho práci, najděte ho na Twitteru @ jakerocheleau .
Jaké jsou vaše metody pro zjednodušení CSS? Jakékoli návrhy pro začínající vývojáře CSS? Jaké nové funkce nebo další podporu byste rádi viděli v budoucích iteracích CSS?