Miks lihtsa komaga lihtsustatakse kodeerimist
CSS või Cascading Style Sheets on veebidisaini tööstusharu aktsepteeritav viis visuaalsete stiilide lisamiseks saidile. CSS-iga saate juhtida lehe kujundust, värve, tüpograafiat , taustapilti ja palju muud. Põhimõtteliselt, kui see on visuaalne stiil, siis CSS on viis, kuidas need stiilid teie veebisaidile tuua.
Lisades CSS-i stiile dokumendile, võite märgata, et dokument hakkab kauem ja kauemaks muutuma. Isegi väike sait, millel on vaid paar lehekülge, võib lõpptulemusena anda märkimisväärse CSS-faili ja väga suur sait, millel on palju ja unikaalsete lehtede lehte, võib olla väga suurte CSS-failidega. Sellele lisanduvad reageerivad saidid, millel on stiililehtedes sisalduvad palju meediumipäringuid, et muuta visuaalide välimust ja leht kuvatakse erinevatele ekraanidele.
Jah, CSS-failid võivad olla pikad. See ei ole suur probleem, kui tegemist on saidi jõudlust ja allalaadimise kiirust, sest isegi pikk CSS-fail on tõenäoliselt päris väike (kuna see on tõesti ainult tekstdokument). Siiski loeb lehe kiirus iga natuke, nii et kui saate oma stiililehe leelisemaks muuta, on see hea mõte. See on koht, kus "koma" võib teie stiililehe väga mugav olla!
Kommid ja CSS
Võib-olla olete mõelnud, milline roll komaga mängib CSS-i valija süntaksis. Nagu lausete puhul, annab koma eraldajatele selguse, mitte koodi. CSS-valija komas eraldab samu stiile mitu valijat.
Näiteks vaatame alljärgnevat CSS-i.
th {värv: punane; }
td {värv: punane; }
p.red {värv: punane; }
div # firstred {värv: punane; }
Selle süntaksiga ütlete, et soovite, et sildid, td sildid, parameetrid märgiksid punasega ja div-sildid oleksid ID-ga kõigepealt värvilised.
See on täiesti aktsepteeritav CSS, kuid selle kirjutamisel on kaks olulist puudust:
- Tulevikus, kui otsustate muuta nende omaduste fondi värvi siniseks, peate selle muuta oma stiililehel neli korda.
- See lisab teie laadilehele palju lisatähiseid, mida te ei vaja. Need 4 stiili ei pruugi tunduda ülemäära, kuid kui te seda jätkate kogu oma stiililehel, siis liinid lisanduvad ja see leht on palju, palju suurem kui see peab olema.
Nende puuduste vältimiseks ja CSS-faili täiustamiseks püüame komadega kasutada.
Kommide kasutamine eraldi valijatesse
Selle asemel, et kirjutada 4 eraldi CSS-valijat ja 4 reeglit, võite kõik need stiilid ühendada ühe reegli vara, eraldades üksikud selektorid komaga. Siin on, kuidas seda teha:
th, td, p.red, div # firstred {värv: punane; }
Komaga tähis toimib põhiliselt valijana sõna "ja". Nii kehtib see t h tags AND td siltide ja parameetrite siltide kohta klassi punasega ja div-märgend ID-ga firstred. See oli täpselt nii, nagu varemgi, kuid selle asemel, et vajame nelja CSS-i reeglit, on meil üks reegel, millel on mitu selektorit. See on selektoris koma, see võimaldab meil ühes reeglis olla mitu selektorit.
See lähenemisviis mitte ainult ei võimalda leebemaid ja puhtamaid CSS-faile, vaid muudab ka tulevasi värskendusi nii palju lihtsamaks. Nüüd, kui soovite muuta värvi punaseks siniseks, peate tegema muudatuse ainult ühes asukohas, mitte üle kogu esialgse 4 stiilis reegli. Mõelge sellele aja kokkuhoiule kogu CSS-failis ja näete, kuidas see säästab nii pikka rune kui aega ja ruumi!
Süntaksi variatsioon
Mõned inimesed otsustavad muuta CSS loetamaks, eraldades iga valija oma reale, selle asemel et kirjutada see kõik ühel joonel nagu eespool. Nii toimib see nii:
th,
td
p.red
div # esimest korda
{
värv: punane;
}
Pange tähele, et pärast iga valijat asetate koma ja seejärel kasutage sisestusklahvi, et murda järgmine valija oma reale. Te ei lisa koma pärast lõplikku valijat.
Kasutades oma selektorite vahel komakte, loote te kompaktsema stiililehe, mida on tulevikus lihtsam uuendada ja mida on tänapäeval lihtsam lugeda!
Jennifer Krynini algne artikkel. Redigeeris Jeremy Girard 5./8/17