Apa Itu kebab-case? Penggunaan di URL dan CSS

kebab-case menulis setiap huruf dengan huruf kecil dan menyambung kata dengan tanda hubung (-), dinamai berdasarkan bahan yang ditusuk pada tusuk kebab.

Aturan kebab-case

user profile image menjadi user-profile-image dalam kebab-case. Ia juga disebut spinal-case atau dash-case.

Ia berbeda dari snake_case hanya dalam penggunaan tanda hubung alih-alih garis bawah.

Di mana ia digunakan

• Path URL dan slug (mis. /my-blog-post)
• Kelas CSS dan properti kustom (--main-color)
• Atribut data HTML (data-user-id)
• Nama berkas dan nama paket npm

Mengapa tanda hubung di URL dan CSS

Di banyak bahasa pemrograman garis bawah diizinkan dalam pengidentifikasi, tetapi tanda hubung dibaca sebagai pengurangan dan tidak dapat digunakan dalam nama. Maka tanda hubung secara alami menempati area di luar kode seperti URL, CSS dan nama berkas.

Mesin pencari memperlakukan tanda hubung sebagai pemisah kata, sementara garis bawah kadang tidak, sehingga tanda hubung direkomendasikan di URL.

Sebuah peringatan

Tanda hubung tidak dapat digunakan dalam pengidentifikasi kode, sehingga kebab-case tidak dipakai untuk hal-hal seperti nama variabel JavaScript. Dalam kasus itu, konversikan ke camelCase saja.