Nid ydych chi'n gyfyngedig i un dosbarth CSS fesul elfen.
Mae Casgading Style Sheets (CSS) yn caniatáu ichi ddiffinio ymddangosiad elfen trwy ymgysylltu â'r nodweddion y byddwch yn ymgeisio i'r elfen honno. Gall y nodweddion hyn fod naill ai ID neu ddosbarth, ac, fel pob nodwedd, maent yn ychwanegu gwybodaeth ddefnyddiol i'r elfennau y maent ynghlwm wrthynt. Yn dibynnu ar ba briodoldeb y byddwch chi'n ei ychwanegu at elfen, gallwch ysgrifennu detholydd CSS i gymhwyso'r arddulliau gweledol angenrheidiol sydd eu hangen er mwyn cyflawni'r golwg a'r teimlad ar gyfer yr elfen honno a'r wefan gyfan.
Er bod unedau adnabod neu ddosbarthiadau yn gweithio er mwyn ymgysylltu â hwy gyda rheolau CSS, mae dulliau dylunio gwe modern yn ffafrio dosbarthiadau dros IDau, yn rhannol, oherwydd eu bod yn llai penodol ac yn haws i'w gweithio gyda'n gilydd. Ydw, byddwch yn dal i ddod o hyd i lawer o safleoedd sy'n defnyddio IDau, ond mae'r nodweddion hynny yn cael eu cymhwyso'n fwy cymharol nag yn y gorffennol tra bod dosbarthiadau wedi cymryd drosodd tudalennau gwe modern.
Dosbarthiadau Sengl neu Lluosog yn CSS?
Yn y rhan fwyaf o achosion, byddech yn neilltuo priodoldeb dosbarth sengl i elfen, ond nid ydych chi mewn gwirionedd yn gyfyngedig i un dosbarth yn unig y maen nhw gyda chi. Er mai dim ond un briodwedd adnabod sydd gan elfen, gallwch chi roi elfen o ddosbarthiadau lluosog, ac mewn rhai achosion bydd gwneud eich tudalen yn haws i arddull a llawer mwy hyblyg!
Os oes angen i chi neilltuo nifer o ddosbarthiadau i elfen, gallwch ychwanegu'r dosbarthiadau ychwanegol a syml ar wahân iddynt gyda lle yn eich priodoldeb.
Er enghraifft, mae gan y paragraff hwn dri dosbarth:
pullquote featured left "> Dyma'r testun y paragraff
Mae hyn yn gosod y tri dosbarth canlynol ar y tag paragraff:
- Pullquote
- Sylw
- Chwith
Rhowch wybod i'r mannau rhwng pob un o'r gwerthoedd dosbarth hyn. Y mannau hynny yw'r hyn sy'n eu gosod fel dosbarthiadau unigol gwahanol. Dyma hefyd pam na all enwau dosbarth fod â mannau ynddynt, oherwydd byddai gwneud hynny yn eu gosod fel dosbarthiadau ar wahân.
Er enghraifft, pe baech yn defnyddio "tynnu allan-ymddangos-chwith" heb le, byddai'n werth un dosbarth, ond yr enghraifft uchod, lle mae'r tair gair hyn wedi'u gwahanu â gofod, yn eu gosod fel gwerthoedd unigol. Mae'n bwysig deall y cysyniad hwn wrth i chi benderfynu pa werthoedd dosbarth i ddefnyddio ar eich tudalennau gwe.
Unwaith y bydd gennych werthoedd eich dosbarth yn HTML, gallwch chi wedyn neilltuo'r rhain fel dosbarthiadau yn eich CSS a chymhwyso'r arddulliau yr hoffech eu hychwanegu. Er enghraifft.
.pullquote {...}
.featured {...}
p.left {...}
Yn yr enghreifftiau hyn, byddai datganiadau a phâr parau CSS yn y tu mewn i'r brasau bras, sef sut y byddai'r arddulliau hynny'n cael eu cymhwyso i'r detholydd priodol.
Nodyn - os ydych chi'n gosod dosbarth i elfen benodol (er enghraifft, p.left), gallwch ei ddefnyddio o hyd fel rhan o restr o ddosbarthiadau; fodd bynnag, byddwch yn ymwybodol y bydd ond yn effeithio ar yr elfennau hynny a bennir yn yr CSS. Mewn geiriau eraill, dim ond i baragraffau gyda'r dosbarth hwn y bydd yr arddull p.left yn berthnasol, gan fod eich detholydd yn dweud ei fod yn gymwys i "baragraffau gyda gwerth dosbarth 'chwith'. Mewn cyferbyniad, nid yw'r ddau ddetholydd arall yn yr enghraifft yn nodi elfen benodol, felly byddent yn gwneud cais i unrhyw elfen sy'n defnyddio'r gwerthoedd dosbarth hynny.
Manteision Dosbarthiadau Lluosog
Gall dosbarthiadau lluosog ei gwneud hi'n haws ychwanegu effeithiau arbennig i elfennau heb orfod creu steil newydd gyfan ar gyfer yr elfen honno.
Er enghraifft, efallai y byddwch am gael y gallu i elfennau arnofio i'r chwith neu'r dde yn gyflym. Efallai y byddwch yn ysgrifennu dau ddosbarth chwith ac i'r dde gyda dim ond arnofio: chwith; ac arnofio: dde; ynddynt. Yna, pryd bynnag yr oedd gennych elfen y mae angen i chi ei arnofio ar y chwith, byddech yn syml yn ychwanegu'r "chwith" i'r dosbarth i'w restr ddosbarth.
Fodd bynnag, mae llinell ddirwy i gerdded yma. Cofiwch fod safonau gwe yn pennu gwahaniad arddull a strwythur. Caiff strwythur ei drin trwy HTML tra bod arddull yn CSS.
Os yw'ch dogfen HTML wedi'i llenwi ag elfennau sydd gan bob un ohonynt enwau dosbarth fel "coch" neu "chwith", sef enwau sy'n nodi sut y dylai elfennau edrych yn hytrach na beth maen nhw, rydych chi'n croesi'r llinell honno rhwng strwythur ac arddull. Rwy'n ceisio cyfyngu fy enwau dosbarth heb fod yn semantig cymaint â phosibl am y rheswm hwn.
Dosbarthiadau Lluosog, Semanteg a JavaScript
Mantais arall i ddefnyddio dosbarthiadau lluosog yw ei fod yn rhoi llawer mwy o bosibiliadau rhyngweithiol i chi.
Gallwch chi gyflwyno dosbarthiadau newydd i'r elfennau presennol gan ddefnyddio JavaScript heb gael gwared ar unrhyw un o'r dosbarthiadau cychwynnol. Gallwch hefyd ddefnyddio dosbarthiadau i ddiffinio semanteg elfen . Mae hyn yn golygu y gallwch ychwanegu ar ddosbarthiadau ychwanegol i ddiffinio beth mae'r elfen honno'n golygu'n semantig. Dyma sut mae Microformats yn gweithio.
Anfanteision Dosbarthiadau Lluosog
Yr anfantais fwyaf i ddefnyddio nifer o ddosbarthiadau ar eich elfennau yw ei fod yn gallu eu gwneud ychydig yn anhyblyg i edrych ar a rheoli dros amser. Efallai y bydd yn anodd penderfynu pa arddulliau sy'n effeithio ar elfen ac os yw unrhyw sgriptiau'n effeithio arno. Mae llawer o'r fframweithiau sydd ar gael heddiw, fel Bootstrap, yn gwneud defnydd trwm o elfennau gyda dosbarthiadau lluosog. Gall y cod hwnnw fynd allan o law ac yn anodd gweithio gydag ef yn gyflym iawn os nad ydych chi'n ofalus.
Pan fyddwch yn defnyddio nifer o ddosbarthiadau, rydych hefyd yn peryglu bod yr arddull ar gyfer un dosbarth yn goresgyn arddull arall hyd yn oed os nad ydych yn bwriadu gwneud hyn. Gall hyn wedyn ei gwneud yn anodd cyfrifo pam nad yw eich arddulliau yn cael eu defnyddio hyd yn oed pan ymddengys y dylent.
Mae angen i chi fod yn ymwybodol o benodoldeb, hyd yn oed gyda'r nodweddion sy'n cael eu cymhwyso i'r un elfen honno!
Drwy ddefnyddio offeryn fel offer Gwefeistr Gwefannau Chrome, gallwch chi weld yn hawdd sut mae'ch dosbarthiadau'n effeithio ar eich arddulliau ac osgoi'r broblem hon o arddulliau a nodweddion sy'n gwrthdaro.
Erthygl wreiddiol gan Jennifer Krynin. Golygwyd gan Jeremy Girard ar 8/7/17