Mengapa koma sederhana menyederhanakan pengkodean
CSS, atau Cascading Style Sheets, adalah cara industri web yang diterima untuk menambahkan gaya visual ke situs. Dengan CSS, Anda dapat mengontrol tata letak halaman, warna, tipografi , gambar latar, 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 semakin panjang dan panjang. Bahkan situs kecil dengan hanya segelintir halaman dapat berakhir dengan file CSS yang cukup besar - dan situs yang sangat besar dengan banyak dan banyak halaman konten yang unik dapat memiliki file CSS yang sangat besar. Ini diperparah oleh situs responsif yang memiliki banyak permintaan media yang termasuk dalam style sheet untuk mengubah tampilan visual dan halaman yang muncul untuk layar yang berbeda.
Ya, file CSS bisa menjadi panjang. Ini bukan masalah besar ketika datang ke kinerja situs dan kecepatan unduh, karena bahkan file CSS yang panjang cenderung sangat kecil (karena itu benar-benar hanya dokumen teks). Namun, setiap jumlah sedikit berarti ketika datang ke kecepatan halaman, jadi jika Anda dapat membuat style sheet Anda lebih ramping, itu ide yang bagus. Di sinilah "koma" bisa sangat berguna dalam style sheet Anda!
Koma dan CSS
Anda mungkin bertanya-tanya peran apa yang dimainkan koma dalam sintaks pemilih CSS . Seperti dalam kalimat, koma membawa kejelasan — bukan kode — ke pemisah. Koma pada pemilih CSS memisahkan beberapa pemilih dalam gaya yang sama.
Sebagai contoh, mari kita lihat beberapa CSS di bawah ini.
th {color: red; }
td {warna: merah; }
p.red {color: red; }
div # firstred {color: red; }
Dengan sintaks ini, Anda mengatakan bahwa Anda ingin tag th , tag td , tag paragraf dengan kelas merah, dan tag div dengan ID dilemparkan semua untuk memiliki warna gaya merah.
Ini adalah CSS yang dapat diterima dengan baik, tetapi ada dua kelemahan signifikan untuk menulisnya seperti ini:
- Di masa depan, jika Anda memutuskan untuk mengubah warna font dari properti ini menjadi biru, Anda harus mengubahnya sebanyak empat kali di style sheet Anda.
- Ini menambahkan banyak karakter ekstra ke style sheet Anda yang tidak Anda butuhkan. 4 gaya ini mungkin tidak tampak berlebihan, tetapi jika Anda terus melakukan hal ini di seluruh style sheet Anda, garis-garisnya akan bertambah dan lembar itu akan jauh, jauh lebih besar dari yang seharusnya.
Agar dapat menghindari kekurangan ini, dan untuk menyederhanakan file CSS Anda, kami akan mencoba menggunakan koma.
Menggunakan Koma untuk Memisahkan Penyeleksi
Alih-alih menulis 4 pemilih CSS terpisah dan 4 aturan, Anda dapat menggabungkan semua gaya ini menjadi satu properti aturan dengan memisahkan pemilih individual dengan koma. Inilah cara yang akan dilakukan:
th, td, p.red, div # firstred {color: red; }
Karakter koma pada dasarnya bertindak sebagai kata "dan" di dalam pemilih. Jadi ini berlaku untuk tag t DAN td tag DAN tag paragraf dengan kelas merah DAN tag div dengan ID di-host. Itulah tepatnya yang kami miliki sebelumnya, tetapi alih-alih membutuhkan 4 aturan CSS, kami memiliki satu aturan dengan banyak pemilih. Ini adalah apa yang koma lakukan di pemilih, ini memungkinkan kita untuk memiliki beberapa pemilih dalam satu aturan.
Tidak hanya pendekatan ini membuat file CSS lebih ramping dan lebih bersih, itu juga membuat pembaruan masa depan jadi lebih mudah. Sekarang jika Anda ingin mengubah warna dari merah menjadi biru, Anda hanya perlu melakukan perubahan di satu lokasi alih-alih melintasi aturan gaya 4 asli yang kami miliki! Pikirkan tentang penghematan waktu ini di seluruh file CSS dan Anda dapat melihat bagaimana ini akan menghemat waktu dan ruang dalam jangka panjang!
Variasi Sintaks
Sebagian orang memilih untuk membuat CSS lebih mudah dibaca dengan memisahkan setiap pemilih pada barisnya sendiri, alih-alih menulis semuanya pada satu baris seperti di atas. Inilah cara yang akan dilakukan:
th,
td,
p.red,
div # diaktifkan
{
warna merah;
}
Perhatikan bahwa Anda menempatkan koma setelah setiap pemilih dan kemudian gunakan "enter" untuk mematahkan pemilih berikutnya ke barisnya sendiri. Anda TIDAK menambahkan koma setelah pemilih terakhir.
Dengan menggunakan koma di antara pemilih Anda, Anda membuat lembar gaya yang lebih ringkas yang lebih mudah untuk diperbarui di masa depan dan itu lebih mudah dibaca hari ini!
Artikel asli oleh Jennifer Krynin. Diedit oleh Jeremy Girard pada 5/8/17