Ako optimalizovať CSS pomocou sprievodcov štýlom kódu

Keď dizajnéri hovoria o sprievodcoch štýlu, zvyčajne to znamenajú dohodnutú príručku na koherentný vzhľad a pocit webovej stránky alebo aplikácie s dobre navrhnutým farebná schéma, typografia a používateľské rozhranie ktorý sa používa v celom projekte.

Existuje aj iný typ sprievodcu štýlom, ktorý môžeme použiť aj pri vývoji webových stránok, a je to rovnako dôležité, ale oveľa zriedkavejšie sa diskutuje: štýlový návod pre samotný kód. Príručky štýlu kódu sú skôr pre vývojárov než návrhárov a ich hlavným cieľom je optimalizovať CSS alebo iný kód.

Uvedenie návodov správneho štýlu štýlov do používania nám dáva a lepšiu organizáciu, konzistentnú kódovú základňu, lepšiu čitateľnosť kódu a udržateľnejší kód. Nie je to náhoda, že významné tech spoločnosti ako Google, AirBnB alebo Dropbox ich dobre využívajú.

V tomto príspevku sa pozrieme na to, ako môžeme inteligentne optimalizovať náš CSS pomocou príručiek štýlu CSS kódového štýlu.

Sprievodca kódom štýlu vs. knižnice vzorov

V našom odvetví existuje určitá miera neistoty o tom, čo môžeme nazvať sprievodcom štýlom. Zoznam mimo napríklad ho používa synonymicky s termínom knižnica vzorov v tomto článku, ale môžeme naraziť na tento druh definície aj v iných príspevkoch.

Na druhej strane existujú aj publikácie, ako napríklad CSS Tricks alebo blog Brad Frost, ktoré rozlišujú sprievodcu štýlom kódu od vzorových knižníc. Tento druhý prístup nás pravdepodobne približuje k dobre optimalizovaným webovým stránkam umožňuje nám zvlášť spracovávať kód a dizajn, tak to použijeme v tomto príspevku.

Obidva príručky štýlu kódov a knižnice vzorov obsahujú stratégiu štýlu, ale iný druh. Knižnice vzorov, ako napríklad Bootstrap, Zurb Foundation, Globálny jazyk skúseností BBC alebo vzorová knižnica služby MailChimp nám poskytujú používateľské rozhranie s triedami CSS premade, typografiou, farebnou schémou, niekedy mriežkovým systémom a inými návrhovými vzormi.

CSS štýly kódov štýlov, ako napríklad Evernote alebo ThinkUp (alebo tie, ktoré sú uvedené v intro) obsahujú pravidlá o písaní CSS vrátane vecí, ako je konvencie pomenovania, štruktúra súborov, poradie vlastníctva, formátovanie kódu, a ďalšie.

Všimnite si, že generátory štýlov žijúcich štýlov, ako KSS, Styledown alebo Pattern Lab, generovať vzorové knižnice a nie príručky štýlu kódovania. Kým knižnice vzorov sú tiež veľmi užitočné a zvyšujú proces vývoja webu, neumožňujú nám optimalizovať samotný kód.

Vytvorte si sprievodcu štýlom kódu CSS

Konečným cieľom príručky štýlu CSS kódu je zabezpečiť, aby sme mohli pracovať s konzistentnou ľahko laditeľnou základňou kódov napísanou vývojármi, ktorí všetci dodržiavajú rovnaké pravidlá pre štýl kódovania. Vytvorenie príručky štýlu CSS kódu môže chvíľu trvať, ale stojí za to úsilie, pretože to musíme urobiť len raz. Potom môžeme použiť rovnaký sprievodca štýlom v rôznych projektoch.

Je dôležité poznamenať, že najlepšie sprievodca štýlom neobsahujú iba samotné pravidlá stylingu, ale aj príklady dobré a zlé používanie, pretože vývojári môžu tieto pravidlá viac intuitívne pochopiť.

Napríklad AirBnB ukazuje vývojárom dobré a zlé príklady v nasledujúcich ľahko stráviteľných spôsoboch:

Štruktúra súborov

Po prvé, musíme zistiť logiku, podľa ktorej zorganizujeme naše súbory CSS. Pre menšie projekty môže stačiť jeden súbor CSS, ale pre väčšie projekty to je vždy lepšie rozdeliť kód, a zlučovať samostatné súbory neskôr vo výrobe.

Niektorí sprievodcovia štýlom, ako napríklad ThinkUp, nás tiež varujú nepoužívajte vložené alebo vložené štýly pokiaľ to nie je nevyhnutné; je to tiež užitočné pravidlo, ktoré stojí za použitie.

hniezdenia

