Sampeyan ora diwatesi siji kelas CSS saben unsur.
Cascading Style Sheets (CSS) ngijini sampeyan kanggo nemtokake tampilan unsur dening hooking menyang kawicaksanan sing sampeyan aplikasi kanggo unsur kasebut. Atribut kasebut bisa salah siji lan ID utawa kelas lan, kaya kabeh atribut, padha nambah informasi sing dibiyantu kanggo unsur sing dilampirake. Gumantung marang atribut sing sampeyan tambah menyang unsur, sampeyan bisa nulis pemilih CSS kanggo ngaplikasi gaya visual sing diperlokake kanggo entuk ndelok lan aran unsur kasebut lan situs web sacara sakabehe.
Nalika salah sijine ID utawa kelas bisa mlaku kanthi obyek kanthi aturan CSS, metode desain web modern ningkatake kelas liwat ID, sabanjure, amarga padha kurang spesifik lan gampang digarap kanthi sakabèhé. Ya, sampeyan isih bakal nemokake akeh situs sing nggunakake ID, nanging atribut sing ditrapake luwih sparingly tinimbang ing wektu sing lawas nalika kelas njupuk kaca web modern.
Kelas Single utawa Multiple ing CSS?
Ing kasus paling sampeyan bakal nemtokake siji atribut kelas menyang unsur, nanging sampeyan bener ora diwatesi mung kelas siji wae sing nganggo ID. Nalika sawijining unsur mung bisa nduweni atribut ID siji, sampeyan bisa mutusake elemen kelas akeh lan, ing sawetara kasus, kanthi mangkono nggawe kaca luwih gampang lan gaya luwih fleksibel!
Yen sampeyan kudu nglebokake macem-macem kelas menyang unsur, sampeyan bisa nambah kelas tambahan lan mung misahake karo spasi ing atribut sampeyan.
Contone, paragraf iki nduweni telung kelas:
pullquote featured left "> Iki bakal dadi teks paragraf
Iki nyetel telung kelas ing tag kasebut:
- Pullquote
- Ditampilake
- Ngiwa
Wigati spasi ing antarane siji-sijine nilai kelas kasebut. Spasi kasebut minangka gaya sing beda, kelas individu. Iki uga sebabe jeneng kelas ora bisa duwe spasi ing dheweke, amarga mengkono bakal nyetel dheweke minangka kelas kapisah.
Contone, yen sampeyan nggunakake "pullquote-featured-left" tanpa spasi, bakal dadi siji kelas, nanging conto ing ndhuwur, ing ngendi telung tembung kasebut dipisahake kanthi spasi, nyetel minangka nilai individu. Penting kanggo ngerti konsep iki nalika sampeyan milih nilai-nilai kelas sing arep digunakake ing kaca web sampeyan.
Yen sampeyan duwe nilai kelas ing HTML, sampeyan bisa nemtokake iki minangka kelas ing CSS lan ngaplikasi gaya sing pengin ditambahake. Tuladhane.
.pullquote {...}
.featured {...}
p.left {...}
Ing conto kasebut, deklarasi CSS lan nilai-nilai pasangan bakal ana ing jenggahan kembung, yaiku carane gaya-gaya kasebut bakal diterapake ing selector sing cocog.
Wigati - yen sampeyan nyetel kelas menyang elemen tartamtu (contone, p.left), sampeyan isih bisa nggunakake minangka bagéan saka daftar kelas; Nanging, sumurup yen bakal mung ndarbeni elemen sing kasebut ing CSS. Ing tembung liyane, gaya p.left bakal mung ditrapake kanggo paragraf karo kelas iki amarga pemilih sampeyan bener nglamar kanthi "paragraf kanthi nilai kelas" kiwa ". Miturut kontras, rong pilihan liyane sajrone conto ora nemtokake elemen tartamtu, supaya bisa digunakake kanggo unsur sing nggunakake nilai kelas kasebut.
Kaluwihan Kelas
Kelas multi bisa luwih gampang nambah efek khusus kanggo unsur tanpa kudu nggawe gaya anyar kanggo elemen kasebut.
Contone, sampeyan bisa uga duwe kemampuan kanggo ngambang elemen ing sisih kiwa utawa tengen kanthi cepet. Sampeyan bisa nulis kelas loro kiwa lan tengen karo mung ngambang: kiwa; lan ngambang: tengen; ing dheweke. Banjur, saben sampeyan duwe unsur sampeyan kudu ngalangi kiwa, sampeyan mung nambah kelas "kiwa" menyang daftar kelas.
Nanging, ana garis sing apik kanggo lumaku ing kene. Elinga yen standar web ndhikte pemisahan gaya lan struktur. Struktur ditangani liwat HTML nalika gaya ing CSS.
Yen dokumen HTML diisi karo unsur sing kabeh duwe jeneng kelas kaya "abang" utawa "kiwa", sing jeneng sing nduduhake carane unsur katon tinimbang apa sing lagi, sampeyan nyebrang garis antarane struktur lan gaya. Aku nyoba kanggo matesi jeneng kelas semantic sing ora bisa kanggo alasan iki.
Multiple Classes, Semantics, and JavaScript
Keuntungan liyane kanggo nggunakake macem-macem kelas iku menehi sampeyan luwih akeh interactivity kemungkinan.
Sampeyan bisa ngaktifake kelas anyar menyang elemen sing ana saiki nganggo JavaScript tanpa mbusak kelas-kelas awal. Sampeyan uga bisa nggunakake kelas kanggo netepake semantik elemen . Iki tegese sampeyan bisa nambah ing kelas tambahan kanggo netepake apa unsur kasebut tegese semantik. Iki cara kerja Microformats.
Kekurangan Kelas
Kerugian sing paling gedhe kanggo nggunakake macem-macem kelas ing unsur sampeyan iku bisa nggawe wong dicokot unwieldy kanggo katon lan ngatur liwat wektu. Perlu dadi angel kanggo nemtokake gaya apa sing bakal nimbulaké sawijining unsur lan manawa ana naskah sing nyebabake. Akeh kerangka sing ana saiki, kayata Bootstrap, nggawe akeh unsur kanthi pirang-pirang kelas. Kode kasebut bisa metu saka tangan lan ora bisa digarap kanthi cepet yen sampeyan ora ati-ati.
Yen sampeyan nggunakake macem-macem kelas, sampeyan uga ngalami risiko nduwe gaya kanggo siji golongan nggoleki gaya liya sanajan sampeyan ora duwe maksud iki. Iki banjur bisa nggawe angel kanggo mangerteni kenapa gaya sampeyan ora ditrapake sanajan katon sing padha ngirim.
Sampeyan kudu ngerti kekhasan, malah karo kawicaksanan sing diterapake ing sawijining unsur!
Kanthi nggunakake alat kaya alat Webmaster ing Chrome, sampeyan bisa luwih gampang ndeleng cara kelas sampeyan ngganggu gaya lan nyegah masalah gaya lan atribut sing benten.
Artikel asli dening Jennifer Krynin. Diedit dening Jeremy Girard ing 8/7/17