Naon Nyaeta koma keur di Selectors CSS?

Kunaon a koma basajan simplifies coding

CSS, atawa Cascading Style cadar, aya jalan industri web design urang katampa pikeun nambahkeun gaya visual kana situs anu. Kalawan CSS, anjeun tiasa ngontrol perenah kaca, kelir, tipografi , gambar latar, jeung leuwih. Dasarna, upami eta mangrupakeun gaya visual, lajeng CSS nyaeta jalan pikeun mawa gaya jelema ka ramatloka anjeun.

Anjeun tambahkeun gaya CSS kana dokumen, Anjeun mungkin aya bewara yen dokumen mimiti meunang panjang tur panjang. Malah situs leutik kalawan ukur sakeupeul kaca bisa mungkas nepi sareng file CSS sizable - na situs anu kacida gedéna jeung kavling na kavling Kaca eusi unik bisa mibanda file CSS pisan badag. Ieu diperparah ku loka responsif nu gaduh kavling queries média kaasup dina gaya cadar jeung Ngarobah cara visuals kasampak na kaca ngaluarkeun pikeun layar béda.

Sumuhun, file CSS bisa meunang lengthy. Ieu teu masalah utama lamun datang ka kinerja situs na speed download, sabab sanajan file CSS lengthy kamungkinan janten geulis leutik (saprak éta bener euy a dokumen tulisan). Leungit, unggal bit diitung saeutik lamun datang ka speed kaca, jadi lamun bisa nyieun lambaran gaya Anjeun leaner, éta téh mangrupakeun ide nu sae. Ieu tempat teh "koma" bisa datang dina pisan gunana dina lambaran gaya anjeun!

Tanda koma jeung CSS

Anjeun bisa geus wondered naon peran koma nu muterkeun dina CSS rumpaka pamilihan. Saperti dina kalimat, koma teh brings kajelasan-moal kode-ka separators. The koma dina pamilihan CSS misahkeun sababaraha selectors dina gaya anu sarua.

Contona, hayu urang nempo sababaraha CSS di handap.

th {warna: beureum; }
TD {warna: beureum; }
p.red {warna: beureum; }
div # firstred {warna: beureum; }

Kalayan rumpaka ieu, anjeun nyebutkeun yen anjeun hayang th tag, tag TD, tag ayat kalawan kelas beureum, sarta tag div kalawan ID nu firstred kabeh mun boga beureum warna gaya.

Ieu sampurna ditarima CSS, tapi aya dua drawbacks signifikan pikeun nulis eta cara kieu:

Pikeun bisa nyingkahan drawbacks ieu, sarta pikeun streamline file CSS anjeun, urang bakal coba ngagunakeun tanda koma.

Ngagunakeun Tanda koma mun Selectors Pisahkeun

Gantina nulis 4 selectors CSS misah jeung 4 aturan, anjeun tiasa ngagabungkeun sakabeh gaya ieu kana hiji sipat aturan ku pamisahan selectors individu kalawan koma. Di dieu nyaeta kumaha éta bakal dilakukeun:

th, TD, p.red, div # firstred {warna: beureum; }

The karakter koma dasarna tindakan minangka kecap "jeung" di jero pamilihan teh. Ku kituna ieu manglaku ka t tag h AND tag TD AND tag ayat jeung kelas beureum AND tag div kalawan ID nu firstred. Maksudna kahayang urang tadi méméh tapi tinimbang needing 4 aturan CSS, urang boga kakawasaan tunggal kalawan sababaraha selectors. Ieu naon koma nu teu di pamilihan, éta ngamungkinkeun urang pikeun mibanda sababaraha selectors dina hiji aturan.

Henteu ngan teu pendekatan ieu nyieun pikeun leaner, payil CSS cleaner, éta ogé ngajadikeun apdet hareup pisan gampang. Ayeuna lamun hayang ngarobah warna ti beureum nepi ka biru, anjeun ngan boga sangkan robah dina hiji lokasi tinimbang peuntas aslina aturan 4 gaya urang tadi! Pikirkeun tabungan waktos ieu peuntas hiji sakabéh file CSS jeung anjeun bisa ningali kumaha ieu bakal nyalametkeun anjeun duanana waktos na spasi dina rune lila!

sintaksis Variasi

Sababaraha urang milih sangkan CSS beuki kabaca ku misahkeun unggal pamilihan on garis sorangan, tinimbang nulis eta kabeh kana hiji garis sakumaha luhur. Ieu kumaha nu bakal dilakukeun:

th,
TD,
p.red,
div # firstred
{
Warna: beureum;
}

Bewara nu nempatkeun koma sanggeus unggal pamilihan lajeng nganggo "asupkeun" pikeun megatkeun pamilihan hareup onto garis sorangan. Anjeun teu nambahan koma sanggeus sejen final.

Ku migunakeun koma antara selectors, anjeun nyieun hiji gaya lambar langkung ringkes éta gampang pikeun ngapdet kapayunna jeung nu gampang maca kiwari!

Aslina artikel ku Jennifer Krynin. Diédit ku Jeremy Girard on 5/8/17