Kaip optimizuoti CSS su kodo stiliaus vadovais

Kai dizaineriai kalba apie stiliaus vadovus, jie paprastai reiškia sutartą vadovą ant nuoseklią išvaizdą tinklalapio ar paraiškos su gerai suplanuotu spalvų schema, tipografija ir UI jis naudojamas visame projekte.

Taip pat yra ir kito stiliaus vadovo, kurį galime naudoti ir interneto svetainių kūrime, ir tai yra taip pat svarbu, bet daug retiau aptarta: stiliaus vadovus pačiam kodui. Kodo stiliaus vadovai yra labiau nei kūrėjams skirti kūrėjams, o jų pagrindinis tikslas yra optimizuoti CSS arba kitą kodą.

Naudojant tinkamus kodo stiliaus vadovus, suteikiama a geriau organizuotas, nuoseklus kodo pagrindas, geresnis kodų įskaitomumas ir labiau tvarkomas kodas. Tai nėra atsitiktinumas, kad pagrindinės technologijų kompanijos, pvz., „Google“, „AirBnB“ ar „Dropbox“, puikiai jas naudoja.

Šiame pranešime apžvelgsime, kaip mes galime sumaniai optimizuoti mūsų CSS, naudodami CSS kodo stiliaus vadovus.

Kodo stiliaus vadovai ir modelių bibliotekos

Mūsų pramonėje yra tam tikras neapibrėžtumas dėl to, ką galime vadinti stiliaus vadovu. Išskyrus sąrašą pavyzdžiui, naudoja jį sinonimu su terminu modelio biblioteka šiame straipsnyje, bet mes galime įveikti tokį apibrėžimą ir kituose postuose.

Kita vertus, yra ir leidinių, pvz., „CSS Tricks“ arba „Brad Frost“ tinklaraštis, kurie išskiria kodo stiliaus vadovus iš modelių bibliotekų. Pastarasis požiūris tikriausiai priartina mus prie gerai optimizuotos svetainės, kaip tai leidžia valdyti kodą ir dizainą atskirai, todėl mes naudosime tai šiame pranešime.

Tiek kodo stiliaus vadovai, tiek modelių bibliotekos apima stiliaus strategiją, tačiau kitokį. Šablonų bibliotekos, pvz., „Bootstrap“, „Zurb Foundation“, „BBC Global Experience Language“ arba „MailChimp“ modelių biblioteka, suteikia mums UI su „CAD“ klasėmis, tipografija, spalvų schema, kartais tinklelio sistema ir kitais dizaino modeliais.

CSS kodo stiliaus vadovai, pvz., „Evernote“ arba „ThinkUp“ (arba intro), yra taisyklės, kaip rašyti CSS įskaitant tokius dalykus kaip pavadinimų sutartys, failų struktūra, nuosavybės tvarka, kodo formatavimas, ir kiti.

Atkreipkite dėmesį, kad gyvenimo stiliaus gido generatoriai, pvz., KSS, Styledown arba Pattern Lab, kurti modelių bibliotekas ir ne kodavimo stiliaus vadovai. Nors modelių bibliotekos taip pat yra labai naudingos ir didina interneto kūrimo procesą, jos neleidžia pačiam optimizuoti kodo.

Sukurkite savo CSS kodo stiliaus vadovą

Galutinis CSS kodo stiliaus vadovo tikslas yra užtikrinti, kad galėtume dirbti su nuosekliu, lengvai išskaidytinu kodų bazės, parašytos kūrėjams, kurie visi laikosi tų pačių kodų stiliaus taisyklių. CSS kodo stiliaus vadovo sukūrimas gali užtrukti šiek tiek laiko, bet verta pastangų, nes mes turime tai padaryti tik vieną kartą. Tada mes galime naudoti tą patį stiliaus vadovą įvairiuose projektuose.

Svarbu pažymėti, kad geriausi stiliaus vadovai jame nėra tik stiliaus taisyklių, bet ir pavyzdžių geras ir blogas naudojimas, nes tokiu būdu kūrėjai gali intuityviau suprasti taisykles.

Pavyzdžiui, „AirBnB“ rodo gerus ir blogus pavyzdžius kūrėjams tokiu lengvai virškinamu būdu:

Failų struktūra

Pirma, turime išsiaiškinti logiką, pagal kurią organizuosime CSS failus. Mažesniems projektams gali pakakti vieno CSS failo, tačiau didesnių projektų atveju visada geriau sugriauti kodą, ir vėliau susieti atskiras rinkmenas.

Kai kurie stiliaus vadovai, pavyzdžiui, „ThinkUp“, taip pat mus įspėja nenaudojate inline arba įterptųjų stilių nebent tai yra neišvengiama; tai taip pat naudinga taisyklė, kurią verta taikyti.

Lizdavimas

