Kako optimizirati CSS s smernicami za slog kode

Ko oblikovalci govorijo o slogih, običajno pomenijo dogovorjeni priročnik na skladen videz in občutek spletne strani ali aplikacije, z dobro oblikovanim barvna shema, tipografija in uporabniški vmesnik ki se uporablja v celotnem projektu.

Obstaja tudi druga vrsta slogovnega vodnika, ki ga lahko uporabimo tudi pri razvoju spleta, in prav tako je pomembna, vendar veliko redkeje obravnavana: vodnikov za slog. Vodniki po slogu kode so namesto razvijalcev kot oblikovalci, njihov glavni cilj pa je optimizirati CSS ali drugo kodo.

Če uporabimo pravilne vodnike za slog kode, dobimo a bolje organizirana, skladna koda koda, izboljšana berljivost kode in bolj vzdržljiva koda. Ni naključje, da jih uporabljajo velike tehnološke družbe, kot so Google, AirBnB ali Dropbox.

V tem prispevku si bomo ogledali, kako lahko pametno optimiziramo naš CSS s pomočjo vodnikov za stil CSS kode.

Priročniki za slog kode in knjižnice vzorcev

V naši industriji obstaja določena stopnja negotovosti glede tega, kaj lahko imenujemo slog vodnik. Seznam poleg na primer ga uporablja sopomenko z izrazom knjižnica vzorcev v tem članku, vendar se lahko na tovrstno definicijo srečamo tudi na drugih mestih.

Po drugi strani pa obstajajo tudi publikacije, kot so CSS Tricks ali blog Brad Frosta, ki razlikujejo vodnike po slogu kode od knjižnic vzorcev. Slednji pristop nas bo verjetno približal dobro optimizirani spletni strani, kot je Omogoča nam ločeno obravnavo kode in oblikovanja, zato bomo to uporabili v tej objavi.

Oba vodnika za slog kode in knjižnice vzorcev vključujejo strategijo oblikovanja, vendar drugačno vrsto. Knjižnice vzorcev, kot so Bootstrap, Zurb Foundation, BBC-jev globalni jezik doživetja ali knjižnica vzorcev MailChimp, nam omogočajo uporabniški vmesnik s predpostavljenimi CSS razredi, tipografijo, barvno shemo, včasih mrežnim sistemom in drugimi vzorci oblikovanja..

Vodniki za stil CSS kode, kot so Evernote ali ThinkUp (ali tisti, ki so omenjeni v uvodu), vsebujejo pravila o pisanju CSS vključno s stvarmi konvencije imenovanja, struktura datotek, vrstni red lastnosti, oblikovanje kod, in drugi.

Upoštevajte, da živi generatorji slovnega vodnika, kot so KSS, Styledown ali Pattern Lab, ustvarite knjižnice vzorcev in ne slogi vodnikov za kodiranje. Medtem ko so knjižnice vzorcev zelo koristne in dvigujejo proces razvoja spletnih strani, nam ne omogočajo, da bi optimizirali kodo.

Zgradite svoj vodnik po stilu CSS kode

Končni cilj vodnika za slog kode CSS je zagotoviti, da lahko delamo z dosledno in preprosto razhroščeno kodno bazo, ki so jo napisali razvijalci in vsi sledijo istim pravilom oblikovanja kode. Ustvarjanje vodnika za slog kode CSS lahko traja nekaj časa, vendar je vredno truda, saj ga moramo narediti samo enkrat. Nato lahko uporabimo isti vodnik po različnih projektih.

Pomembno je omeniti, da so najboljši slogi vodniki vsebujejo samo pravila za oblikovanje, ampak tudi primere dobre in slabe uporabe, saj lahko tako razvijalci bolj intuitivno razumejo pravila.

Na primer AirBnB razvijalcem prikazuje dobre in slabe primere na naslednji lahko prebavljiv način:

Struktura datoteke

Najprej moramo ugotoviti logiko, po kateri bomo organizirali CSS datoteke. Za manjše projekte je lahko dovolj ena CSS datoteka, za večje pa je vedno bolje razčleniti kodo, in ločite datoteke kasneje v proizvodnji.

Nekateri slogi, kot so ThinkUp's, nas prav tako opozarja ne uporabljate vrstnih ali vdelanih slogov razen če je to neizogibno; prav tako je koristno pravilo, ki ga je vredno uporabiti.

Gnezdenje

