Zašto jednostavna zarez pojednostavljuje kodiranje
CSS ili Cascading Style Sheets, industrijski su dizajnerski sustavi prihvaćeni način dodavanja vizualnih stilova na web mjesto. S CSS-om možete upravljati izgledom stranice, bojama, tipografijom , pozadinskom slikom i još mnogo toga. Uglavnom, ako je riječ o vizualnom stilu, CSS je način da se ti stilovi prenesu na vašu web stranicu.
Dok dodajete CSS stilove dokumentu, možda ćete primijetiti da dokument počinje trajati duže i duže. Čak i mala web-lokacija sa samo nekoliko stranica može imati veliku CSS datoteku - a vrlo velika web-lokacija s puno i puno stranica jedinstvenog sadržaja može imati vrlo velike CSS datoteke. To je složeno od strane responzivnih web-lokacija koje sadrže mnogo medijskih upita uključenih u stilske listove kako bi promijenili izgled vizualaca i stranica koja se postavlja za različite zaslone.
Da, CSS datoteke mogu biti dulje. Ovo nije veliki problem kada se radi o performansama web-lokacije i brzini preuzimanja, jer će i dugačak CSS datoteka biti prilično malena (jer je to zapravo samo tekstualni dokument). Ipak, svaki mali broj se računa kada je riječ o brzini stranice, pa ako možete napraviti svoj stilski list slabije, to je dobra ideja. Ovo je mjesto gdje "zarez" može doći vrlo zgodan u svoj stil list!
Commas i CSS
Možda ste se pitali kakvu ulogu igra zarez s pomoću sintakse CSS selektora. Kao u rečenicama, zarez donosi jasnoću - ne kod - na separatore. Slova u CSS izborniku odvaja više odabira unutar istih stilova.
Na primjer, pogledajmo neke CSS u nastavku.
th {boja: crvena; }
td {boja: crvena; }
p.red {boja: crvena; }
div # firstred {boja: crvena; }
S ovom sintaksom kažete da želite oznake oznaka, td oznake, oznake stavki s crvenom klasom i div oznaku s ID-om prvo da svi imaju boju stila crveno.
To je savršeno prihvatljivo CSS, ali postoje dva značajna nedostatka da to napišemo na ovaj način:
- U budućnosti, ako odlučite promijeniti boju fonta tih svojstava na plavo, morate promijeniti tu tablicu četiri puta u svoj stilski list.
- Dodaje vam puno dodatnih znakova na svoj stilski list koji vam nije potrebna. Ti se 4 stilovi možda neće činiti prevelikim, ali ako nastavite to na cijelom stilu stilova, linije će se dodati i taj list bit će mnogo, puno veći nego što treba.
Da bismo izbjegli ove nedostatke i pojednostavnili CSS datoteku, pokušat ćemo koristiti zareze.
Korištenje znakova za odvojene odabire
Umjesto pisanja 4 odvojena CSS odabira i 4 pravila, sve te stilove možete kombinirati u jedno svojstvo pravila razdvajanjem pojedinačnih odabira s zarezom. Evo kako bi to bilo učinjeno:
th, td, p.red, div # firstred {boja: crvena; }
Slovenski znak u osnovi djeluje kao riječ "i" unutar izbornika. Dakle, to vrijedi za t h oznake i td oznake i oznake stavki s crvenom crvenom i div oznakom s ID-om. To je upravo ono što smo imali prije, ali umjesto da trebamo 4 CSS pravila, imamo jedno pravilo s više odabira. To je ono što zarez ne u izborniku omogućuje nam da u jednom pravilu imamo više odabira.
Ne samo da ovaj pristup omogućuje lakšu i čišću CSS datoteku, već i čini buduća ažuriranja mnogo lakše. Sada, ako želite promijeniti boju od crvene do plave boje, samo trebate izvršiti promjenu na jednoj lokaciji umjesto preko izvornih pravila 4 stila koju smo imali! Razmislite o tim vremenskim uštedama preko cijele CSS datoteke i možete vidjeti kako će vam to uštedjeti vrijeme i prostor u dugoj runi!
Varijacija sintakse
Neki ljudi odluče učiniti CSS čitljivijima razdvajanjem svakog izbornika na vlastitu liniju, umjesto da sve to napiše na jedan redak kao što je gore navedeno. Tako će to biti učinjeno:
og,
td,
p.red,
div # firstred
{
boja: crvena;
}
Imajte na umu da stavljate zarez nakon svakog izbornika, a zatim upotrijebite "enter" kako biste slomili sljedeći izbornik na svoju liniju. NEMOJTE dodati zarez nakon završnog izbornika.
Korištenjem zareza između vaših selektora izrađujete kompaktni stilski list koji se u budućnosti lakše ažurira i koji je danas lakši za čitanje!
Izvorni članak Jennifer Krynin. Uredio Jeremy Girard na 18.05.17