X'inhi l-Comma fil-Għażla tas-CSS?

Għaliex komma sempliċi tissimplifika l-kodifikazzjoni

CSS, jew Cascading Style Sheets, huma l-mod aċċettat tal-industrija tad-disinn tal-web biex iżżid stili viżwali għal sit. Ma 'CSS, tista' tikkontrolla t-tqassim tal-paġna, kuluri, tipografija , immaġini ta 'sfond, u ħafna aktar. Bażikament, jekk huwa stil viżwali, allura CSS huwa l-mod biex dawk l-istili jitpoġġew fuq il-websajt tiegħek.

Hekk kif żżid stili CSS ma 'dokument, tista' tinnota li d-dokument jibda jikseb aktar u itwal. Anke sit żgħir b'numru żgħir ta 'paġni jista' jispiċċa b'fajl tas-CSS li jista 'jitkejjel - u sit kbir ħafna ma' lottijiet u ħafna paġni ta 'kontenut uniku jista' jkollu fajls CSS kbar ħafna. Dan huwa aggravat minn siti li jirrispondu li għandhom ħafna mistoqsijiet tal- medja inklużi fil-folji tal-istil biex ibiddlu kif il-viżwali jħarsu u l-paġna tistipula skrins differenti.

Iva, il-fajls tas-CSS jistgħu jiksbu żmien twil. Din mhix problema ewlenija fir-rigward tal-prestazzjoni tas-sit u l-veloċità tat-tniżżil, għaliex anke fajl CSS twil x'aktarx li jkun pjuttost żgħir (peress li huwa verament biss dokument tat-test). Still, kull ftit jgħodd meta niġu għall-veloċità tal-paġna, hekk jekk tista 'tagħmel il-karta tal-istil aktar sempliċi, dik hija idea tajba. Dan huwa fejn il- "virgola" tista 'tidħol sew ħafna fil-folja tal-istil tiegħek!

Commas u CSS

Int jista 'jkollok staqsiet liema rwol għandha l-virgola fis-sintassi tas-CSS selettur. Bħal fis-sentenzi, il-virgola ġġib ċarezza-mhux kodiċi-lis-separaturi. Il-virgola f'selettur tas- CSS tifred seletturi multipli fl-istess stili.

Per eżempju, ejja nħarsu lejn xi CSS hawn taħt.

th {kulur: aħmar; }
td {kulur: aħmar; }
p.red {kulur: aħmar; }
div # firstred {kulur: aħmar; }

B'din is-sintassi, int tgħid li trid tikketti th , tikketti td , tikketti tal-paragrafi bil-klassi ħamra, u t-tikketta div bl-ID l-ewwel nett biex ikollhom il-kulur stil aħmar.

Dan huwa CSS perfettament aċċettabbli, iżda hemm żewġ żvantaġġi sinifikanti għall-kitba b'dan il-mod:

Biex tkun tista 'tevita dawn l-iżvantaġġi, u biex tissimplifika l-fajl tas-CSS tiegħek, aħna nippruvaw nużaw il-virgoli.

Użu ta 'vireg għal separaturi separati

Minflok ma kitbet 4 seletturi separati tas-CSS u 4 regoli, tista 'tgħaqqad dawn l-istili kollha f'dominju ta' regola waħda billi tissepara s-seletturi individwali b'virgola. Hawnhekk huwa kif dan isir:

th, td, p.red, div # firstred {kulur: aħmar; }

Il-karattru tal-komma bażikament jaġixxi bħala l-kelma "u" ġewwa s-selettur. Allura dan japplika għal tikketti u tikketti TD u tikketti tal-paragrafi bil-klassi aħmar U t-tikketta div bl-ID l-ewwel. Dan huwa eżattament dak li kellna qabel, iżda minflok ma kien hemm bżonn ta '4 regoli tas-CSS, għandna regola waħda b'għażliet multipli. Dan huwa dak li l-virgola tagħmel fis-selettur, din tippermetti li jkollna seletturi multipli f'regola waħda.

Mhux biss dan l-approċċ jagħmel għal fajls CSS aktar nodfa u aktar sempliċi, iżda jagħmel aġġornamenti futuri daqstant faċli. Issa jekk int riedu ibiddlu l-kulur minn aħmar għal ikħal, inti biss għandek tagħmel il-bidla f'post wieħed minflok madwar ir-regoli ta 'l-istil oriġinali 4 li kellna! Aħseb dwar dawn l-iffrankar ta 'ħin tul fajl CSS sħiħ u tista' tara kif dan jiffranka kemm ħin kif ukoll spazju fit-tul.

Varjazzjoni tas-Sintaxxa

Xi nies jagħżlu li jagħmlu s-CSS aktar leġibbli billi jisseparaw kull selettur fuq il-linja tiegħu stess, minflok ma jiktbuha kollha f'linja waħda kif imsemmi hawn fuq. Hekk kif dan isir:

th,
td,
p.red,
div # firstred
{
kulur: aħmar;
}

Avviż li tqiegħed komma wara kull selettur u mbagħad uża "daħħal" biex tkisser is-selettur li jmiss fuq il-linja tiegħu stess. M'għandekx komma wara s-selettur finali.

Bl-użu tal-virgoli bejn l-assortituri tagħkom, toħloq folja tal-istil aktar kompatta li hija aktar faċli biex taġġorna fil-futur u li hija aktar faċli biex tinqara illum!

Artikolu oriġinali minn Jennifer Krynin. Editjat minn Jeremy Girard fit-8/17/17