Kenapa koma mudah menyederhanakan pengekodan
CSS, atau Cascading Style Sheets, adalah cara yang diterima industri reka bentuk web untuk menambah gaya visual ke laman web. Dengan CSS, anda boleh mengawal susun atur halaman, warna, tipografi , imej latar belakang, dan banyak lagi. Pada dasarnya, jika ia adalah gaya visual, maka CSS adalah cara untuk membawa gaya tersebut ke laman web anda.
Apabila anda menambah gaya CSS pada dokumen, anda mungkin mendapati bahawa dokumen itu mula menjadi lebih lama dan lebih lama. Malah sebuah laman kecil dengan hanya beberapa halaman boleh berakhir dengan fail CSS yang cukup besar - dan laman web yang sangat besar dengan banyak dan banyak halaman kandungan unik boleh mempunyai fail CSS yang sangat besar. Ini dikompaunkan oleh tapak yang responsif yang mempunyai banyak pertanyaan media yang dimasukkan dalam helaian gaya untuk mengubah rupa visual dan halaman yang dipaparkan untuk skrin yang berbeza.
Ya, fail CSS boleh menjadi panjang. Ini bukan masalah utama ketika datang ke laman prestasi dan kecepatan muat turun, karena bahkan file CSS yang panjang mungkin sangat kecil (karena itu benar-benar hanya dokumen teks). Walau bagaimanapun, setiap hitungan kecil apabila datang ke kelajuan halaman, jadi jika anda boleh membuat lembaran gaya anda lebih leaner, itu adalah idea yang baik. Di sinilah "koma" boleh datang dengan sangat berguna dalam helaian gaya anda!
Koma dan CSS
Anda mungkin tertanya-tanya apa peranan koma dalam sintaks pemilih CSS . Seperti dalam ayat, koma membawa kejelasan-bukan kod-kepada pemisah. Koma dalam pemilih CSS memisahkan pelbagai pemilih dalam gaya yang sama.
Sebagai contoh, mari kita lihat beberapa CSS di bawah.
th {color: red; }
td {color: red; }
p.red {color: red; }
div # firstred {color: red; }
Dengan sintaks ini, anda mengatakan bahawa anda mahu tag, tag tdk, tag paragraf dengan kelas merah, dan tag div dengan ID yang dibakar semua untuk mempunyai warna gaya merah.
Ini adalah CSS yang boleh diterima, tetapi terdapat dua kelemahan penting untuk menulis dengan cara ini:
- Pada masa akan datang, jika anda memutuskan untuk menukar warna font sifat-sifat ini menjadi biru, anda perlu membuat perubahan itu empat kali dalam helaian gaya anda.
- Ia menambah banyak aksara tambahan kepada helaian gaya anda yang anda tidak perlukan. 4 gaya ini mungkin tidak kelihatan seperti berlebihan, tetapi jika anda terus melakukan ini di seluruh helaian gaya anda, garisan akan ditambah dan helaian itu akan jauh, jauh lebih besar daripada yang diperlukan.
Untuk mengelakkan kelemahan ini, dan untuk menyelaraskan fail CSS anda, kami akan cuba menggunakan koma.
Menggunakan Komas untuk Pemilih Terpisah
Daripada menulis 4 pemilih CSS berasingan dan 4 peraturan, anda boleh menggabungkan semua gaya ini menjadi satu aturan harta dengan memisahkan pemilih individu dengan koma. Berikut adalah cara yang akan dilakukan:
th, td, p.red, div # firstred {color: red; }
Watak koma pada dasarnya bertindak sebagai perkataan "dan" di dalam pemilih. Jadi ini terpakai untuk t h tag AND td tag DAN tag paragraf dengan kelas merah DAN tag div dengan ID firstred. Itulah yang kami telah lakukan sebelum ini, tetapi bukannya memerlukan 4 peraturan CSS, kami mempunyai satu peraturan dengan beberapa pemilih. Inilah yang dilakukan koma dalam pemilih, ia membolehkan kita mempunyai beberapa pemilih dalam satu peraturan.
Bukan sahaja pendekatan ini dibuat untuk lebih bersih, lebih bersih fail CSS, ia juga membuat kemas kini masa depan jauh lebih mudah. Sekarang jika anda ingin menukar warna dari merah ke biru, anda hanya perlu membuat perubahan dalam satu lokasi dan bukannya mengikut peraturan 4 gaya asal yang kami ada! Fikirkan tentang penjimatan masa ini merentasi keseluruhan fail CSS dan anda dapat melihat bagaimana ini akan menjimatkan masa dan ruang anda dalam jangka panjang!
Perubahan Sintaks
Sesetengah orang memilih untuk membuat CSS lebih mudah dibaca dengan memisahkan setiap pemilih pada barisnya sendiri, bukannya menulis semua pada satu baris seperti di atas. Inilah cara yang akan dilakukan:
th,
td,
p.red,
div # firstred
{
warna: merah;
}
Perhatikan bahawa anda meletakkan koma selepas setiap pemilih dan kemudian gunakan "masukkan" untuk memecahkan pemilih seterusnya ke barisnya sendiri. Anda TIDAK menambah koma selepas pemilih akhir.
Dengan menggunakan koma di antara pemilih anda, anda membuat lembaran gaya yang lebih padat yang lebih mudah untuk dikemas kini di masa hadapan dan lebih mudah dibaca hari ini!
Artikel asal oleh Jennifer Krynin. Disunting oleh Jeremy Girard pada 5/8/17