Zašto jednostavna zareza pojednostavljuje kodiranje
CSS ili Cascading Style Sheets su način prihvaćenosti web dizajna za dodavanje vizuelnih stilova na sajt. Sa CSS-om možete kontrolisati izgled stranice, boje, tipografiju , sliku u pozadini i još mnogo toga. U suštini, ako je to vizuelni stil, CSS je način na koji će te stilove dovesti na vašu web stranicu.
Dok dodate CSS stilove u dokument, možete primetiti da dokument počinje da traje duže i duže. Čak i mala stranica sa samo nekoliko stranica može završiti sa velikom CSS datotekom - a vrlo veliko web stranice sa puno i puno stranica jedinstvenog sadržaja mogu imati vrlo velike CSS datoteke. Ovo je ujednačeno od strane odgovarajućih sajtova koji imaju puno medijskih upita uključenih u listove stilova kako bi promenili način prikaza vizuelnih stranica i stranica postavljaju na različite ekrane.
Da, CSS datoteke mogu biti dugačke. Ovo nije veliki problem kada su u pitanju performanse sajta i brzina prenosa, jer će čak i duga CSS datoteka verovatno biti prilično mala (pošto je stvarno samo tekstualni dokument). Ipak, svaka mala se računa kada se radi o brzini stranice, tako da ako možete napraviti svoj stilski stil, to je dobra ideja. Tu je "zapovjednik" vrlo zgodan u svom listu stilova!
Commas i CSS
Možda ste se pitali koja uloga igra zapona u CSS selektorski sintaksi. Kao u rečenicama, zarezi donose jasnost - a ne kod - separatore. Zareze u CSS selektoru odvajaju više selektora unutar istih stilova.
Na primer, pogledajte neke CSS ispod.
th {boja: crvena; }
td {boja: crvena; }
p.red {boja: crvena; }
div # firstred {color: red; }
Sa ovom sintaksom govorite da želite oznake, td oznake, oznake pasusa sa klasi crvene, a div tag sa ID-om prvo da svi imaju crveni stil.
Ovo je savršeno prihvatljiv CSS, ali postoje dve značajne nedostatke za pisanje na ovaj način:
- U budućnosti, ukoliko odlučite da promenite boju fonta ovih osobina u plavo, potrebno je da izvršite tu promenu četiri puta u svom listu stilova.
- Dodaje vam mnogo dodatnih znakova u svoj stilski stil koji vam nije potreban. Ovi 4 stilovi možda ne izgledaju kao prekomjerni, ali ako nastavite sa radom preko celog stila, linije će se dodati i taj list će biti mnogo veći nego što treba.
Da bismo mogli izbjeći ove nedostatke, a kako bi pojednostavili CSS datoteku, pokušaćemo da koristimo komade.
Koristeći Commas za odvojene selektore
Umjesto da pišete 4 odvojena CSS selektora i 4 pravila, možete kombinovati sve ove stilove u jedno svojstvo pravila tako što ćete pojedinačne selektore razdvojiti sa zarezom. Evo kako bi to bilo učinjeno:
th, td, p.red, div # firstred {color: red; }
Znak za zarezom u osnovi deluje kao riječ "i" unutar selektora. Dakle, ovo se odnosi na t h tagove i td oznake i oznake pasusa sa crvenom klasom i oznakom div sa ID prvo. To je upravo ono što smo imali ranije, ali umjesto da imamo 4 CSS pravila, imamo jedno pravilo sa više selektora. To je ono što zapeta radi u selektoru, omogućava nam da imamo više selektora u jednom pravilu.
Ne samo da ovaj pristup čini čistijim, čistijim CSS datotekama, već i olakšava buduće ispravke. Ako želite da promenite boju sa crvene na plavu, morate promijeniti samo jednu lokaciju umesto preko originalnih 4 pravila stila koja smo imali! Razmislite o ovim uštedama vremena kroz čitavu CSS datoteku i možete videti kako će ovo uštedeti i vrijeme i prostor u dugom runu!
Varijacija sintakse
Neki ljudi biraju da CSS postane čitljiviji tako što odvajaju svaki selektor na svojoj liniji, umjesto da pišu sve na jednoj liniji kao gore. Ovako bi se to učinilo:
th,
td,
p.red,
div # prvi
{
boja: crvena;
}
Imajte na umu da stavite zareze nakon svakog selektora i zatim koristite "enter" da biste prekinuli sledeći selektor na svoju liniju. NEMOJTE dodati zareze nakon finalnog selektora.
Koristeći zapise između vaših selektora, kreirate kompaktniji stilski stil koji je lakše ažurirati u budućnosti i to je lakše za čitanje danas!
Originalni članak Jennifer Krynin. Uredio Jeremy Girard na 5/8/17