Webflow
Penamaan Class
Standar penamaan class, reusable class, dan combo class di Webflow.
Konvensi Penamaan
Aturan Wajib
- Semua class menggunakan bahasa Inggris
- Penamaan menggunakan huruf kapital di awal setiap kata, dipisahkan spasi (contoh:
Hero Card) - Webflow akan secara otomatis mengonversi menjadi format
hero-card - Tidak menggunakan nama berbasis tampilan visual
Contoh
| ❌ Tidak Disarankan | ✅ Disarankan |
|---|---|
kotak-kiri | Hero Card |
text-merah-besar | Heading Primary |
box-biru | Feature Card |
Gunakan nama berdasarkan fungsi, bukan bentuk visual.
Reusable Class
Sebelum membuat class baru, selalu periksa apakah class serupa sudah tersedia di Webflow.
Aturan Wajib
- Gunakan base class untuk elemen yang memiliki fungsi yang sama
- Satu jenis elemen (misalnya button) seharusnya menggunakan satu base class yang sama
Membuat class duplikat untuk elemen dengan fungsi identik akan mempersulit pemeliharaan dan pembaruan global.
Combo Class
Combo class digunakan untuk membuat variasi dari sebuah base class tanpa menduplikasi styling dasar.
Aturan Wajib
- Semua variasi styling harus menggunakan combo class
- Tidak diperbolehkan membuat class baru hanya untuk perbedaan kecil (warna, ukuran)
Contoh
Button + Primary → button primary (warna utama)
Button + Secondary → button secondary (warna sekunder)
Button + Ghost → button ghost (tanpa background)Dengan pendekatan ini, perubahan pada base class Button akan langsung berdampak pada semua variasinya.