Css îmbunătățirea lizibilitatea cu proprietăți personalizate, lopart

Eliminați codul duplicat

standuri pentru DRY «Nu te repeți» sau «nu se repetă.“ Bună țintă, deoarece va salva nu numai un text, dar, de asemenea, timp pentru a căuta, înlocui, și depanare, dacă doriți dintr-o dată să se schimbe ceva. Pur și simplu pune, această abordare reduce costurile de întreținere cod.

Să considerăm un exemplu. Mai jos este un cod CSS rău, cu o mulțime de repetiție:

Dacă doriți să modificați tema de culoare, trebuie să modificați valoarea primelor trei selectorii. Culoarea semnăturii nu poate fi atins.

Deci, cum poate ajuta la proprietăți CSS personalizate? Setați valoarea dată și apoi utilizați de peste si peste din nou! Să creeze o proprietate personalizată -theme-culoare:

Păstrarea culoarea temă într-o variabilă personalizată, puteți efectua modificări într-un singur loc, iar toate valorile vor fi actualizate. Nu numai pentru că ați adăugat semantica în CSS: dacă înainte de culoare a fost dificil să se refere la tema, dar acum acest lucru este în mod clar precizate.

Culoarea Semnătura textului poate fi, de asemenea, înregistrate într-o variabilă de utilizator:

Tocmai am început!

Calculator Pune

Dacă citiți introducerea proprietăților CSS personalizate, trebuie să știți că acestea pot fi folosite cu funcția Calc () pentru a efectua calcule într-un browser.

Să considerăm un exemplu de o grilă:

Dacă ați văzut acest model sau o cunosc bine modelul caseta CSS, cel mai probabil, vei realiza că acest cod creează un aspect cu celule, ale căror părți sunt egale cu 16px si 16px separatoare de lățime între celule. de cod CSS pur este dificil de înțeles, iar noi nu subliniem ceea ce este cu adevărat important.

Dintr-un aspect important de design punct de vedere aici este spațiul din jurul celulelor din 16px. Cu toții ne dorim să configurați ținând cont de rezultatul final, nu calcule intermediare. Prin ele însele, aceste calcule sunt lipsite de importanță, ci pentru a le pune deoparte pentru prea mult timp.

proprietăți personalizate și calculat () ne poate ajuta:

Deci, noi lucrăm cu concepte de calcul semnificative, mai degrabă decât rezultatele acestor calcule. Atât de mult mai ușor de înțeles codul în viitor.

De fapt, această idee poate fi extinsă la întregul aspect al site-ului dvs., elemente ale grilei aliniere:

În exemplul de mai sus, folosim calcule intermediare face codul mai ușor de înțeles.

Notă: în Safari / WebKit întâmpină probleme cu calculele intermediare de acest tip. Problema a fost stabilită în Safari Technology Preview, este probabil ca fixe și următoare Safari 10.1 de presă.

citește modificările

Până acum am vorbit despre valorile care sunt specificate în documentul de o dată și apoi reutilizați oriunde, fără modificări majore. Cu toate acestea, proprietățile personalizate sunt chiar mai utile atunci când există o valoare care trebuie să fie modificată în anumite circumstanțe.

Să considerăm un exemplu. aspect ochiurilor de plasă simplă pe flexbox:

Pur și simplu nu înțeleg ce se întâmplă aici. Să ne uităm la codul. În mod implicit, grila cu o singură coloană este construită pentru ecrane mici. Deoarece plasa de ecran este extins la 3 și 6 coloane. Ca și în exemplul din secțiunea anterioară, avem o celulă cu un 16px 16px laterale și separatoare.

Acum, toate calculele sunt efectuate în același loc. Rămâne doar pentru a schimba valorile proprietăților personalizate în toate cererile mass-media. Fie că știți codul sau nu, astfel încât a devenit mult mai clar și mai ușor de citit. Și, ca un bonus, astfel încât să nu faci o greșeală când tastați în calcule în noile interogări media, și nu va duce la rezultate neașteptate!

Notă: Codul de mai sus poate fi prea dificil pentru preprocesorul CSS. Păstrați acest lucru în minte dacă utilizați ceva de genul asta și de a obține un rezultat neașteptat!