Anda tidak terbatas pada satu kelas CSS per elemen.
Cascading Style Sheets (CSS) memungkinkan Anda untuk menentukan tampilan elemen dengan mengaitkan ke atribut yang Anda terapkan ke elemen itu. Atribut-atribut ini dapat berupa ID dan kelas atau dan, seperti semua atribut, mereka menambahkan informasi bermanfaat ke elemen yang mereka lampirkan. Bergantung pada atribut mana yang Anda tambahkan ke elemen, Anda dapat menulis pemilih CSS untuk menerapkan gaya visual yang diperlukan yang diperlukan untuk mencapai tampilan dan nuansa untuk elemen itu dan situs web secara keseluruhan.
Sementara ID atau kelas bekerja untuk tujuan menghubungkannya dengan aturan CSS, metode desain web modern mendukung kelas lebih dari ID, sebagian, karena mereka kurang spesifik dan lebih mudah untuk bekerja dengan keseluruhan. Ya, Anda masih akan menemukan banyak situs yang menggunakan ID, tetapi atribut tersebut sedang diterapkan lebih hemat daripada di masa lalu sementara kelas telah mengambil alih halaman web modern.
Kelas Tunggal atau Banyak dalam CSS?
Dalam kebanyakan kasus, Anda akan menetapkan atribut kelas tunggal ke suatu elemen, tetapi Anda sebenarnya tidak terbatas hanya pada satu kelas yang mereka jalani dengan ID. Sementara elemen hanya dapat memiliki atribut ID tunggal, Anda benar-benar dapat memberikan elemen beberapa kelas dan, dalam beberapa kasus, melakukannya akan membuat halaman Anda lebih mudah untuk bergaya dan jauh lebih fleksibel!
Jika Anda perlu menetapkan beberapa kelas ke elemen, Anda dapat menambahkan kelas tambahan dan hanya memisahkannya dengan spasi di atribut Anda.
Misalnya, paragraf ini memiliki tiga kelas:
pullquote unggulan kiri "> Ini akan menjadi teks paragraf
Ini menetapkan tiga kelas berikut pada tag paragraf:
- Pullquote
- Unggulan
- Kiri
Perhatikan ruang di antara masing-masing nilai kelas ini. Ruang-ruang itu adalah apa yang membuat mereka berbeda, kelas individu. Ini juga mengapa nama kelas tidak dapat memiliki spasi di dalamnya, karena hal itu akan menjadikannya sebagai kelas terpisah.
Misalnya, jika Anda menggunakan "pullquote-featured-left" tanpa spasi, itu akan menjadi satu nilai kelas, tetapi contoh di atas, di mana ketiga kata ini dipisahkan dengan spasi, menetapkannya sebagai nilai individual. Penting untuk memahami konsep ini ketika Anda memutuskan nilai kelas mana yang akan digunakan di halaman web Anda.
Setelah Anda memiliki nilai kelas dalam HTML, Anda dapat menetapkan ini sebagai kelas dalam CSS Anda dan menerapkan gaya yang ingin Anda tambahkan. Sebagai contoh.
.pullquote {...}
.featured {...}
p.left {...}
Dalam contoh ini, deklarasi CSS dan pasangan nilai akan berada di dalam kurung kurawal, yang adalah bagaimana gaya tersebut akan diterapkan ke pemilih yang sesuai.
Catatan - jika Anda menetapkan kelas ke elemen tertentu (misalnya, p.left), Anda masih dapat menggunakannya sebagai bagian dari daftar kelas; namun, ketahuilah bahwa itu hanya akan memengaruhi elemen-elemen yang ditentukan dalam CSS. Dengan kata lain, gaya p.left hanya akan berlaku untuk paragraf dengan kelas ini karena pemilih Anda benar-benar mengatakan untuk menerapkannya ke "paragraf dengan nilai kelas 'kiri'". Sebaliknya, dua penyeleksi lain dalam contoh tidak menentukan elemen tertentu, sehingga mereka akan berlaku untuk setiap elemen yang menggunakan nilai-nilai kelas tersebut.
Keuntungan dari Beberapa Kelas
Beberapa kelas dapat mempermudah untuk menambahkan efek khusus ke elemen tanpa harus membuat gaya baru untuk elemen itu.
Misalnya, Anda mungkin ingin memiliki kemampuan untuk mengapungkan elemen ke kiri atau kanan dengan cepat. Anda mungkin menulis dua kelas kiri dan kanan dengan hanya mengambang: kiri; dan mengambang: benar; di dalamnya. Kemudian, setiap kali Anda memiliki elemen yang Anda butuhkan untuk mengapung ke kiri, Anda cukup menambahkan kelas "kiri" ke daftar kelasnya.
Namun, ada garis tipis untuk berjalan di sini. Ingat bahwa standar web mendikte pemisahan gaya dan struktur. Struktur ditangani melalui HTML sementara gaya dalam CSS.
Jika dokumen HTML Anda dipenuhi dengan elemen-elemen yang semuanya memiliki nama kelas seperti "merah" atau "kiri", yang merupakan nama yang mendikte bagaimana elemen seharusnya terlihat daripada apa yang mereka lihat, Anda melintasi garis antara struktur dan gaya. Saya mencoba untuk membatasi nama-nama kelas non-semantik saya sebanyak mungkin untuk alasan ini.
Beberapa Kelas, Semantik, dan JavaScript
Keuntungan lain untuk menggunakan beberapa kelas adalah memberi Anda banyak kemungkinan interaktivitas.
Anda dapat menerapkan kelas baru ke elemen yang ada menggunakan JavaScript tanpa menghapus kelas awal apa pun. Anda juga dapat menggunakan kelas untuk mendefinisikan semantik suatu elemen . Ini berarti Anda dapat menambahkan kelas tambahan untuk menentukan apa artinya elemen itu secara semantik. Beginilah cara Microformats berfungsi.
Kekurangan Multiple Classes
Kerugian terbesar menggunakan banyak kelas pada elemen Anda adalah hal itu dapat membuat mereka agak sulit untuk dilihat dan dikelola dari waktu ke waktu. Mungkin menjadi sulit untuk menentukan gaya apa yang memengaruhi elemen dan apakah ada skrip yang memengaruhi. Banyak kerangka kerja yang tersedia saat ini, seperti Bootstrap, menggunakan banyak elemen dengan banyak kelas. Kode itu dapat keluar dari tangan dan sulit untuk bekerja dengan sangat cepat jika Anda tidak berhati-hati.
Ketika Anda menggunakan beberapa kelas, Anda juga berisiko memiliki gaya untuk satu kelas menggantikan gaya yang lain bahkan jika Anda tidak berniat untuk ini. Ini kemudian dapat menyulitkan untuk mencari tahu mengapa gaya Anda tidak diterapkan bahkan ketika tampak bahwa mereka seharusnya.
Anda perlu menyadari kekhususan, bahkan dengan atribut yang diterapkan pada satu elemen itu!
Dengan menggunakan alat seperti alat Webmaster di Chrome, Anda dapat lebih mudah melihat bagaimana kelas Anda memengaruhi gaya Anda dan menghindari masalah gaya dan atribut yang bertentangan ini.
Artikel asli oleh Jennifer Krynin. Diedit oleh Jeremy Girard pada 8/7/17