Anda tidak terhad kepada kelas CSS tunggal bagi setiap elemen.
Cascading Style Sheets (CSS) membolehkan anda untuk menentukan penampilan elemen dengan menyambung ke atribut yang anda gunakan untuk elemen tersebut. Atribut ini boleh sama ada dan ID atau kelas dan, seperti semua atribut, mereka menambah maklumat yang berguna kepada unsur-unsur yang dilampirkan. Bergantung pada atribut yang anda tambahkan pada elemen, anda boleh menulis pemilih CSS untuk menggunakan gaya visual yang diperlukan untuk mencapai rupa dan nuansa elemen dan laman web secara keseluruhan.
Walaupun sama ada ID atau kelas bekerja untuk tujuan mengaitkannya dengan peraturan CSS, kaedah reka bentuk web moden memihak kelas ke atas ID, sebahagiannya, kerana mereka kurang khusus dan lebih mudah untuk bekerja dengan keseluruhannya. Ya, anda masih akan mendapati banyak laman web yang menggunakan ID, tetapi atribut tersebut sedang diterapkan dengan lebih sedikit daripada sebelumnya sedangkan kelas telah mengambil alih laman web moden.
Kelas Tunggal atau Pelbagai dalam CSS?
Dalam kebanyakan kes, anda akan menetapkan satu atribut kelas tunggal kepada elemen, tetapi sebenarnya anda tidak terhad kepada satu kelas sahaja dengan ID anda. Walaupun elemen hanya boleh mempunyai atribut ID tunggal, anda boleh benar-benar memberikan elemen berbilang kelas dan, dalam beberapa kes, berbuat demikian akan menjadikan laman anda lebih mudah untuk gaya dan lebih fleksibel!
Sekiranya anda perlu menyerahkan pelbagai kelas kepada elemen, anda boleh menambah kelas tambahan dan hanya memisahkannya dengan ruang dalam atribut anda.
Sebagai contoh, perenggan ini mempunyai tiga kelas:
pullquote featured left "> Ini akan menjadi teks perenggan
Ini menetapkan tiga kelas berikut pada tag perenggan:
- Pullquote
- Disediakan
- Dibiarkan
Perhatikan ruang antara setiap nilai kelas ini. Ruang itu adalah apa yang menetapkannya sebagai kelas yang berbeza, masing-masing. Ini juga mengapa nama kelas tidak boleh mempunyai ruang di dalamnya, kerana berbuat demikian akan menetapkannya sebagai kelas yang berasingan.
Sebagai contoh, jika anda menggunakan "pullquote-featured-left" tanpa ruang, ia akan menjadi satu nilai kelas, tetapi contoh di atas, di mana ketiga-tiga perkataan dipisahkan dengan ruang, menetapkannya sebagai nilai individu. Adalah penting untuk memahami konsep ini apabila anda membuat keputusan tentang nilai kelas yang hendak digunakan pada halaman web anda.
Sebaik sahaja anda mempunyai nilai kelas dalam HTML, anda boleh menetapkan ini sebagai kelas dalam CSS anda dan menggunakan gaya yang anda mahu tambah. Sebagai contoh.
.pullquote {...}
.featured {...}
p.left {...}
Dalam contoh-contoh ini, pengisytiharan CSS dan pasangan nilai akan berada di dalam pendakap kerinting, iaitu bagaimana gaya-gaya tersebut akan digunakan pada pemilih yang sesuai.
Nota - jika anda menetapkan kelas ke elemen tertentu (contohnya, p.left), anda masih boleh menggunakannya sebagai sebahagian daripada senarai kelas; bagaimanapun, sedar bahawa ia hanya akan menjejaskan unsur-unsur yang dinyatakan dalam CSS. Dengan kata lain, gaya p.left hanya akan terpakai kepada perenggan dengan kelas ini kerana pemilih anda sebenarnya mengatakan untuk menerapkannya kepada "perenggan dengan nilai kelas 'kiri'". Sebaliknya, dua lagi pemilih dalam contoh tidak menentukan unsur tertentu, jadi ia akan digunakan untuk sebarang unsur yang menggunakan nilai kelas tersebut.
Kelebihan Kelas Pelbagai
Pelbagai kelas boleh menjadikannya lebih mudah untuk menambah kesan khas kepada elemen tanpa perlu mencipta gaya baru untuk elemen tersebut.
Contohnya, anda mungkin ingin mempunyai keupayaan untuk mengapungkan elemen ke kiri atau kanan dengan cepat. Anda boleh menulis dua kelas kiri dan kanan dengan hanya terapung: kiri; dan terapung: betul; di dalamnya. Kemudian, apabila anda mempunyai elemen yang anda perlu terapung ke kiri, anda hanya akan menambah kelas "kiri" ke senarai kelasnya.
Walau bagaimanapun, terdapat garis halus untuk berjalan di sini. Ingatlah bahawa piawaian web menentukan pemisahan gaya dan struktur. Struktur dikendalikan melalui HTML manakala gaya dalam CSS.
Sekiranya dokumen HTML anda diisi dengan unsur-unsur yang semua mempunyai nama kelas seperti "merah" atau "kiri", yang merupakan nama yang menentukan bagaimana elemen harus kelihatan daripada apa yang mereka ada, anda menyeberangi garis antara struktur dan gaya. Saya cuba untuk mengehadkan nama-nama kelas bukan semantik saya untuk alasan ini.
Kelas Pelbagai, Semantik, dan JavaScript
Satu lagi kelebihan untuk menggunakan pelbagai kelas ialah ia memberi anda lebih banyak kemungkinan interaktiviti.
Anda boleh memohon kelas baru ke elemen sedia ada menggunakan JavaScript tanpa mengeluarkan mana-mana kelas awal. Anda juga boleh menggunakan kelas untuk menentukan semantik elemen . Ini bermakna anda boleh menambah kelas tambahan untuk menentukan apa unsur itu bermakna secara semantik. Inilah cara kerja Microformats.
Kelemahan Kelas Pelbagai
Kelemahan terbesar untuk menggunakan pelbagai kelas pada elemen anda ialah ia boleh membuat mereka agak sukar untuk melihat dan mengurus dari masa ke masa. Ia mungkin menjadi sukar untuk menentukan gaya apa yang mempengaruhi elemen dan jika skrip ada yang memberi kesan kepadanya. Banyak rangka kerja yang tersedia hari ini, seperti Bootstrap, menggunakan banyak elemen dengan pelbagai kelas. Kod itu boleh keluar dari tangan dan sukar untuk bekerja dengan sangat cepat jika anda tidak berhati-hati.
Apabila anda menggunakan berbilang kelas, anda juga menghadapi risiko memiliki gaya untuk satu kelas menimpa gaya yang lain walaupun anda tidak berniat untuk ini. Ini kemudian boleh membuat sukar untuk mengetahui mengapa gaya anda tidak digunakan walaupun kelihatan seperti itu.
Anda perlu menyedari kekhususan, walaupun dengan sifat-sifat yang digunakan untuk elemen itu!
Dengan menggunakan alat seperti alat Webmaster di Chrome, anda dapat melihat dengan lebih mudah bagaimana kelas anda mempengaruhi gaya anda dan mengelakkan masalah gaya dan atribut yang bertentangan ini.
Artikel asal oleh Jennifer Krynin. Disunting oleh Jeremy Girard pada 8/7/17