Termasuk komentar dalam kode CSS Anda sangat berguna dan sangat disarankan.
Setiap situs web terdiri dari elemen struktural (yang ditentukan oleh HTML) serta gaya visual atau "tampilan dan rasa" dari situs tersebut. Cascading Style Sheets (CSS) adalah apa yang digunakan untuk mendikte tampilan visual situs web. Gaya ini disimpan terpisah dari struktur HTML untuk memungkinkan kemudahan memperbarui dan kepatuhan terhadap standar Web.
Dengan ukuran kerumitan banyak situs web saat ini, style sheet dapat dengan cepat menjadi sangat panjang dan sangat tidak praktis untuk digunakan. Ini terutama berlaku saat Anda mulai menambahkan kueri media untuk gaya situs web responsif . Pertanyaan media itu sendiri dapat menambahkan sejumlah besar gaya baru ke dokumen CSS dan membuatnya lebih sulit untuk diajak bekerja sama. Di sinilah komentar CSS dapat menjadi bantuan yang tak ternilai di situs web.
Menambahkan komentar ke file CSS situs web adalah cara yang bagus untuk menambahkan struktur ke bagian kode itu untuk pembaca manusia yang sedang meninjau dokumen. Ini juga merupakan metode yang bagus untuk menjelaskan gaya-gaya tersebut bagi seorang profesional web yang mungkin harus bekerja di situs ini di masa depan - termasuk Anda sendiri!
Pada akhirnya, komentar CSS yang ditambahkan dengan cerdas akan membuat lembar gaya lebih mudah untuk diproses. Ini memang penting untuk style sheet yang akan diedit oleh tim. Komentar dapat digunakan untuk mengomunikasikan aspek-aspek penting dari style sheet ke anggota tim yang berbeda yang mungkin belum terbiasa dengan kode tersebut. Komentar-komentar ini juga bisa sangat membantu bagi orang yang pernah bekerja di situs sebelumnya jika mereka kembali ke kode setelah jauh dari itu untuk beberapa waktu. Saya sering harus mengedit situs web yang saya buat berbulan-bulan atau bahkan bertahun-tahun yang lalu dan memiliki komentar yang diformat dengan baik di HTML dan CSS sangat membantu! Ingat, hanya karena Anda membangun sebuah situs tidak berarti Anda akan mengingat mengapa Anda melakukan hal-hal yang Anda lakukan ketika Anda kembali ke situs itu di masa depan! Komentar dapat membuat niat Anda jelas dan menjernihkan kesalahpahaman apa pun sebelum itu terjadi.
Satu hal yang perlu dipahami tentang komentar CSS adalah bahwa mereka tidak ditampilkan ketika halaman dirender di browser web. Komentar tersebut hanya bersifat informatif, sama seperti komentar HTML (meskipun sintaksnya berbeda antara keduanya). Komentar CSS ini tidak mempengaruhi tampilan visual situs dengan cara apa pun dan hanya ada di kode itu sendiri.
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 akan menjadi konten komentar, hanya terlihat di kode dan tidak dirender oleh browser.
Komentar CSS dapat berupa satu baris, atau dapat mengambil beberapa baris. Berikut adalah contoh satu baris:
div # border_red {border: merah padatan tipis; } / * contoh batas merah * /Dan contoh multiline:
/ *************************** ********************** ****** Gaya untuk teks kode **************************** ************ *************** /Memecah Bagian
Salah satu cara saya sering menggunakan komentar CSS adalah mengatur style sheet saya dalam potongan yang lebih kecil, lebih mudah disembuhkan. Saya ingin dapat dengan mudah melihat bagian ini ketika saya membaca dengan teliti file nanti. Untuk melakukan ini, saya sering menambahkan komentar dengan banyak tanda hubung di dalamnya sehingga mereka memberikan jeda besar dan jelas di halaman yang mudah dilihat saat saya dengan cepat menggulir kode. Berikut ini contohnya:
/ * ----------------------- Gaya Header ----------------------- ------- * /Ketika saya melihat salah satu komentar ini dalam kode saya, saya tahu ini adalah awal dari bagian baru dari dokumen itu, memungkinkan saya untuk lebih mudah memproses dan menggunakan kode.
& # 34; Mengomentari & # 34; Kode
Tag komentar juga dapat berguna dalam proses aktual pengkodean dan debug laman. Komentar dapat digunakan untuk "mengomentari" atau "mematikan" area kode itu untuk melihat apa yang terjadi jika bagian itu bukan bagian dari halaman.
Jadi bagaimana cara kerjanya? Yah, karena tag komentar memberitahu 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.
Untuk melakukan ini, Anda cukup menambahkan tag komentar pembuka di mana Anda ingin kode tersebut mulai dinonaktifkan dan kemudian menempatkan tag penutup itu di mana Anda ingin bagian yang dinonaktifkan itu berakhir. Segala sesuatu di antara tag tersebut tidak akan memengaruhi tampilan visual situs, memungkinkan Anda untuk men-debug CSS untuk melihat di mana masalah mungkin 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 yang diberikan oleh browser, tetapi tidak ingin dihapus sepenuhnya. Ini adalah cara yang bagus untuk men-debug lembar gaya situs web - pastikan untuk menghapus gaya yang tidak digunakan (sebagai lawan dari membiarkan mereka berkomentar) jika Anda memutuskan Anda tidak membutuhkannya di situs web
- Gunakan komentar setiap kali Anda menulis CSS yang rumit untuk menambahkan klarifikasi dan untuk menginformasikan pengembang masa depan, atau diri Anda sendiri di masa depan, tentang hal-hal penting yang harus mereka ketahui. Ini akan menghemat waktu pengembangan di masa depan untuk semua yang terlibat.
- Komentar juga dapat menyertakan informasi meta seperti:
- penulis
- Tanggal Diciptakan
- informasi hak cipta
Kinerja
Komentar tentu saja bisa membantu, tetapi ketahuilah bahwa semakin banyak komentar yang Anda tambahkan ke lembar gaya, semakin tinggi itu akan menjadi, yang akan mempengaruhi kecepatan unduh dan kinerja situs. Ini adalah masalah nyata, tetapi Anda tidak perlu ragu untuk menambahkan komentar yang bermanfaat dan sah karena takut bahwa kinerja akan menderita. Baris CSS tidak menambah ukuran besar pada dokumen. Anda perlu menambahkan TONS baris komentar untuk membuat dampak yang signifikan pada ukuran file CSS. Menambahkan beberapa komentar bermanfaat ke dalam CSS Anda seharusnya tidak memberi Anda dampak negatif bersih pada kecepatan halaman.
Pada akhirnya, Anda akan ingin menemukan keseimbangan antara komentar yang membantu dan terlalu banyak komentar untuk mendapatkan manfaat dari keduanya dalam dokumen CSS Anda.
Artikel asli oleh Jennifer Krynin. Diedit oleh Jeremy Girard pada 7/5/17