Nestiranje je odlična značilnost v CSS-ju, včasih pa lahko izgine iz nadzora. Nihče se ne počuti posebej zadovoljnega, še posebej sredi frustrirajučega postopka razhroščevanja, ki se vrača v zelo dolge selektorje, kot je ta:

 .class_1 .class_2 # id_1 # id_2 li razpon barva: #bad; 

Zato je vedno dobro določiti razumno mejo gnezdenja, GitHub je na primer izbral tri ravni v svojem stilskem vodniku. Z omejitvijo gnezdenja se lahko tudi prisilimo, da napišemo bolje strukturirano kodo.

Pravila poimenovanja

Uporaba skladnih pravil za poimenovanje za CSS selektorje je ključnega pomena, če želimo razumeti našo kodo mesecev ali celo let kasneje. Obstaja veliko rešitev, in obstaja samo eno strogo pravilo, ki ga moramo upoštevati ime izbirnika se ne more začeti s številko.

Štirje skupni slogi, ki se uporabljajo v imenovanju izbirnikov, so .male črke, .under_scores, .pomišljaj, in .lowerCamelCase. V redu je izbrati katerokoli od njih, vendar moramo slediti isti logiki v celotnem projektu.

Uporaba samo imena semantičnih selektorjev prav tako je bistvenega pomena, če želimo imajo smiselno kodo. Na primer, namesto .rdeči gumb (ki ne prikazuje, kaj gumb počne) je bolje uporabiti .gumb za opozorilo ime (ki pravi, kaj počne), na ta način razvijalcem (in našim prihodnjim jazom) omogočamo, da razumejo, kaj je storil gumb.

Poleg tega če želimo v prihodnosti spremeniti barvo iz rdeče v drugo, lahko brez težav naredimo to. Obstajajo tudi predpostavljene konvencije o poimenovanju CSS, kot je konvencija BEM (Block, Element, Modifier), ustvari dosledno strukturo poimenovanja z edinstvenimi in smiselnimi imeni.

Pravila za oblikovanje

Oblikovanje kode vključuje stvari, kot so uporaba presledkov, zavihkov, zamikov, razmikov, prelomov vrstic itd. Pri oblikovanju ni povsem dobre ali slabe metode, edino pravilo je, da izberete koherentna pravila, katerih rezultat je berljiva koda, in jim sledite.

Na primer, program Dropbox zahteva, da razvijalci v deklaracijah lastnosti vstavijo presledke za dvopičjem, medtem ko Evernote za zamik uporabi dva prostora. Ustvarimo lahko toliko pravil za oblikovanje, kot jih imamo, vendar nikoli več, kot je mogoče.

Naročilo deklaracije

Naročene stvari je vedno lažje videti skozi naročanje deklaracij CSS (lastnosti z njihovimi vrednostmi) v skladu s pravilom, ki ima smisel, pomeni boljšo organizirano kodo.

Oglejte si na primer pravila za urejanje premoženja WordPress, ki določajo naslednjo preprosto, vendar logično osnovo za urejanje, pri kateri so lastnosti razvrščene po pomenu:

1. Zaslon
2. Položaj
3. Model škatle
4. Barve in tipografija
5. Drugo

Enote in vrednosti

Odločitev o tem, kako želimo uporabljati enote in vrednote, ni pomembna le za doseganje doslednega pogleda na kodo, ampak tudi, če tega ne naredimo, bomo morda dobili nekaj čudnega

Zamislite si mesto, ki izmenično uporablja px, em, in rem meritve dolžine. V urejevalniku kode ne bo videti le slabo, vendar bodo verjetno nekateri elementi na tem mestu presenetljivo majhni ali veliki.

Odločiti se moramo tudi o barvnih vrednostih (šestnajstiški, rgb ali hsl) in o tem, ali želimo uporabiti kratkostične lastnosti in po katerih pravilih. Obstaja navodilo, ki je vključeno v vsak vodnik za slog kode CSS, v katerega sem naletel, t.j.. ne podajte enot za vrednosti 0 (res, samo ne).

.class // dobra stopnja: 0; // slaba marža: 0px; // slaba marža: 0em; // slabo območje: 0rem; 

Komentiranje

Koda za komentiranje je bistvena v vseh jezikih, vendar v CSS ne olajšuje samo razhroščevanja in izdelave dokumentacije, ampak tudi razvršča pravila CSS v logične skupine. Lahko uporabimo oba / *… * / ali //… notacija slog za komentarje v CSS, je pomembno, da ostanite dosledni s komentarji v našem projektu.

Idiomatični CSS na primer vzpostavlja pomemben sistem za komentiranje, ki celo uporablja nekatere osnovne ASCII umetnosti, rezultat pa je lepo urejena koda: