Huna mdogo kwenye darasa moja la CSS kwa kipengele.
Majambazi ya Sinema ya Kukimbia (CSS) inakuwezesha kufafanua kuonekana kwa kipengele kwa kuzingatia sifa ambazo unatumia kwa kipengele hiki. Tabia hizi zinaweza kuwa na ID na darasani na, kama sifa zote, zinaongeza habari muhimu kwa vipengele ambavyo vimeunganishwa. Kulingana na sifa ambayo unayoongeza kwenye kipengele, unaweza kuandika mchezaji wa CSS kuomba mitindo muhimu inayoonekana ambayo inahitajika kufikia kuangalia na kujisikia kwa kipengele hiki na tovuti nzima.
Ingawa ama ID au madarasa yanafanya kazi kwa kuzingatia kwa sheria za CSS, mbinu za kubuni za kisasa za kisasa zinapendelea madarasa juu ya vitambulisho, kwa sehemu, kwa sababu si maalum na rahisi kufanya kazi kwa ujumla. Ndiyo, utakuwa bado unapata maeneo mengi ambayo hutumia vitambulisho, lakini sifa hizo zinatumika kwa upole zaidi kuliko wakati uliopita ambapo madarasa yamepatikana kwenye kurasa za kisasa za wavuti.
Darasa moja au Multiple katika CSS?
Mara nyingi ungependa kuwashirikisha kipengele cha darasa moja kwa kipengele, lakini kwa kweli sio kikwazo kwenye darasa moja tu kwa njia unazo na ID. Wakati kipengele kinaweza tu kuwa na sifa moja ya ID, unaweza kabisa kutoa kipengele cha madarasa mbalimbali na, wakati mwingine, kufanya hivyo itafanya ukurasa wako uwe rahisi zaidi kwa mtindo na rahisi zaidi!
Ikiwa unahitaji kusambaza madarasa mengi kwenye kipengele, unaweza kuongeza madarasa ya ziada na tu uwatenganishe na nafasi katika sifa yako.
Kwa mfano, aya hii ina madarasa matatu:
pullquote imewekwa kushoto "> Hii itakuwa ni maandishi ya aya
Hii inaweka madarasa matatu yafuatayo kwenye fungu la aya:
- Pullquote
- Inaonekana
- Kushoto
Angalia nafasi kati ya kila moja ya maadili ya darasa hili. Nafasi hizo ni nini kinachoziweka kama tofauti, madarasa binafsi. Hii pia ndiyo sababu majina ya darasa hawezi kuwa na nafasi ndani yao, kwa sababu kufanya hivyo kungewaweka kama madarasa tofauti.
Kwa mfano, ikiwa unatumia "pullquote-featured-left" bila nafasi, ingekuwa thamani ya darasa moja, lakini mfano hapo juu, ambapo maneno haya matatu yanatengwa na nafasi, huwaweka kama thamani ya mtu binafsi. Ni muhimu kuelewa dhana hii kama unavyoamua juu ya maadili ya darasani ya kutumia kwenye wavuti zako.
Mara baada ya kuwa na maadili ya darasa lako katika HTML, unaweza kisha kuwapa hizi kama madarasa katika CSS yako na kutumia mitindo ungependa kuongeza. Kwa mfano.
.fullquote {...}
.featured {...}
p.left {...}
Katika mifano hizi, taarifa za CSS na jozi za maadili zingekuwa ndani ya viunga vya curly, ambayo ni jinsi mitindo hiyo ingeweza kutumika kwa mchezaji sahihi.
Kumbuka - ukiweka darasa kwa kipengele maalum (kwa mfano, p.left), bado unaweza kutumia kama sehemu ya orodha ya madarasa; hata hivyo, kuwa na ufahamu kwamba itakuwa tu kuathiri mambo hayo ambayo ni maalum katika CSS. Kwa maneno mengine, mtindo wa p.left utatumika tu kwenye aya na darasa hili tangu mchezaji wako anasema kwa kuomba kwa "aya na thamani ya darasa ya" kushoto "". Kwa upande mwingine, wapiga kura wengine wawili katika mfano hawaelezi kipengele fulani, kwa hivyo watatumika kwa kipengele chochote kinachotumia maadili ya darasa hilo.
Faida ya Darasa nyingi
Makundi mengi yanaweza iwe rahisi kuongeza madhara maalum kwa vipengele bila kuunda mtindo mpya wa kipengele hicho.
Kwa mfano, unaweza kutaka kuwa na uwezo wa kuelea mambo kwa kushoto au kulia haraka. Unaweza kuandika madarasa mawili kushoto na kulia na kuelea tu: kushoto; na kuelea: haki; ndani yao. Kisha, wakati wowote ulipo na kipengele unahitaji kuelea kushoto, ungeongeza tu darasa "kushoto" kwenye orodha ya darasa.
Kuna mstari mwema kutembea hapa, hata hivyo. Kumbuka kwamba viwango vya wavuti vinataja kutenganisha mtindo na muundo. Muundo unashughulikiwa kupitia HTML wakati style iko katika CSS.
Ikiwa hati yako ya HTML imejazwa na mambo ambayo wote wana majina ya darasa kama "nyekundu" au "kushoto", ambayo ni majina yanayoelezea jinsi vipengele vinapaswa kuangalia badala ya yale wanavyo, unavuka mstari huo kati ya muundo na mtindo. Ninajaribu kupunguza majina yangu ya darasa isiyo ya semantic iwezekanavyo kwa sababu hii.
Darasa Multiple, Semantics, na JavaScript
Faida nyingine kwa kutumia madarasa mbalimbali ni kwamba inakupa fursa nyingi za kuingiliana.
Unaweza kutumia madarasa mapya kwa vipengele zilizopo kwa kutumia JavaScript bila ya kuondoa madarasa yoyote ya awali. Unaweza pia kutumia madarasa ili kufafanua semantics ya kipengele . Hii inamaanisha unaweza kuongeza kwenye madarasa ya ziada ili kufafanua kile kipengele hicho kinamaanisha kimya. Hii ni jinsi Microformats inavyofanya kazi.
Hasara ya Darasa nyingi
Hasara kubwa ya kutumia madarasa mengi kwenye vipengele vyako ni kwamba inaweza kuwafanya wasiwasi kuangalia na kusimamia muda zaidi. Inaweza kuwa vigumu kuamua mitindo gani inayoathiri kipengele na ikiwa scripts yoyote inathiri. Mifumo mingi inapatikana leo, kama Bootstrap, kutumia matumizi makubwa ya vitu na madarasa mengi. Nambari hiyo inaweza kutoweka na ngumu kufanya kazi kwa haraka sana ikiwa hujali.
Unapotumia madarasa mengi, pia unatumia hatari ya kuwa na mtindo wa darasa moja kuimarisha mtindo wa mwingine hata kama hukusudia. Hii inaweza kuwa vigumu kufikiri kwa nini mitindo yako haitumiki hata iwe inaonekana kuwa inapaswa.
Unahitaji kuwa na ufahamu wa sifa maalum, hata na sifa zilizowekwa kwa kipengele hicho!
Kwa kutumia zana kama zana za wavuti kwenye Chrome, unaweza kuona kwa urahisi jinsi madarasa yako yanayoathiri mitindo yako na kuepuka tatizo hili la mitindo na sifa.
Makala ya awali na Jennifer Krynin. Iliyotengenezwa na Jeremy Girard mnamo 8/7/17