Lizdas yra puiki CSS savybė, tačiau kartais ji gali būti kontroliuojama. Niekas nesijaučia ypač laimingas, ypač varginantis klaidų šalinimo procesas, įsibėgėjęs į tokius itin ilgus selektorius:

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

Taigi visada gerai nustatyti priimtiną lizdus, pavyzdžiui, „GitHub“ savo stiliaus vadove pasirinko tris lygius. Ribojant lizdus, ​​galime priversti save parašyti geriau struktūrizuotą kodą.

Pavadinimo taisyklės

Suderintų pavadinimų taisyklių taikymas CSS selektoriams yra labai svarbus, jei norime suprasti mūsų kodo mėnesius ar net metus. Yra daug sprendimų, ir reikia laikytis tik vienos griežtos taisyklės t. y. pasirinktuvo pavadinimas negali prasidėti skaičiumi.

Keturi bendrieji stiliai, naudojami selektoriaus pavadinime .mažosios raidės, .under_scores, .brūkšnys, ir .LowerCamelCase. Tai gerai, jei norite pasirinkti bet kurį iš jų, bet mes turime laikytis tos pačios logikos visame projekte.

Naudojimas tik semantinio pasirinkimo pavadinimai taip pat svarbu, jei norime turėti prasmingą kodą. Pavyzdžiui, vietoj .raudonas mygtukas (kuris nerodo, ką daro mygtukas) geriau naudoti .įspėjimo mygtukas pavadinimas (kuris sako, ką jis daro), tokiu būdu įgaliname kūrėjus (ir mūsų ateitį) suprasti, ką sako mygtukas.

Be to jei norime ateityje pakeisti savo spalvą iš raudonos į kitą, galime tai padaryti be vargo. Taip pat yra numatytos CSS pavadinimo konvencijos, pvz., BEM (blokas, elementas, modifikatorius) konvencija rezultatas yra nuosekli vardų struktūra su unikaliais ir prasmingais pavadinimais.

Formatavimo taisyklės

Kodo formatavimas apima tokius dalykus, kaip erdvės naudojimas, skirtukai, įtraukimas, tarpai, linijų pertraukos ir kt. Formatavime nėra visuotinai gero ar blogo metodo, vienintelė nykščio taisyklė yra pasirinkti nuoseklesnes taisykles, kurios sukurtų skaitomą kodą, ir sekite juos.

Pavyzdžiui, „Dropbox“ reikalauja, kad kūrėjai pateiktų erdvę po dvitaškio nuosavybės deklaracijose, o „Evernote“ naudoja dvi tarpas įtraukimui. Mes galime sukurti tiek daug formatavimo taisyklių, kaip ir mes niekada daugiau nei įmanoma suvokti.

Deklaracijos tvarka

Užsakyti dalykai visada yra lengviau matomi, ir užsakyti CSS deklaracijas (savybės su jų vertėmis) pagal taisyklę, kuri yra prasminga, geriau organizuotas kodas.

Pažvelkite, pvz., „WordPress“ turto užsakymo taisykles, ji apibrėžia šią paprastą, bet loginę bazę, kad būtų galima užsakyti, kurios savybės yra sugrupuotos pagal jų reikšmę:

1. Ekranas
2. Padėties nustatymas
3. Dėžutės modelis
4. Spalvos ir tipografija
5. Kita

Vienetai ir vertės

Sprendimas, kaip mes norime naudoti vienetus ir vertybes, yra svarbus ne tik norint pasiekti nuoseklią kodo išvaizdą, bet ir tuo atveju, jei to nepadarysime, galime baigti kažką keisto

Įsivaizduokite svetainę, kuri naudojasi pakaitomis px, em, ir rem ilgio matavimai. Kodo redaktoriuje jis bus ne tik blogas, bet greičiausiai kai kurie elementai šioje svetainėje bus stebėtinai maži ar dideli.

Taip pat turime priimti sprendimus dėl spalvų reikšmių (šešioliktainis, rgb arba hsl) ir ar norime naudoti trumpąsias savybes ir pagal kurias taisykles. Yra instrukcija, kuri yra įtraukta į kiekvieną CSS kodo stiliaus vadovą, kurį aš įsibėgėjau, t. nenurodykite 0 reikšmių vienetų (tikrai, tiesiog ne).

.klasė // gera marža: 0; // bloga paraštė: 0px; // bloga marža: 0em; // bloga marža: 0rem; 

Komentuoti

Komentavimo kodas yra būtinas visomis kalbomis, bet CSS tai ne tik palengvina derinimo ir dokumentų formavimo procesą, bet ir seka CSS taisykles į logines grupes. Mes galime naudoti arba / *… * / arba //… žymėjimo stilius, skirtas komentarams CSS, svarbu išlikti nuosekli su mūsų pastabomis.

Pavyzdžiui, Idiomatinis CSS sukuria prasmingą komentavimo sistemą, kuri netgi naudoja kai kuriuos pagrindinius ASCII menus, ir sukuria gražiai organizuotą kodą: