Bagaimana cara menuliskan baris komentar pada file css?

Halo semuanya, pada artikel ini badoystudio akan mengulas bagaimana cara membuat komentar di CSS. Untuk kamu yang ingin mengetahui lebih lanjut seperti apa pembahasannya, silahkan ikuti panduan berikut ini sampai selesai ya.

Daftar Isi

Memahami Komentar pada CSS dan Fungsinya

Komentar dalam CSS merupakan teks atau catatan yang tidak ditampilkan dan diartikan oleh browser, sehingga tidak akan mempengaruhi desain web sama sekali. Karena komentar nantinya hanya bisa dibaca dan dilihat oleh developer web yang menuliskan kode CSS. Adapun beberapa fungsi dibuatnya komentar pada kode-kode CSS, adalah sebagai berikut :

Membuat Catatan

Komentar baik itu di HTML, PHP, maupun CSS fungsi utamanya sama saja yaitu untuk membuat catatan tertentu dalam kode CSS. Contohnya, kalau kamu sedang belajar CSS dan supaya tidak ingat mengenai properti tertentu, kamu bisa menambahkan kalau ini adalah properti untuk tabel atau lainnya.

Mencegah Kode CSS dieksekusi

Selanjutnya komentar yang dibuat pada CSS juga bisa kita fungsikan untuk mencegah agar kode CSS yang sudah ditulis jangan dulu dieksekusi atau tidak berfungsi sementara waktu.

Contohnya, kamu ingin mengganti kode CSS yang sudah ditulis dengan yang baru, namun kamu tidak yakin apakah kode yang baru ini akan berfungsi dengan baik atau tidak, maka alih-alih menghapusnya kamu bisa menonaktifkannya dengan komentar. Jadi, pada saat kode baru yang ditulis tidak berfungsi kita tetap bisa menggunakan kode CSS lama yang sementara dinonaktifkan dengan menggunakan komentar.

Memudahkan dalam Berkolaborasi

Dengan adanya penambahan catatan pada CSS maka ini akan memudahkan jika kamu berkolaborasi dengan orang lain pada saat mendesain website. Karena orang lain akan memahami kode CSS tertentu berfungsi untuk apa. Bayangkan kalau tidak ada catatan entah itu pengingat, penanda kode yang bermasalah, dan catatan mengenai kegunaan kode, kemungkinan besar teman kamu pasti bingung membaca kode-kode CSS yang sudah ditulis.

Cara Membuat Komentar di CSS

Sebelum kita membahas bagaimana cara membuat komentar di CSS, kita harus tahu dulu tag yang digunakan untuk membuatnya, yaitu :

• Tag pembukanya : (/*)
• Tag penutupnya : (*/)

Penulisannya seperti contoh berikut ini :

/* komentar atau catatan ditulis di sini */

Untuk lebih jelasnya mengenai contoh, silahkan baca lanjutan pembahasannya di bawah.

Membuat Komentar Satu Baris ( Single Line )

Kamu dapat membuat komentar di CSS dengan satu baris atau basa disebut dengan Single Line. Komentar jenis ini umumnya digunakan untuk membuat catatan singkat mengenai kode CSS tertentu.

Contoh penggunannya seperti kode-kode di bawah ini :

/* digunakan untuk mengatur desain tabel */
.content-table{
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    min-width: 400px;
}

Semakin panjang komentar atau catatan yang dibuat maka akan melebar ke samping dan tidak enak untuk dibaca, sehingga disarankan menggunakan komentar Multiple Line.

Membuat Komentar Beberapa Baris ( Multiple Line )

Jenis komentar yang kedua yaitu Multiple Line, di mana kamu bisa membuat komentar dalam bentuk catatan di antara kode-kode CSS yang dibuat dengan panjang.

Contoh penggunaannya seperti pada baris kode berikut ini :

/* bagian ini digunakan untuk
mengatur desain thead
dan juga mengatur desain tr
yaitu memberikan warna background
mengatur warna font atau tulisan
dan juga perataan teks */

.content-table thead tr{
    background-color:blue;
    color: #fff;
    text-align: left;
    font-weight: bold;
}

Shortcut Komentar di Text Editor Visual Studio Code dan Sublime Text

Supaya menulis komentar di CSS bisa lebih cepat kamu bisa gunakan shortcut atau tombol cepat. Jika kamu menggunakan text editor VS Code ataupun Sublime Text, tombol shortcutnya yaitu :

• CTRL + / (Jika menggunakan Windows),
• MacOS silahkan pakai Command + /,
• dan Linux menggunakan CTRL + SHIFT + /.

Penutup

Itulah cara membuat komentar di CSS, sangat mudah tentunya ya untuk dipraktekan. Semoga panduan ini membantu dan bermanfaat untuk kamu. Jangan lupa share juga ke temanmu yang lainnya supaya lebih tersebar luas manfaatnya.

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:

Dan contoh multiline:

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:

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:

1. Komentar dapat menjangkau banyak baris.
2. 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
3. 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.
4. 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.

Bagaimana cara untuk memberi komentar satu baris di javascript?

Bagaimana cara menyisipkan komentar yang memiliki lebih dari satu baris?

Syarat penulisan kode CSS harus berada di tag apa?

Jelaskan apa yang dimaksud dengan CSS?