Kuidas optimeerida CSS koodi stiilijuhiste abil

Kui disainerid räägivad stiilijuhistest, tähendab see tavaliselt kokkulepitud käsiraamat kohta ühtne välimus ja tunne veebisaidi või rakenduse kohta, millel on hästi kavandatud värviskeem, tüpograafia ja kasutajaliides seda kasutatakse kogu projektis.

Samuti on veebi arendamisel võimalik kasutada ka teist tüüpi stiilijuhiseid, ja see on sama oluline, kuid palju harvemini arutatud: stiili juhendid ise koodi jaoks. Koodistiili juhised on pigem arendajatele kui disaineritele ja nende peamine eesmärk on CSS-i või muu koodi optimeerimine.

Õige koodi stiili juhendite kasutuselevõtmine annab meile a paremini organiseeritud, järjepidev koodibaas, parema koodi loetavus ja rohkem hooldatav kood. See ei ole juhus, et suured tehnoloogilised ettevõtted, nagu Google, AirBnB või Dropbox, kasutavad neid hästi.

Selles postituses vaatame, kuidas saame CSS-koodi stiilijuhiste abil oma CSS-i optimaalselt optimeerida.

Koodi stiili juhendid võrreldes mustri raamatukogudega

Meie tööstuses on teatav ebakindlus selle kohta, mida saame stiilijuhiks nimetada. Nimekiri kasutab seda näiteks terminiga sünonüümina mustri raamatukogu selles artiklis, kuid me võime ka sellistesse määratlustesse sattuda ka teistes ametikohtades.

Teisest küljest on olemas ka väljaandeid, nagu CSS trikid või Brad Frosti blogi, mis eristavad koodi stiilijuhiseid mustri raamatukogudest. See viimane lähenemine viib meid tõenäoliselt hästi optimeeritud veebisaidile lähemale see võimaldab meil koodi ja disaini eraldi käsitleda, nii et me kasutame seda selles postituses.

Nii koodi stiili juhendid kui ka mustri raamatukogud sisaldavad stiilistrateegiat, kuid teistsugust. Mustrite raamatukogud, nagu näiteks Bootstrap, Zurb Foundation, BBC globaalse kogemuse keel või MailChimp'i mustri raamatukogu, annavad meile kasutajaliidese, millel on CAD-klassi klassid, tüpograafia, värviskeem, mõnikord võrgusüsteem ja muud disainimustrid.

CSS-koodi stiili juhendid, näiteks Evernote'i või ThinkUp'i (või need, mis on intro-s mainitud) sisaldavad CSS-i kirjutamise reeglid sealhulgas asju nimetamiskonventsioonid, failistruktuur, vara järjekord, koodi vormindamine, ja teised.

Pange tähele, et elustiilijuhi generaatorid, nagu KSS, Styledown või Pattern Lab, luua mustri raamatukogusid ja mitte kodeerimise stiili juhendid. Kuigi mustri raamatukogud on samuti väga kasulikud ja tõstavad veebiarendust, ei võimalda need koodi ise optimeerida.

Ehita oma CSS-koodi stiili juhend

CSS-koodi stiilijuhi lõppeesmärk on tagada, et saame töötada järjekindlalt, kergesti debiteeritava koodijaamaga, mille on kirjutanud arendajad, kes kõik järgivad samu koodi kujundamise reegleid. CSS-koodi stiilijuhi loomine võib võtta natuke aega, kuid see on vaeva väärt, sest me peame seda tegema ainult üks kord. Siis saame kasutada sama stiili juhendit erinevatel projektidel.

Oluline on märkida, et parimad stiilijuhised ei sisalda ainult stiilieeskirju ise, vaid ka näiteid hea ja halb kasutamine, sest nii saavad arendajad paremini mõista reegleid.

Näiteks näitab AirBnB arendajatele häid ja halbu näiteid järgmisel kergesti seeditaval viisil:

Failistruktuur

Esiteks peame leidma loogika, mille kohaselt me ​​korraldame oma CSS-failid. Väiksemate projektide puhul võib olla üks CSS-fail, kuid suuremate projektide puhul on see CSS-fail alati parem kood purustada, ja ühendada eraldi failid hiljem tootmises.

Mõned stiilijuhised, nagu näiteks ThinkUp's, hoiatavad meid ka ei kasuta inline või manustatud stiile kui see pole vältimatu; see on ka kasulik reegel, mida tasub rakendada.

Pesitsemine

Pesemine on CSS-is suurepärane omadus, kuid mõnikord võib see kontrolli alt väljuda. Keegi ei tunne eriti õnnelikku, eriti masendava silumisprotsessi keskel, sattudes sellistesse pikematesse valijatesse:

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

Nii et see on alati hea luua mõistlik pesitsuspiir, näiteks valis GitHub oma stiilis juhendis kolm taset. Pesastamise piiramisega võime ka sundida ennast paremini struktureeritud koodi kirjutama.

Nimetamise reeglid

Kooskõlastatud nimetamise reeglite kasutamine CSS-valijate jaoks on ülioluline, kui tahame mõista meie kood kuud või isegi aastaid hiljem. Seal on palju lahendusi ja seal on ainult üks range reegel, mida peame järgima see tähendab, et valija nimi ei saa algada numbriga.

Neli tavalist stiili, mida kasutatakse valija nimetuses, on .väiketähti, .under_scores, .kriipsud, ja .madalamCamelCase. Ükskõik milline neist on korras, kuid peame kogu projekti ulatuses järgima sama loogikat.

Kasutamine ainult semantilise valija nimed Samuti on oluline, kui tahame omada sisukat koodi. Näiteks .punane nupp (mis ei näita seda, mida nupp teeb) on parem kasutada .hoiatusnupp nimega (mis ütleb, mida ta teeb), võimaldame sel moel arendajatel (ja meie tulevastel iseel) mõista, mida ütles nupp.

enamgi veel kui me tahame muuta oma värvi punasest midagi muud tulevikus, saame seda lihtsalt teha ilma probleemideta. Samuti on olemas eelhääletatud CSS-i nimetamise konventsioonid, nagu näiteks BEM (Block, Element, Modifier) ​​konventsioon tulemuseks on järjepidev nimetusstruktuur unikaalsete ja sisukatega.

Vormindamise reeglid

Koodi vormindamine hõlmab selliseid asju nagu tühiku kasutamine, vahekaardid, sisenemine, vahekaugus, reavahetused jne. Vormingus ei ole tõesti universaalselt hea või halb meetod. valida ühtsed reeglid, mille tulemuseks on loetav kood, ja järgige neid.

Näiteks nõuab Dropbox arendajatelt kinnisvaradeklaratsioonides pärast koolonit tühikuid, samas kui Evernote kasutab sisestamiseks kahte ruumi. Me võime seadistada nii palju vormingureegleid, nagu me oleme rahul, kuid mitte kunagi rohkem kui on võimalik aru saada.

Deklaratsioonikorraldus

Tellitud asju on alati lihtsam näha ja CSS-deklaratsioonide tellimine (omadused koos nende väärtustega) vastavalt reeglile, mis on mõistlik, tulemuseks on parem organiseeritud kood.

Vaadake näiteks WordPressi vara tellimise reegleid, see määratleb järgmise lihtsa, kuid loogilise baasjoone tellimiseks, mille omadused grupeeritakse nende tähenduse järgi:

1. Ekraan
2. Positsioneerimine
3. Kasti mudel
4. Värvid ja tüpograafia
5. Muu

Ühikud ja väärtused

Otsuste tegemine selle kohta, kuidas me tahame ühikuid ja väärtusi kasutada, ei ole oluline ainult järjekindla koodide väljanägemise saavutamiseks, vaid ka siis, kui me seda ei tee, võime lõpuks midagi imelikku

Kujutage ette saiti, mis kasutab vaheldumisi px, em, ja rem pikkuse mõõtmised. See ei näe koodiredaktoris ainult halba, kuid tõenäoliselt on mõned elemendid sellel saidil üllatavalt väikesed või suured.

Samuti peame tegema otsuseid värvide väärtuste kohta (kuueteistkümnend-, rgb- või hsl-väärtused) ning seda, kas me soovime kasutada stenogrammi omadusi ja milliseid reegleid. Igas CSS-koodi stiilijuhis, mida ma sattusin, s.t.. ei määra 0 väärtuste ühikut (tõesti, lihtsalt ära).

.klass // hea varu: 0; // halb varu: 0px; // halb varu: 0em; // halb varu: 0rem; 

Kommenteerimine

Kommenteerimiskood on oluline kõigis keeltes, kuid CSSis see ei hõlma ainult silumise ja dokumentatsiooni koostamist, vaid ka CSS reeglid loogilistesse rühmadesse. Me võime kasutada kas / *… * / või //… CSS-i märkuste stiil, oluline on püsima kommentaarid kogu meie projekti kohta.

Idiomaatiline CSS loob näiteks sisuka kommenteerimissüsteemi, mis kasutab isegi mõningaid põhilisi ASCII kunsti ja annab ilusti organiseeritud koodi: