Kako optimizirati CSS s vodičima za stilove koda

Kada dizajneri govore o stilu vodiča, oni obično znače dogovoreni priručnik na koherentan izgled i dojam web stranice ili aplikacije, s dobro osmišljenim shema boja, tipografija i korisničko sučelje koji se koristi u cijelom projektu.

Postoji još jedan tip vodiča za stil koji se može koristiti iu razvoju weba, a jednako je važan, ali mnogo rjeđe raspravljen: stilski vodiči za sam kod. Vodiči za stil kodova su radije programeri nego dizajneri, a njihov je glavni cilj optimizirati CSS ili drugi kod.

Stavljanjem odgovarajućih vodiča u stilu koda koristimo a bolje organizirana, konzistentna baza koda, poboljšana čitljivost koda i više održivog koda. Nije slučajnost da ih velike tehnološke tvrtke, kao što su Google, AirBnB ili Dropbox, dobro koriste.

U ovom postu ćemo pogledati kako možemo pametno optimizirati naš CSS uz pomoć vodiča za stil CSS koda.

Vodiči za stilove kôda i knjižnice uzoraka

U našoj industriji postoji određeni stupanj neizvjesnosti o tome što možemo nazvati vodičem po stilu. Popis osim na primjer ga koristi sinonimno s pojmom knjižnica uzoraka u ovom članku, ali možemo naići na tu vrstu definicije iu drugim postovima.

S druge strane, postoje i publikacije, kao što su CSS Tricks ili Brad Frostov blog, koje razlikuju vodiče po stilu koda od knjižnica uzoraka. Ovaj potonji pristup nas vjerojatno dovodi bliže dobro optimiziranoj web stranici, kao dopušta nam da odvojeno obradimo kod i dizajn, tako ćemo to upotrijebiti u ovom postu.

Vodiči za stilove kôdova i knjižnice uzoraka uključuju strategiju oblikovanja, ali različite vrste. Knjižnice uzoraka, kao što su Bootstrap, Zurb Foundation, BBC-jev globalni jezik iskustva ili MailChimp-ova knjižnica uzoraka, pružaju nam korisničko sučelje s CSS klasama, tipografijom, shemom boja, ponekad mrežnim sustavom i drugim dizajnerskim uzorcima..

Vodiči za stil CSS koda, kao što su Evernote ili ThinkUp (ili oni koji se spominju u uvodu) sadrže pravila o pisanju CSS-a uključujući i takve stvari konvencije imenovanja, struktura datoteka, redoslijed svojstava, oblikovanje koda, i drugi.

Imajte na umu da živi generatori vodiča za stil, kao što su KSS, Styledown ili Pattern Lab, generirati knjižnice uzoraka i ne stilski vodiči za kodiranje. Dok su biblioteke obrazaca također vrlo korisne i podižu proces razvoja weba, ne dopuštaju nam da optimiziramo sam kod.

Izradite svoj CSS Code Guide

Krajnji cilj vodiča za stil CSS koda je osigurati da možemo raditi s konzistentnom, lako debagljivom bazom koda koju su napisali programeri koji svi slijede ista pravila oblikovanja koda. Izrada vodiča za stil CSS koda može potrajati malo vremena, ali vrijedi truda, jer to moramo učiniti samo jednom. Tada možemo koristiti isti vodič kroz različite projekte.

Važno je napomenuti da su najbolji stilski vodiči ne sadrži samo pravila za oblikovanje, nego i primjere dobre i loše upotrebe, jer na taj način programeri mogu intuitivnije razumjeti pravila.

Na primjer, AirBnB prikazuje dobre i loše primjere programerima na sljedeći lako probavljiv način:

Struktura datoteke

Prvo, moramo shvatiti logiku prema kojoj ćemo organizirati naše CSS datoteke. Za manje projekte dovoljna je jedna CSS datoteka, ali za veće one uvijek bolje razbiti kod, i spojiti zasebne datoteke kasnije u proizvodnji.

Neki stilski vodiči kao što je ThinkUp's također nas upozorava ne koristite ugrađene ili ugrađene stilove osim ako je neizbježno; to je također korisno pravilo koje vrijedi primijeniti.

traženje gnijezda

Gniježđenje je izvrsna značajka u CSS-u, ali ponekad može i izvan kontrole. Nitko se ne osjeća posebno sretnim, osobito usred frustrirajućeg procesa otklanjanja pogrešaka, bumperirajući u ekstra duge selektore kao što je ovaj:

 .class_1 .class_2 # id_1 # id_2 li span boja: #bad; 