Hniezdanie je skvelý prvok v CSS, ale niekedy môže skončiť mimo kontroly. Nikto sa necíti obzvlášť šťastný, najmä uprostred frustrujúceho ladiaceho procesu, ktorý narážal na mimoriadne dlhé výbery:

 .class_1 .class_2 # id_1 # id_2 ak span color: #bad; 

Takže je vždy dobré nastaviť primeraný limit hniezdenia, napríklad GitHub vybral vo svojej príručke štýlov tri úrovne. Obmedzením hniezdenia sa môžeme tiež snažiť, aby sme napísali lepší štruktúrovaný kód.

Pravidlá pomenovania

Použitie koherentných pravidiel pomenovania pre selektory CSS je kľúčové, ak chceme porozumieť nášmu kódu mesiacov alebo aj rokov. Existuje veľa riešení a tam existuje len jedno prísne pravidlo, ktoré musíme dodržiavať tzn. meno voliča nemôže začínať číslom.

Štyri spoločné štýly, ktoré sa používajú pri pomenovávaní voličov, sú .malými písmenami, .under_scores, .uháňať-es, a .lowerCamelCase. Je v poriadku vybrať niektorú z nich, ale musíme sledovať rovnakú logiku v celom projekte.

Použitím iba mená sémantického selektora je tiež nevyhnutné, ak chceme mať zmysluplný kód. Napríklad namiesto .red-button (čo nezobrazuje to, čo tlačidlo robí), je lepšie používať .alert tlačidlá meno (čo hovorí, čo robí), pretože týmto spôsobom umožňujeme vývojárom (a našim budúcim ja) pochopiť, čo toto tlačidlo robí.

navyše ak chceme v budúcnosti zmeniť farbu z červenej na niečo iné, môžeme to ľahko urobiť bez problémov. Existujú aj predbežné konvencie CSS, ako napríklad konvencia BEM (Block, Element, Modifier), ktorá výsledkom je konzistentná pomenová štruktúra s jedinečnými a zmysluplnými názvami.

Pravidlá formátovania

Formátovanie kódu zahŕňa napríklad používanie medzery, tabuľky, odsadenie, medzery, prerušenia riadkov atď. Vo formáte nie je naozaj všeobecne dobrá ani zlá metóda, jediným pravidlom je vyberte koherentné pravidlá, ktoré majú za následok čitateľný kód, a sledujte ich.

Dropbox napríklad vyžaduje, aby vývojári umiestnili medzery za dvojbodkou do vyhlásení o vlastníctve, zatiaľ čo Evernote používa dva medzery na odsadenie. Môžeme nastaviť toľko formátovacích pravidiel, ako sa nám vyhovuje, ale nikdy viac ako je možné pochopiť.

Príkaz na vyhlásenie

Objednávané veci sú vždy ľahšie viditeľné a objednávanie vyhlásení CSS (vlastnosti s ich hodnotami) podľa pravidla, ktoré má zmysel, vedie k lepšie organizovanému kódu.

Pozrite sa napríklad na pravidlá objednávania vlastníctva WordPress, definuje nasledujúcu jednoduchú, ale logickú základnú líniu pre usporiadanie, v ktorej vlastnosti sú zoskupené podľa ich významu:

1. zobraziť
2. polohovanie
3. Box model
4. Farby a typografia
5. ostatné

Jednotky a hodnoty

Rozhodovanie o tom, ako chceme používať jednotky a hodnoty, je dôležité nielen pre dosiahnutie jednotného kódu, ale aj keby sme tak neurobili, mohli by sme skončiť s niečím divným

Predstavte si miesto, ktoré sa striedavo používa px, em, a rem merania dĺžky. Nebude to vyzerať iba zle v editore kódov, ale s najväčšou pravdepodobnosťou budú niektoré prvky prekvapivo malé alebo veľké na tomto webe.

Musíme tiež prijímať rozhodnutia o hodnotách farieb (hexadecimálny, rgb alebo hsl) a či chceme použiť skratkové vlastnosti a podľa ktorých pravidiel. Je tu inštrukcia, ktorá je obsiahnutá v každej príručke štýlu CSS kódu, do ktorej som narazil, t. nešpecifikujte jednotky pre hodnoty 0 (naozaj, jednoducho nie).

.trieda // dobrá marža: 0; // zlé rozpätie: 0px; // zlé rozpätie: 0em; // zlé rozpätie: 0rem; 

komentovanie

Komentár je nevyhnutný vo všetkých jazykoch, ale v CSS neumožňuje len ladenie a tvorbu dokumentácie, ale aj sekcie pravidiel CSS do logických skupín. Môžeme použiť buď / * ... * / alebo // ... štýl zápisu pre komentáre v CSS, dôležitá vec je zostať konzistentný s komentármi v našom projekte.

Idiomatic CSS napríklad vytvára zmysluplný komentovací systém, ktorý dokonca používa niektoré základné ASCII umenie a výsledkom je krásne organizovaný kód: