Jak optimalizovat CSS pomocí průvodce stylem kódu

Když návrháři mluví o průvodcích stylem, obvykle to znamená dohodnutý manuál na soudržný vzhled a dojem webové stránky nebo aplikace, s dobře navrženým barevné schéma, typografie a UI který se používá v celém projektu.

K dispozici je i jiný typ průvodce stylem, jaký můžeme použít ve vývoji webu, a je to stejně důležité, ale o mnoho méně diskutované: stylů pro samotný kód. Průvodci stylem kódu jsou spíše pro vývojáře než návrháře a jejich hlavním cílem je optimalizovat CSS nebo jiný kód.

Uvedení správného kódu do stylů nám poskytuje lépe organizovaná, konzistentní kódová základna, vylepšená čitelnost kódu a udržovatelnější kód. Není to náhoda, že velké technologické společnosti, jako je Google, AirBnB nebo Dropbox, je dobře využívají.

V tomto příspěvku se podíváme na to, jak můžeme naše CSS inteligentně optimalizovat pomocí CSS kódu.

Průvodci kódovým stylem vs. knihovny vzorů

V našem oboru existuje určitá míra nejistoty ohledně toho, co můžeme nazvat průvodcem stylem. Seznam Apart například používá synonymně s termínem knihovna vzorů v tomto článku, ale můžeme narazit na tento druh definice také v jiných funkcích.

Na druhé straně existují i publikace, jako jsou například CSS Tricks nebo blog Brada Frosta, který odlišuje průvodce stylem kódu od knihoven vzorů. Tento přístup nás pravděpodobně přivede blíže k dobře optimalizovaným webovým stránkám dovoluje nám zpracovávat kód a design samostatně, takže to použijeme v tomto příspěvku.

Průvodci kódovým stylem i knihovny vzorů zahrnují stylingovou strategii, ale jiný druh. Knihovny vzorů, jako je Bootstrap, Zurb Foundation, BBC Global Experience Language nebo knihovna vzorů MailChimp, nám poskytují uživatelské rozhraní s předdefinovanými CSS třídami, typografií, barevnými schématy, někdy mřížkovým systémem a dalšími vzory designu..

Průvodci kódovým stylem CSS, například Evernote nebo ThinkUp (nebo ty, které jsou uvedeny v úvodní části) obsahují pravidla pro zápis CSS včetně takových věcí konvence pojmenování, struktura souborů, pořadí vlastností, formátování kódu, a další.

Všimněte si, že živý styl průvodce generátory, jako je KSS, Styledown, nebo vzor Lab, generovat knihovny vzorů a ne průvodce stylem kódování. Zatímco knihovny vzorů jsou také velmi užitečné a zvyšují proces vývoje webu, neumožňují nám optimalizovat samotný kód.

Sestavte si svůj CSS Code Style Guide

Konečným cílem průvodce stylem CSS kódu je zajistit, abychom mohli pracovat s konzistentním, snadno laditelným kódovým základem napsaným vývojáři, kteří dodržují stejná pravidla pro styl kódování. Vytvoření průvodce stylem CSS kódu může trvat trochu času, ale stojí to za námahu, protože to musíme udělat pouze jednou. Pak můžeme použít stejný styl průvodce napříč různými projekty.

Je důležité poznamenat, že nejlepší styl průvodce neobsahují pouze pravidla stylingu, ale také příklady dobrého a špatného používání, protože takto mohou vývojáři intuitivně porozumět pravidlům.

Například AirBnB ukazuje vývojářům dobré a špatné příklady následujícím snadno čitelným způsobem:

Struktura souborů

Nejprve musíme vymyslet logiku, podle které budeme organizovat naše CSS soubory. Pro menší projekty stačí jeden soubor CSS, ale pro větší je to vždy lepší rozdělit kód, a později oddělit oddělené soubory ve výrobě.

Někteří průvodci stylu, jako je ThinkUp, nás také varují nepoužívá inline nebo vložené styly pokud to není nevyhnutelné; je to také užitečné pravidlo, které stojí za to použít.

Hnízdění

