Pam mae coma syml yn symleiddio codio
CSS, neu Cascading Style Sheets, yw ffordd dderbyniol y diwydiant dylunio gwe i ychwanegu arddulliau gweledol i safle. Gyda CSS, gallwch reoli cynllun tudalen, lliwiau, typograffeg , delwedd cefndir, a llawer mwy. Yn y bôn, os yw'n arddull weledol, yna CSS yw'r ffordd o ddod â'r arddulliau hynny i'ch gwefan.
Wrth i chi ychwanegu arddulliau CSS i ddogfen, efallai y byddwch yn sylwi bod y ddogfen yn dechrau mynd yn hirach ac yn hirach. Gall hyd yn oed safle bychan gyda dim ond dyrnaid o dudalennau ddiweddu ffeiliau CSS sizable - ac mae gan wefan fawr iawn gyda llawer o dudalennau o gynnwys unigryw fod â ffeiliau CSS iawn iawn. Caiff hyn ei waethygu gan safleoedd ymatebol sydd â llawer o ymholiadau cyfryngau wedi'u cynnwys yn y taflenni arddull i newid sut mae'r gweledol yn edrych ac mae'r dudalen yn gosod allan ar gyfer gwahanol sgriniau.
Oes, gall ffeiliau CSS fod yn hir. Nid yw hyn yn broblem fawr o ran perfformiad y safle a chyflymder llwytho i lawr, oherwydd mae hyd yn oed ffeil CSS hir yn debygol o fod yn eithaf bach (gan mai dogfen testun yn unig ydyw). Yn dal i fod, mae pob ychydig yn cyfrif pan ddaw i gyflymder y dudalen, felly os gallwch chi wneud eich daflen arddull yn llai, mae hynny'n syniad da. Dyma lle mae'r "coma" yn gallu bod yn ddefnyddiol iawn yn eich dalen arddull!
Commas a CSS
Efallai eich bod wedi meddwl pa rôl mae'r coma yn ei chwarae yng nghystrawen detholydd CSS . Fel mewn brawddegau, mae'r coma yn dod ag eglurder - nid cod-i'r gwahanyddion. Mae'r coma mewn detholydd CSS yn gwahanu dewiswyr lluosog o fewn yr un arddulliau.
Er enghraifft, gadewch i ni edrych ar rai CSS isod.
th {lliw: coch; }
td {lliw: coch; }
p.red {lliw: coch; }
div # firstred {lliw: coch; }
Gyda'r cystrawen hon, rydych chi'n dweud eich bod am weld y tagiau, tagiau'r td , tagiau paragraff gyda'r dosbarth coch, a'r tag div gyda'r ID wedi ei gychwyn i gyd i gael y lliw arddull coch.
Mae hyn yn CSS gwbl dderbyniol, ond mae dau anfantais arwyddocaol i'w ysgrifennu fel hyn:
- Yn y dyfodol, os ydych chi'n penderfynu newid lliw ffont yr eiddo hyn i las, rhaid ichi wneud y newid hwnnw bedair gwaith yn eich dalen arddull.
- Mae'n ychwanegu llawer o gymeriadau ychwanegol i'ch dalen arddull nad oes arnoch ei angen. Efallai na fydd y 4 arddull hyn yn ymddangos yn or-lwyth, ond os byddwch yn parhau i wneud hyn ar draws eich dalen arddull gyfan, bydd y llinellau'n ychwanegu at y daflen honno, a bydd y daflen honno'n llawer mwy nag y mae angen iddo fod.
Er mwyn osgoi'r anfanteision hyn, ac i symleiddio'r ffeil CSS, byddwn yn ceisio defnyddio comas.
Defnyddio Comas i Ddetholyddion Disgyblion
Yn hytrach na ysgrifennu 4 detholydd CSS a 4 rheolau ar wahân, gallwch gyfuno'r holl arddulliau hyn i mewn i un rheol eiddo trwy wahanu'r detholwyr unigol â choma. Dyma sut y byddai hynny'n cael ei wneud:
th, td, p.red, div # firstred {lliw: coch; }
Mae'r cymeriad coma yn gweithredu fel y gair "a" y tu mewn i'r detholydd. Felly mae hyn yn berthnasol i d tagiau a tagiau td A tagiau paragraff gyda'r tag coch A dosbarth y dosbarth gyda'r ID wedi'i gychwyn. Dyna'n union yr hyn a gawsom o'r blaen, ond yn lle angen rheolau 4 CSS, mae gennym reol sengl gyda dewiswyr lluosog. Dyma'r hyn y mae'r com yn ei wneud yn y detholydd, mae'n caniatáu i ni gael dewiswyr lluosog mewn un rheol.
Nid yn unig y mae'r dull hwn yn ei wneud ar gyfer ffeiliau CSS llai clir, yn ogystal â gwneud diweddariadau yn y dyfodol yn llawer haws. Nawr, os ydych chi eisiau newid y lliw o goch i las, dim ond rhaid i chi wneud y newid mewn un lleoliad yn lle'r rheolau arddull 4 gwreiddiol oedd gennym! Meddyliwch am yr arbedion amser hyn ar draws ffeil CSS gyfan a gallwch weld sut y bydd hyn yn arbed amser a lle i chi yn y rhwyn hir!
Amrywiad Cystrawen
Mae rhai pobl yn dewis gwneud y CSS yn fwy darllenadwy trwy wahanu pob detholydd ar ei linell ei hun, yn hytrach na'i ysgrifennu i gyd ar un llinell fel yr uchod. Dyma sut y byddai hynny'n cael ei wneud:
th,
td,
p.red,
div # firstred
{
lliw: coch;
}
Rhowch wybod eich bod yn gosod coma ar ôl pob detholydd ac yna'n defnyddio "rhowch" i dorri'r dewiswr nesaf ar ei linell ei hun. NID YDYCH yn ychwanegu cwm ar ôl y dewisydd terfynol.
Trwy ddefnyddio comas rhwng eich detholwyr, byddwch yn creu dalen arddull fwy cryno sy'n haws ei ddiweddaru yn y dyfodol ac mae hynny'n haws ei ddarllen heddiw!
Erthygl wreiddiol gan Jennifer Krynin. Golygwyd gan Jeremy Girard ar 5/8/17