Tako je uvijek dobro postavite razumnu granicu gniježđenja, na primjer GitHub je odabrao tri razine u svom vodiču za stil. Ograničavanjem gniježđenja možemo se i prisiliti da napišemo bolje strukturirani kod.

Pravila imenovanja

Korištenje koherentnih pravila imenovanja za CSS selektore ključno je ako želimo razumjeti naš kod mjesecima ili čak godinama kasnije. Postoje mnoga rješenja, i postoji samo jedno strogo pravilo koje moramo slijediti tj. ime selektora ne može započeti brojem.

Četiri uobičajena stila korištena u imenovanju selektora su .malim slovima, .under_scores, .crtica-es, i .lowerCamelCase. U redu je odabrati bilo koju od njih, ali moramo slijediti istu logiku u cijelom projektu.

koristeći samo imena semantičkih selektora također je bitno ako želimo imati smislen kod. Na primjer, umjesto .crvena tipka (što ne pokazuje što tipka radi) bolje je koristiti .upozoriti na tipku ime (u kojem piše što radi), na ovaj način omogućavamo razvojnim programerima (i našim budućim osobama) da shvate što.

povrh toga ako želimo promijeniti boju od crvene u neku drugu u budućnosti, lako možemo to učiniti bez muke. Tu su i unaprijed izrađene konvencije imenovanja CSS-a, kao što je BEM (Block, Element, Modifier) ​​konvencija, rezultirati dosljednom strukturom imenovanja s jedinstvenim i smislenim imenima.

Pravila oblikovanja

Formatiranje koda uključuje stvari kao što je korištenje razmaka, kartica, uvlačenja, razmaka, prijelaza redaka itd. U oblikovanju zapravo ne postoji općenito dobar ili loš način, jedino pravilo je da odabrati koherentna pravila koja rezultiraju čitljivim kodom, i slijedite ih.

Dropbox na primjer zahtijeva programerima da stavljaju razmake iza dvotočke u deklaracijama svojstava, dok Evernote koristi dva mjesta za uvlačenje. Možemo postaviti onoliko pravila oblikovanja koliko nam je ugodno, ali nikad više nego što je moguće shvatiti.

Redoslijed deklaracije

Uređene stvari uvijek je lakše vidjeti, i naručivanje CSS deklaracija (svojstva s njihovim vrijednostima) prema pravilu koje ima smisla rezultira bolje organiziranim kodom.

Pogledajte na primjer pravila uređivanja svojstava WordPressa, definira sljedeću jednostavnu, ali logičnu osnovicu za naručivanje u kojoj su svojstva grupirana prema njihovom značenju:

1. Prikaz
2. namještanje
3. Model kutije
4. Boje i tipografija
5. drugo

Jedinice i vrijednosti

Odluka o tome kako želimo koristiti jedinice i vrijednosti nije važna samo za postizanje konzistentnog izgleda koda, nego i ako to ne učinimo, možda završimo s nečim čudnim

Zamislite mjesto koje naizmjence koristi px, em, i rEM mjerenja duljine. U uređivaču koda neće izgledati samo loše, ali vjerojatno će neki elementi biti iznenađujuće mali ili veliki na toj web-lokaciji.

Također moramo donositi odluke o vrijednostima boja (heksadecimalni, rgb ili hsl), te želimo li koristiti skraćena svojstva i prema kojim pravilima. Tu je instrukcija koja je uključena u svaki vodič za stil CSS koda u koji sam naletio, tj. ne navode jedinice za 0 vrijednosti (stvarno, jednostavno ne).

.class // dobra margina: 0; // loše margine: 0px; // loše margine: 0em; // loše margine: 0rem; 

Komentiranje

Kodovi za komentiranje bitni su na svim jezicima, ali u CSS-u to ne samo da olakšava ispravljanje pogrešaka i izradu dokumentacije, nego također dijeli CSS pravila u logičke grupe. Možemo koristiti bilo koji / *… * / ili // ... notacija stil za komentare u CSS, važno je da ostanite dosljedni s komentarima kroz naš projekt.

Primjerice, idiomatski CSS uspostavlja smislen sustav za komentiranje koji čak koristi neke osnovne ASCII umjetnosti i rezultira lijepo organiziranim kodom: