Hindi ka limitado sa isang solong CSS klase sa bawat elemento.
Binibigyang- daan ka ng Cascading Style Sheets (CSS) na tukuyin ang hitsura ng elemento sa pamamagitan ng pag-hook sa mga katangian na nalalapat mo sa sangkap na iyon. Ang mga katangiang ito ay maaaring maging alinman at ID o isang klase at, tulad ng lahat ng mga katangian, nagdadagdag sila ng kapaki-pakinabang na impormasyon sa mga elemento na nakalakip sa mga ito. Depende sa kung anong attribute na idaragdag mo sa isang elemento, maaari kang magsulat ng isang tagapili ng CSS upang ilapat ang mga kinakailangang visual na estilo na kinakailangan upang makamit ang hitsura at pakiramdam para sa sangkap na iyon at sa kabuuan ng website.
Habang ang alinman sa mga ID o mga klase ay nagtatrabaho para sa layunin ng pag-hook sa mga ito sa mga panuntunan ng CSS, ang mga modernong paraan sa disenyo ng web ay nagpapabuti ng mga klase sa mga ID, sa bahagi, dahil mas mababa ang mga ito at mas madaling magtrabaho sa pangkalahatang. Oo, makakakita ka pa rin ng maraming mga site na gumagamit ng mga ID, ngunit ang mga katangiang iyon ay inilalapat nang higit pa kaysa sa nakaraan habang ang mga klase ay kinuha sa mga modernong web page.
Single o Maramihang Mga Klase sa CSS?
Sa karamihan ng mga kaso ay magtatalaga ka ng isang katangian ng isang klase sa isang elemento, ngunit talagang hindi ka limitado sa isang klase lamang kung paano ka may mga ID. Habang ang isang elemento ay maaari lamang magkaroon ng isang katangian ng ID, maaari mong ganap na magbigay ng isang sangkap ng maramihang mga klase at, sa ilang mga kaso, ang paggawa nito ay gawing madali ang iyong pahina sa estilo at mas nababaluktot!
Kung kailangan mong magtalaga ng maraming mga klase sa isang elemento, maaari mong idagdag ang mga karagdagang klase at simpleng paghiwalayin ang mga ito gamit ang puwang sa iyong katangian.
Halimbawa, ang talatang ito ay may tatlong klase:
pullquote featured left "> Ito ang teksto ng talata
Nagtatakda ito ng sumusunod na tatlong klase sa tag na talata:
- Pullquote
- Itinatampok
- Kaliwa
Pansinin ang mga puwang sa pagitan ng bawat isa sa mga halaga ng klase. Ang mga puwang na iyon ang nagtatakda sa kanila bilang magkakaibang, indibidwal na mga klase. Ito rin ay kung bakit ang mga pangalan ng klase ay hindi maaaring magkaroon ng mga puwang sa kanila, dahil ang paggawa nito ay itatakda ang mga ito bilang hiwalay na mga klase.
Halimbawa, kung ginamit mo ang "pullquote-featured-left" na walang espasyo, ito ay magiging isang halaga ng klase, ngunit ang halimbawa sa itaas, kung saan ang tatlong salitang ito ay pinaghihiwalay ng espasyo, itinatakda ito bilang indibidwal na mga halaga. Mahalaga na maunawaan ang konsepto na ito habang nagpapasya ka kung aling mga halaga ng klase ang gagamitin sa iyong mga webpage.
Sa sandaling mayroon kang mga halaga sa klase sa HTML, maaari mo nang italaga ang mga ito bilang mga klase sa iyong CSS at ilapat ang mga estilo na nais mong idagdag. Halimbawa.
.pullquote {...}
.Itinatampok { ... }
p.left {...}
Sa mga halimbawang ito, ang mga pahayag ng CSS at mga pares ng halaga ay nasa loob ng mga kulot na tirante, na kung paanong ang mga estilo ay ilalapat sa naaangkop na tagapili.
Tandaan - kung nagtakda ka ng klase sa isang partikular na elemento (halimbawa, p.left), maaari mo pa ring gamitin ito bilang bahagi ng isang listahan ng mga klase; gayunpaman, magkaroon ng kamalayan na ito ay makakaapekto lamang sa mga sangkap na tinukoy sa CSS. Sa ibang salita, ang estilo ng p.left ay nalalapat lamang sa mga talata sa klase na ito sapagkat ang iyong tagapili ay talagang nagsasabi na ilapat ito sa "mga talata na may isang halaga ng klase ng 'kaliwang'". Sa kabaligtaran, ang ibang dalawang tagapili sa halimbawa ay hindi tumutukoy sa isang tiyak na sangkap, upang mailapat ito sa anumang sangkap na gumagamit ng mga halaga ng klase.
Mga Bentahe ng Maramihang Mga Klase
Maraming mga klase ay maaaring gawing mas madali upang magdagdag ng mga espesyal na epekto sa mga elemento nang hindi na kinakailangang lumikha ng isang buong bagong estilo para sa sangkap na iyon.
Halimbawa, maaaring gusto mong magkaroon ng kakayahang lumutang ang mga elemento sa kaliwa o kanan nang mabilis. Maaari mong isulat ang dalawang uri na natitira at pakanan na may lamang float: kaliwa; at lumutang: tama; sa kanila. Pagkatapos, kapag mayroon kang isang elemento na kailangan mong lumutang sa kaliwa, idaragdag mo lamang ang klase na "kaliwa" sa listahan ng klase nito.
Gayunpaman, mayroong isang magandang linya upang lumakad dito. Tandaan na ang mga pamantayan sa web ay nangangasiwa sa paghihiwalay ng estilo at istraktura. Ang istraktura ay hinahawakan sa pamamagitan ng HTML habang ang estilo ay nasa CSS.
Kung ang iyong HTML na dokumento ay puno ng mga elemento na lahat ay may mga pangalan ng klase tulad ng "red" o "left", na mga pangalan na nangangasiwa kung paano dapat tumingin ang mga elemento sa halip na kung ano ang mga ito, tinatawid mo ang linya sa pagitan ng istraktura at estilo. Sinisikap kong limitahan ang aking mga pangalan ng klase sa semantiko hangga't maaari para sa kadahilanang ito.
Maramihang Mga Klase, Semantiko, at JavaScript
Ang isa pang kalamangan sa paggamit ng maraming mga klase ay nagbibigay ito sa iyo ng maraming iba pang mga posibilidad ng interactivity.
Maaari kang mag-aplay ng mga bagong klase sa umiiral na mga elemento gamit ang JavaScript nang hindi inaalis ang alinman sa mga paunang klase. Maaari mo ring gamitin ang mga klase upang tukuyin ang mga semantika ng isang elemento . Nangangahulugan ito na maaari kang magdagdag sa karagdagang mga klase upang tukuyin kung ano ang elementong iyon ay nangangahulugan ng semantically. Ganito ang ginagawa ng mga Microformat.
Mga Disadvantages ng Maramihang Mga Klase
Ang pinakamalaking kawalan sa paggamit ng maramihang mga klase sa iyong mga elemento ay na ito ay maaaring gumawa ng mga ito ng isang bit mahirap gamitin upang tumingin at pamahalaan sa paglipas ng panahon. Maaaring maging mahirap na tukuyin kung anong mga estilo ang nakakaapekto sa isang elemento at kung may anumang mga script na nakakaapekto nito. Marami sa mga balangkas na magagamit ngayon, tulad ng Bootstrap, ay gumagawa ng mabigat na paggamit ng mga elemento na may maraming mga klase. Ang code na iyon ay maaaring mawalan ng kamay at mahirap upang gumana nang napakabilis kung hindi ka maingat.
Kapag gumamit ka ng maraming mga klase, pinatatakbo mo rin ang panganib ng pagkakaroon ng estilo para sa isang klase na pawalang-bisa ang estilo ng isa pa kahit na hindi mo balak ito. Pagkatapos nito ay maaaring maging mahirap upang malaman kung bakit ang iyong mga estilo ay hindi inilapat kahit na kapag ito ay lilitaw na dapat nila.
Kailangan mong magkaroon ng kamalayan ng pagtitiyak, kahit na may mga katangian na inilapat sa isang elementong iyon!
Sa pamamagitan ng paggamit ng tool tulad ng mga tool sa Webmaster sa Chrome, mas madali mong makita kung paano nakakaapekto ang iyong mga klase sa iyong mga estilo at maiwasan ang problemang ito ng mga magkasalungat na mga estilo at mga katangian.
Orihinal na artikulo ni Jennifer Krynin. Na-edit ni Jeremy Girard noong 8/7/17