Cara Menambahkan Komentar ke Cascading Style Sheets (CSS)

Setiap situs web terdiri dari struktur (yang ditentukan oleh HTML), fungsional, dan elemen gaya. Cascading Style Sheets (CSS) digunakan untuk menentukan tampilan ("tampilan dan nuansa") dari sebuah situs web. Gaya ini disimpan terpisah dari struktur HTML untuk memungkinkan kemudahan memperbarui dan kepatuhan terhadap standar web.

Masalah Dengan Stylesheet

Dengan ukuran dan kompleksitas banyak situs web saat ini, stylesheet dapat menjadi sangat panjang dan tidak praktis. Hal ini terutama benar saat ini bahwa kueri media untuk gaya situs web yang responsif merupakan bagian penting dari desain, memastikan bahwa situs web terlihat sebagaimana seharusnya terlepas dari perangkatnya. Pertanyaan media itu sendiri dapat menambahkan sejumlah besar gaya baru ke dokumen CSS, membuatnya lebih sulit untuk diajak bekerja sama. Di sinilah komentar CSS dapat menjadi bantuan yang tak ternilai bagi perancang situs web dan pengembang.

Komentar Tambahkan Struktur dan Kejelasan

Menambahkan komentar ke file CSS situs web adalah cara yang bagus untuk mengatur bagian dari kode itu untuk pembaca manusia yang sedang meninjau dokumen. Ini juga memastikan konsistensi ketika salah satu profesional web mengambil di mana yang lain pergi, atau ketika tim orang bekerja di situs.

Komentar yang diformat dengan baik dapat mengomunikasikan aspek penting dari stylesheet kepada anggota tim yang mungkin belum terbiasa dengan kode tersebut. Komentar-komentar ini juga sangat membantu bagi orang-orang yang pernah bekerja di situs sebelumnya tetapi belum lama ini; desainer web biasanya bekerja di banyak situs, dan mengingat strategi desain dari yang satu ke yang berikutnya sulit.

Hanya untuk Mata Profesional

Komentar CSS tidak ditampilkan ketika halaman ditampilkan di browser web. Komentar tersebut hanya bersifat informatif, seperti halnya komentar HTML (walaupun sintaksnya berbeda). Komentar CSS ini tidak mempengaruhi tampilan visual situs dengan cara apa pun.

Menambahkan Komentar CSS

Menambahkan komentar CSS cukup mudah. Anda cukup membukukan komentar Anda dengan tag komentar pembuka dan penutup yang benar:

Mulai komentar Anda dengan menambahkan
/*
Tutup komentar Anda dengan menambahkan
*/

Apa pun yang muncul di antara dua tag ini adalah konten komentar, hanya terlihat di kode dan tidak dirender oleh browser.

Komentar CSS dapat mengambil sejumlah baris. Berikut dua contoh:

/ * Contoh batas merah * / div # border_red { perbatasan: merah padatan tipis; }/*******************************************************Gaya untuk teks kode*******************************************************/

Memecah Bagian

Banyak desainer mengatur stylesheet dalam potongan kecil yang mudah dicerna yang mudah dipindai saat membaca. Biasanya, Anda akan melihat komentar yang didahului dan diikuti oleh serangkaian tanda hubung yang menciptakan jeda besar dan jelas di halaman yang mudah dilihat. Berikut ini contohnya:

/ * ----------------------- Gaya Header ----------------------- ------- * /
Komentar-komentar ini menunjukkan dimulainya bagian baru pengkodean.

Kode "Mengomentari"

Karena tag komentar memberi tahu browser untuk mengabaikan semuanya di antara mereka, Anda dapat menggunakannya untuk sementara menonaktifkan bagian-bagian tertentu dari kode CSS. Ini dapat berguna saat melakukan debug, atau saat menyesuaikan pemformatan halaman web. Bahkan, desainer sering menggunakannya untuk "mengomentari" atau "mematikan" area kode untuk melihat apa yang terjadi jika bagian itu bukan bagian dari halaman.

Untuk melakukan ini, cukup tambahkan tag komentar pembuka sebelum kode yang ingin Anda komentari (nonaktifkan); tempatkan tag penutup di mana Anda ingin bagian yang dinonaktifkan itu berakhir. Tidak ada di antara tag tersebut yang akan memengaruhi tampilan visual situs, memungkinkan Anda untuk men-debug CSS untuk melihat di mana masalah terjadi. Anda kemudian dapat masuk dan memperbaiki masalah itu dan menghapus komentar dari kode.

Kiat Mengomentari CSS

Sebagai rekap, berikut adalah beberapa kiat yang harus diingat untuk menggunakan komentar di CSS Anda:

Komentar dapat menjangkau banyak baris.

Komentar dapat menyertakan elemen CSS yang tidak Anda inginkan untuk dirender tetapi Anda tidak ingin menghapus sepenuhnya. Ingatlah untuk menghapus gaya yang tidak digunakan (sebagai lawan untuk membiarkan mereka berkomentar) jika Anda memutuskan Anda tidak membutuhkannya di situs web.

Gunakan komentar setiap kali Anda menulis CSS yang rumit untuk menambahkan struktur, klarifikasi keputusan desain, dan beri tahu pengembang masa depan (atau ingatkan diri Anda) tentang pertimbangan penting. Ini menghemat waktu di masa depan untuk semua yang terlibat.

Komentar juga dapat menyertakan informasi meta seperti:

Penulis

Tanggal Diciptakan

hak cipta

Kinerja

Meskipun menambahkan terlalu banyak komentar dapat memengaruhi kecepatan unduh dan kinerja situs, Anda tidak perlu ragu untuk menggunakannya. Diperlukan banyak baris komentar untuk memiliki dampak negatif yang signifikan. Seperti banyak aspek desain web, semuanya turun ke keseimbangan.