Hnízdění je skvělá vlastnost v CSS, ale občas to může jít mimo kontrolu. Nikdo se necítí obzvláště šťastný, zejména uprostřed frustrujícího procesu ladění, narážejícího na extra dlouhé selektory takto:

 .class_1 .class_2 # id_1 # id_2 li a span color: #bad;

Takže je vždy dobré nastavit rozumný limit vnoření, například GitHub vybral ve své příručce stylu tři úrovně. Omezením hnízdění můžeme také přinutit napsat lépe strukturovaný kód.

Pravidla pojmenování

Pokud chceme porozumět našim kódovým měsícům nebo dokonce letům později, je klíčové použití koherentních jmenných pravidel pro CSS voliče. Existuje mnoho řešení, a musíme dodržovat jen jedno přísné pravidlo název voliče nemůže začínat číslem.

Čtyři běžné styly používané v pojmenování voliče jsou .malá, .under_scores, .pomlčky, a .lowCamelCase. Je v pořádku vybrat si některou z nich, ale musíme dodržet stejnou logiku napříč celým projektem.

Použitím pouze názvy sémantických selektorů je také nezbytné, pokud chceme mají smysluplný kód. Například místo .červené tlačítko (což neukazuje, co dělá tlačítko) je lepší použít .výstražné tlačítko jméno (které říká, co to dělá), protože tímto způsobem umožňujeme vývojářům (a našim budoucím já) porozumět tomu, co toto tlačítko dělá.

navíc chceme-li změnit barvu z červené na jinou v budoucnu, můžeme to snadno udělat bez potíží. Tam jsou také premade CSS pojmenování konvence, takový jak BEM (Block, prvek, modifikátor) konvence, to výsledkem je konzistentní struktura názvů s jedinečnými a smysluplnými jmény.

Pravidla formátování

Formátování kódu zahrnuje věci, jako je používání mezer, tabulátorů, odsazení, mezer, zalomení řádků atd. Ve formátování není ve skutečnosti všeobecně dobrá nebo špatná metoda. vybrat koherentní pravidla, která mají za následek čitelný kód, a následujte je.

Dropbox například vyžaduje, aby vývojáři vkládali mezery za dvojtečkou do deklarací vlastností, zatímco Evernote používá pro odsazení dvě mezery. Můžeme nastavit tolik formátovacích pravidel, kolik nám vyhovuje, ale nikdy víc, než je možné pochopit.

Deklarace objednávky

Objednané věci jsou vždy snazší vidět a objednání deklarací CSS (vlastnosti s jejich hodnotami) podle pravidla, které dává smysl, vede k lépe organizovanému kódu.

Podívejte se například na pravidla pro objednávání vlastností WordPress, definuje následující jednoduchou, ale logickou základní linii pro objednávání, ve které jsou vlastnosti seskupeny podle jejich významu:

Zobrazit
Polohování
Box model
Barvy a typografie
jiný

Jednotky a hodnoty

Rozhodování o tom, jak chceme používat jednotky a hodnoty, je nejen důležité pro dosažení konzistentního vzhledu kódu, ale také pokud to neuděláme, můžeme skončit s něčím zvláštním.

Představte si místo, které střídavě využívá px, em, a rem měření délky. V editoru kódu to nebude vypadat špatně, ale některé prvky budou na tomto webu s překvapením malé nebo velké.

Musíme také rozhodovat o hodnotách barev (hexadecimální, rgb nebo hsl) a zda chceme používat zkrácené vlastnosti a podle jakých pravidel. Tam je instrukce, která je obsažena v každém průvodci kódem styl CSS jsem narazil do, tj. nezadávejte jednotky pro hodnoty 0 (opravdu, prostě ne).

.class // dobrý okraj: 0; // špatné rozpětí: 0px; // špatný okraj: 0em; // bad margin: 0rem;

Komentář

Kód komentování je nezbytný ve všech jazycích, ale v CSS to nejen usnadňuje ladění a tvorbu dokumentace, ale také sekce CSS pravidla do logických skupin. Můžeme použít buď / *… * / nebo //… notace styl pro komentáře v CSS, důležité je zůstat konzistentní s komentáři v rámci našeho projektu.

Idiomatic CSS například zavádí smysluplný systém komentování, který dokonce používá některé základní umění ASCII, a výsledkem je krásně uspořádaný kód: