Share
Când lucrați cu preprocesoare CSS, cum ar fi Sass, Less (sau orice alt limbaj de programare), veți folosi puterea variabilelor. Cu toate acestea, dacă creați în mod spontan numele variabilelor pe măsură ce codificați, probabilitatea că convenția dvs. de denumire va lipsi de coerență. Ar trebui să vă gândiți la organizarea modulară a numelor variabilelor (și a proiectului pentru acest lucru). Acest lucru va aduce structura și unitatea proiectului dvs. în ansamblul său, făcând mai ușor să înțelegeți și să navigați pe tot parcursul proiectului.
Spuneți că aveți nevoie de o variabilă pentru culoarea textului în proiectul dvs. Ai putea suna $ Text de culoare, sau ar trebui să-l numiți $ Culoare text? Cum te hotărăști? Alegerea una la întâmplare poate contribui la o lipsă de structură deoarece crește numărul de variabile din proiectul dvs. După cum arată experiența, adesea uităm exact cum am numit variabilele pentru anumite proiecte. Acest lucru duce la confuzii și metode consumatoare de timp de căutare și înlocuire globală pentru numele variabilelor.
Ceea ce avem nevoie este o regulă pentru definirea și selectarea denumirilor de variabile. O modalitate foarte bună de a păstra modularitatea în proiectul dvs. este de a grupa variabile care împărtășesc relații și comunități. Apoi le puteți numi prin aranjarea cuvintelor care descriu funcția lor de la generic la specific (la fel CSS funcționează cu specificitate) de la stânga la dreapta.
De exemplu, dacă am patru variabile pentru patru culori de graniță diferite, le pot numi pe toate începând cu "frontieră" (ca termen generic pe care îl distribuie toți) și să devină mai specific cu o lectură de la stânga la dreapta. Gruparea și numirea variabilelor în acest mod face ca codul dvs. să fie mai ușor de citit, de înțeles și de rechemat.
Să presupunem că lucrăm în SASS și vrem să creăm o serie de variabile care definesc paleta de culori a proiectului nostru. Dacă lucrăm cu o nuanță de albastru, am putea crea câteva variabile de genul:
$ Albastru; $ Albastru închis; $ Medie albastru; $ Cea mai întunecată albastru; $ Lumina albastru; $ Mai ușor albastru;
O modalitate mai bună de a denumi aceste variabile ar fi să începeți cu cuvântul generic pe care aceștia toți îl împărtășesc în comun: albastru. Apoi putem ajunge mai specific de la stânga la dreapta:
$ Albastru; $ Albastru-inchis; $ Albastru-cel mai întunecat; $ Albastru-deschis; $ Albastru-mai ușor;
Acest lucru nu numai că ajută la reculegere, ci va permite unui editor de text (cum ar fi Sublime Text, Coda etc.) să sugereze cu ușurință culorile. În acest fel nu trebuie să memorați exact cum v-ați numit variabilele. Mai degrabă, puteți să începeți generic și să deveniți mai specific, deoarece editorul de text propune automat nume de variabile. Tot ce trebuie să vă amintiți este că doriți o culoare albastră. Deci, începeți să tastați $ albastru și puteți obține o listă a tuturor diferitelor blues pe care le-ați creat!
Imaginați-vă că lucrez la un proiect mare și mi-am grupat toate variabilele care conțin valori de culoare prin prefixarea lor cu cuvântul generic pe care îl au în comun: culoare.
// OK $ border-color; $ Dark-border-color; $-Culoare-lumină de frontieră; evidențiați $; link-ul $; $ Link-întuneric; Text $; $ Culoare text; $ Link-culoare-lumină; $ Mai ușor text culori;
// Mai bun $ border-color; $ Culoare-border-întuneric; $ Culoare-border-lumină; $ Culoare evidenția; $ Culoare-link; $ Culoare-link-întuneric; $ Culoare-link-lumină; $ Culoare text; $ Culoare text-lumină; $ Culoare text-usor;
Apoi, să zicem că am nevoie de o culoare pentru o graniță. Încep să scriu frontieră: 1px solid $ colo și editorul meu de text poate sugera toate variabilele de culoare pe care le-am definit pentru proiectul meu.
Poate că am multe culori în proiectul meu, dar vreau doar culorile de frontieră. Aș putea pre-defini câteva variabile cu culorile dorite la graniță. Apoi, când codificăm, pot continua să restrâng specificul numelui variabilei mele frontieră: 1px solid $ color-frontieră iar editorul meu de text va sugera automat orice variabile pe care le am prin acel prefix. Tot ce trebuie sa fac este sa aleg cel pe care il doresc!
Chiar dacă nu ați avea sugestii de cod, acest lucru ar fi în continuare un mod eficient de a vă numi variabilele. Vă ajută să vă amintiți cu ușurință ceea ce ați denumit variabilele, deoarece variabilele care împărtășesc prefixele relațiilor partajate.
Denumirea variabilelor dvs. în acest mod modular vă va ajuta să înțelegeți proiectul în mod conceptual înainte de a vă codifica, în timp ce codificați și după ce codificați. Este o situație câștigătoare!
Accentsconagua