De ce o virgulă simplifică codificarea
CSS sau foi de stil cascadă, reprezintă modalitatea acceptată a industriei de web design pentru a adăuga stiluri vizuale la un site. Cu CSS, puteți controla aspectul paginii, culorile, tipografia , imaginea de fundal și multe altele. Practic, dacă este vorba de un stil vizual, atunci CSS este calea de a aduce aceste stiluri pe site-ul dvs. Web.
Pe măsură ce adăugați stiluri CSS la un document, este posibil să observați că documentul începe să devină mai lung și mai lung. Chiar și un site mic, cu doar o mână de pagini, poate ajunge cu un fișier CSS considerabil - și un site foarte mare, cu o mulțime de pagini de conținut unic, poate avea fișiere CSS foarte mari. Acest lucru este agravat de site-urile receptive care au o multitudine de interogări media incluse în foile de stil pentru a schimba modul în care arata imaginile vizuale și pagina se bazează pe ecranele diferite.
Da, fișierele CSS pot fi lungi. Aceasta nu este o problemă majoră în ceea ce privește performanța site-ului și viteza de descărcare, deoarece chiar și un fișier CSS de lungă durată va fi destul de mic (deoarece este într-adevăr doar un document text). Cu toate acestea, fiecare bit se numără atunci când vine vorba de viteza paginii, deci dacă puteți să vă faceți foaia de stil mai slabă, aceasta este o idee bună. Aici este locul în care "virgula" poate fi foarte utilă în foaia dvs. de stil!
Comas și CSS
S-ar putea să fi întrebat ce rol joacă virgula în sintaxa selectorului CSS . Ca și în propoziții, virgula aduce claritate - nu cod - separatoarelor. Virgula într-un selector CSS separă mai mulți selectori în aceleași stiluri.
De exemplu, să examinăm câteva CSS de mai jos.
th {culoare: roșu; }
td {culoare: roșu; }
p.red {culoare: roșu; }
div # prima dată {culoare: roșu; }
Cu această sintaxă, spuneți că doriți ca tagurile td , etichetele td , etichetele paragrafilor cu clasa roșie și eticheta div cu codul inițial să aibă toate culorile roșii.
Acest lucru este perfect acceptat de CSS, dar există două dezavantaje semnificative de a scrie în acest fel:
- În viitor, dacă decideți să modificați culoarea fontului acestor proprietăți în albastru, trebuie să faceți această modificare de patru ori în foaia dvs. de stil.
- Se adaugă o mulțime de caractere suplimentare în foaia dvs. de stil, de care nu aveți nevoie. Aceste patru stiluri ar putea să nu pară prea multe, dar dacă veți continua să faceți acest lucru în întreaga foaie de stil, liniile se vor adăuga și acea foaie va fi mult, mult mai mare decât trebuie să fie.
Pentru a evita aceste dezavantaje și pentru a simplifica fișierul CSS, vom încerca să folosim virgule.
Folosind comenzi pentru selectori separați
În loc să scrieți 4 selectori CSS separați și 4 reguli, puteți combina toate aceste stiluri într-o proprietate a unei reguli separând selectorii individuali cu virgulă. Iată cum se va face acest lucru:
th, td, p.red, div # prima dată {culoare: roșu; }
Caracterul de virgulă acționează în esență ca cuvântul "și" în interiorul selectorului. Deci, acest lucru este valabil pentru etichetele t și tag-urile td și tagurile paragrafelor cu clasa roșie ȘI eticheta div cu ID-ul inițial. Asta a fost exact ceea ce am avut înainte, dar în loc de a avea nevoie de 4 reguli CSS, avem o singură regulă cu selectori multiple. Aceasta este virgula în selector, ne permite să avem selectori multiple într-o singură regulă.
Nu numai că această abordare face pentru fișiere CSS mai puține, mai curat, face, de asemenea, actualizări viitoare, mult mai ușor. Acum, dacă doriți să schimbați culoarea de la roșu la albastru, trebuie doar să faceți schimbarea într-o singură locație în loc de cele patru norme originale de stil 4 pe care le-am avut! Gândiți-vă la aceste economii de timp într-un întreg fișier CSS și puteți vedea cum vă va economisi timp și spațiu în runa lungă!
Variația sintaxei
Unii oameni aleg să facă CSS mai lizibil prin separarea fiecărui selector pe propria linie, în loc să scrie totul pe o linie ca mai sus. Acesta este modul în care se va face acest lucru:
lea,
td,
p.red,
div # firstred
{
culoarea rosie;
}
Observați că introduceți o virgulă după fiecare selector și apoi folosiți "enter" pentru a rupe următorul selector pe propria linie. NU adăugați o virgulă după selectorul final.
Prin utilizarea virgulelor între selectori, creați o foaie de stil mai compactă, care este mai ușor de actualizat în viitor și care este mai ușor de citit astăzi!
Articolul original de Jennifer Krynin. Editat de Jeremy Girard pe 5/8/17