Cara menggunakan Pengecek Typo Nama Class
- Masukkan URL halaman yang sudah dipublikasikan (domain staging
.webflow.iojuga bisa) lalu klik Periksa URL — atau tempel HTML, satu section, atau cukup daftar nama class. - Opsional, tempel CSS untuk juga melihat class yang ada di stylesheet tetapi tidak di halaman, serta class tanpa style sama sekali.
- Pilih aturan penamaan yang ingin dicek: Client-First, BEM, atau tidak ada.
- Periksa hasilnya — klik kotak statistik untuk langsung ke daftarnya — lalu ganti nama atau gabungkan class di Style Manager Webflow. Unduh daftar class lengkap sebagai CSV jika perlu.
Mengapa nama class mulai berantakan
Di proyek Webflow yang dikerjakan beberapa orang dan berlangsung berbulan-bulan, nama class perlahan menjadi tidak rapi. Seseorang mengetik hero_heding sekali, Webflow dengan senang hati membuat class baru, dan sejak itu separuh heading memakai typo tersebut. Elemen yang dijatuhkan dari panel Add mendapat nama otomatis seperti div-block-12 atau text-block-3. Satu desainer menulis hero-title, yang lain hero_title. Semua ini menambah CSS, membuat perubahan global melewatkan sebagian elemen, dan membuat Style Manager makin sulit dibersihkan.
Apa yang ditemukan pengecek
| Pemeriksaan | Contoh |
|---|---|
| Kemungkinan typo (jarak edit) | is-secondray di samping is-secondary |
| Duplikat tunggal/jamak | feature-card dan feature-cards |
| Kata sama, pemisah atau huruf besar-kecil berbeda | hero-title, hero_title, heroTitle |
| Nama default Webflow yang belum diberi nama | div-block-12, link-block-3, heading-7 |
| Masalah format | Huruf kapital, angka di awal, pemisah ganda, nama yang terlalu panjang |
| Aturan Client-First | Lebih dari satu underscore, class is- dipakai sebagai class dasar, class kombinasi tanpa is- |
| Aturan BEM | Elemen bersarang seperti card__body__title |
| CSS vs HTML | Class ada di stylesheet tapi tidak di halaman, atau ada di halaman tanpa style |
Pengecekan typo dibuat agar tidak sering memberi peringatan palsu: seri bernomor (card-1, card-2, heading-style-h2/h3) dan varian ukuran atau status (margin-small/margin-large, is-active/is-inactive) tidak ditandai. Jika dua nama mirip, nama yang paling sering dipakai akan disarankan sebagai ejaan yang benar.
Memeriksa seluruh situs Webflow
CSS yang dipublikasikan dari situs Webflow berisi setiap class yang punya style di seluruh proyek, jadi pengecekan URL membandingkan halaman dengan daftar class lengkap. Ini cara yang bagus untuk menemukan typo, bahkan pada class yang dipakai di halaman lain. Perlu diingat, "ada di CSS tapi tidak di halaman ini" hanya berarti class itu tidak dipakai di halaman yang kamu cek, jadi periksa template utama sebelum menghapus apa pun. Class w- bawaan Webflow diabaikan.
Memperbaiki masalah di Webflow
- Ganti nama class dengan memilih elemen yang memakainya, lalu klik dua kali class tersebut di field Selector. Semua elemen yang memakainya ikut diperbarui.
- Gabungkan typo ke class yang benar dengan memilih elemen yang bertypo, menghapus class itu, dan menerapkan class yang benar. Setelah itu, hapus class yang tidak terpakai dengan Style Manager → Clean up.
- Sepakati satu konvensi untuk section baru. Class Name Generator menghasilkan nama Client-First atau BEM yang konsisten, dan HTML & CSS to Webflow menempelkan section berkode beserta class-nya.
Sebelum launch atau serah terima ke klien, gabungkan ini dengan SEO Checker, Broken Link Checker, dan README untuk serah terima.
Juga dicari sebagai: pengecek nama class css, typo class css, audit class webflow, class duplikat, checker client-first, class css tidak terpakai, bersihkan webflow, div-block webflow.
Tool yang cocok dipakai bersama Pengecek Typo Nama Class
- Pengubah Huruf — Tempel teks apa pun dan ubah ke 11 format huruf, mulai dari Title Case untuk judul sampai camelCase dan snake_case untuk kode.
- Pembanding Teks — Tempel versi asli dan versi yang sudah diubah untuk melihat baris yang ditambah, dihapus, dan diubah secara berdampingan, lengkap dengan kata-kata yang berubah yang disorot di dalam setiap baris.
- Redirect WordPress ke Webflow — Memindahkan situs dari WordPress ke Webflow hampir pasti mengubah setiap URL: path blog berbasis tanggal, arsip /category/, trailing slash, dan slug halaman.
- Webflow Clipboard Bridge — Webflow menyimpan elemen di clipboard dengan format khusus yang tidak bisa berpindah antar browser (Firefox → Chrome, Safari → Edge…).