Webflow
Anti-Patterns & Navigator
Hal-hal yang harus dihindari dan standar kebersihan navigator di Webflow.
Anti-Pattern
Hindari kebiasaan berikut yang dapat menyebabkan inkonsistensi dan kesulitan pemeliharaan:
| Anti-Pattern | Dampak |
|---|---|
| Membuat class baru tanpa kebutuhan | Class bloat, sulit dicari dan dipelihara |
| Melakukan styling manual | Inkonsistensi dengan design system |
| Tidak menggunakan container | Layout tidak konsisten antar halaman |
| Menggunakan margin untuk positioning | Layout rapuh saat breakpoint berubah |
| Mengunggah asset berukuran besar | Halaman lambat, performa buruk |
| Menggunakan warna hex manual | Inkonsistensi warna, sulit diganti global |
| Styling teks tanpa variable | Tidak terhubung ke design system |
Navigator Cleanliness
Navigator yang rapi adalah tanda pekerjaan yang profesional dan mudah diteruskan oleh orang lain.
Checklist Sebelum Submit
- Semua section telah di-rename dengan nama yang jelas dan deskriptif
- Tidak terdapat class default seperti
Div Block XXXatauText Block XXX - Struktur navigator rapi, terindentasi dengan benar, dan mudah dibaca
- Tidak ada elemen yang terhidden tanpa alasan jelas
Struktur navigator yang tidak rapi akan menyulitkan proses pengembangan lanjutan, baik oleh diri sendiri maupun anggota tim lain.
Contoh Penamaan yang Baik di Navigator
✅ Section: Hero
Container: Hero Container
Wrapper: Hero Content Wrapper
Heading: Hero Heading
Paragraph: Hero Subheading
Div: Hero CTA Group❌ Section: Section 3
Div Block 47
Div Block 52
Heading 2