CSS, atau Lembar Gaya Cascading, adalah cara yang diterima industri desain web untuk menambahkan gaya visual ke situs. Dengan CSS, Anda dapat mengontrol tata letak halaman, warna, tipografi, gambar latar belakang, dan banyak lagi. Pada dasarnya, jika itu adalah gaya visual, maka CSS adalah cara untuk membawa gaya tersebut ke situs web Anda.
Saat Anda menambahkan gaya CSS ke dokumen, Anda mungkin memperhatikan bahwa dokumen mulai menjadi lebih panjang dan lebih panjang. Bahkan situs kecil dengan hanya beberapa halaman dapat berakhir dengan file CSS yang cukup besar - dan situs yang sangat besar dengan banyak halaman konten unik dapat memiliki file CSS yang sangat besar. Hal ini diperparah dengan situs responsif yang punya banyak pertanyaan media disertakan dalam lembar gaya untuk mengubah tampilan visual dan tata letak halaman untuk layar yang berbeda.
Ya, file CSS bisa menjadi panjang. Ini bukan masalah besar dalam hal kinerja situs dan kecepatan unduh, karena bahkan file CSS yang panjang pun cenderung berukuran sangat kecil (karena ini sebenarnya hanya dokumen teks). Namun, setiap sedikit penting dalam hal kecepatan halaman, jadi jika Anda dapat membuat style sheet Anda lebih ramping, itu adalah ide yang bagus. Di sinilah "koma" bisa sangat berguna dalam style sheet Anda!
Koma dan CSS
Anda mungkin bertanya-tanya apa peran koma dalam sintaks pemilih CSS. Seperti dalam kalimat, koma membawa kejelasan — bukan kode — ke pemisah. Koma dalam pemilih CSS memisahkan beberapa pemilih dalam gaya yang sama.
Sebagai contoh, mari kita lihat beberapa CSS di bawah ini.
th { warna: merah; }
td { warna: merah; }
p.red { warna: merah; }
div#firstred { warna: merah; }
Dengan sintaks ini, Anda mengatakan bahwa Anda ingin ini tag, td tag, tag paragraf dengan kelas merah, dan tag div dengan ID pertama-tama memiliki warna gaya merah.
Ini adalah CSS yang dapat diterima, tetapi ada dua kelemahan signifikan untuk menulisnya dengan cara ini:
- Di masa depan, jika Anda memutuskan untuk mengubah warna huruf dari properti ini menjadi biru, Anda harus membuat perubahan itu empat kali di lembar gaya Anda.
- Ini menambahkan banyak karakter tambahan ke lembar gaya Anda yang tidak Anda butuhkan. 4 gaya ini mungkin tidak tampak berlebihan, tetapi jika Anda terus melakukan ini di seluruh lembar gaya Anda, garis akan bertambah dan lembar itu akan jauh, jauh lebih besar dari yang seharusnya.
Untuk menghindari kelemahan ini, dan untuk merampingkan file CSS Anda, kami akan mencoba menggunakan koma.
Menggunakan Koma untuk Memisahkan Selektor
Alih-alih menulis 4 pemilih CSS dan 4 aturan terpisah, Anda dapat menggabungkan semua gaya ini menjadi satu properti aturan dengan memisahkan pemilih individu dengan koma. Inilah cara yang akan dilakukan:
th, td, p.red, div#firstred { warna: merah; }
Karakter koma pada dasarnya bertindak sebagai kata "atau" di dalam pemilih. Jadi ini berlaku untuk ini tag ATAU td tag ATAU tag paragraf dengan kelas merah ATAU tag div dengan ID didahulukan. Itulah yang kami miliki sebelumnya, tetapi alih-alih membutuhkan 4 aturan CSS, kami memiliki satu aturan dengan banyak pemilih. Inilah yang dilakukan koma di pemilih, ini memungkinkan kita untuk memiliki banyak pemilih dalam satu aturan.
Pendekatan ini tidak hanya membuat file CSS lebih ramping dan bersih, tetapi juga membuat pembaruan di masa mendatang menjadi jauh lebih mudah. Sekarang jika Anda ingin mengubah warna dari merah menjadi biru, Anda hanya perlu membuat perubahan di satu lokasi, bukan di 4 aturan gaya asli yang kami miliki! Pikirkan tentang penghematan waktu ini di seluruh file CSS dan Anda dapat melihat bagaimana ini akan menghemat waktu dan ruang Anda dalam jangka panjang!
Variasi Sintaks
Beberapa orang memilih untuk membuat CSS lebih mudah dibaca dengan memisahkan setiap pemilih pada barisnya sendiri, daripada menulis semuanya dalam satu baris seperti di atas. Inilah cara yang akan dilakukan:
t,
td,
p.red,
div#firstred
{
warna merah;
}
Perhatikan bahwa Anda menempatkan koma setelah setiap pemilih dan kemudian menggunakan "enter" untuk memecah pemilih berikutnya ke barisnya sendiri. Anda TIDAK menambahkan koma setelah pemilih terakhir.
Dengan menggunakan koma di antara penyeleksi Anda, Anda membuat lebih banyak lembar gaya kompak itu lebih mudah untuk diperbarui di masa depan dan itu lebih mudah dibaca hari ini!