Cara menggunakan Generator Nama Class
- Jelaskan section dengan bahasa biasa: apa jenisnya (hero, features, pricing, FAQ, footer…) dan isinya (“tagline, heading, dua tombol, gambar di kanan”, “3 kartu dengan ikon dan link”).
- Pilih konvensi penamaan: Client-First (sistem Webflow dari Finsweet), BEM, atau kebab-case Sederhana. Strukturnya diperbarui otomatis saat kamu mengetik.
- Klik class mana pun di pohon untuk menyalinnya, atau Salin semua untuk seluruh daftar. Class bergaris putus-putus adalah combo class.
- Klik Salin struktur ke Webflow lalu tempel ke Designer untuk mendapatkan seluruh pohon elemen beserta class dan gaya tata letak awal. Kamu juga bisa membuka konverter HTML & CSS untuk mengedit dulu.
Kenapa penamaan class penting di Webflow
Setiap class yang kamu buat di Webflow akan masuk ke Style Manager dan CSS situs. Tanpa sistem, proyek akan penuh nama seperti div-block-47, Heading 3, hero-title, dan heroTitle yang bercampur. Akibatnya class sulit dipakai ulang dan repot saat diserahkan ke klien. Konvensi penamaan membuat class mudah ditebak. Siapa pun di tim (atau klien beberapa bulan kemudian) akan tahu apa itu pricing_plan-name dan di mana dipakainya.
Tiga konvensi
| Client-First | BEM | Sederhana | |
|---|---|---|---|
| Section | section_hero | hero | hero-section |
| Elemen | hero_heading | hero__heading | hero-heading |
| Varian | button is-secondary | hero__button--secondary | button is-secondary |
| Tata letak | padding-global › container-large › padding-section-large | hero__container | container |
Client-First dari Finsweet adalah sistem yang paling banyak dipakai di komunitas Webflow. Garis bawah memisahkan “folder” (komponen) dari elemennya, misalnya hero_content dan hero_image-wrapper. Class utilitas menangani tipografi dan spasi (heading-style-h1, text-size-medium), sedangkan combo class diawali is-. BEM (Block, Element, Modifier) adalah konvensi klasik di front-end dan cocok jika tim juga menulis kode di luar Webflow. Sederhana dengan kebab-case sudah cukup untuk situs kecil.
Apa yang dipahami generator
Generator ini mengenali jenis section (hero, features, testimonials, pricing, FAQ, stats, logos, team, steps, CTA, navbar, footer, dan lainnya), konten (tagline, heading, subheading, paragraf, tombol, gambar, video, form, daftar, badge), item berulang dengan jumlahnya (“3 cards”, “six questions”, “4 stats”), serta petunjuk tata letak (“image on the left”, “centered”, “two columns”). Tombol memakai class global button dengan combo is-secondary, sesuai cara kerja sebagian besar panduan gaya Webflow.
Dari nama ke section yang siap dipakai
Dengan Starter layout CSS aktif, struktur datang dengan default yang masuk akal: lebar container, padding section, grid dua kolom yang menumpuk di tablet, grid kartu yang menumpuk di mobile, dan gaya tombol. Salin ke Webflow dan kamu sudah punya kerangka kerja untuk didesain lebih lanjut. Untuk penyesuaian, buka HTML & CSS ke Webflow, ubah kodenya, lalu tempel. Setelah itu, jalankan Class Name Typo Checker pada halaman untuk menangkap salah ketik sebelum rilis.
Tips penamaan
- Beri nama berdasarkan tujuan, bukan tampilan:
pricing_plantetap relevan saat redesain, sedangkanblue-boxtidak. - Jaga nama folder tetap pendek dan konsisten (
hero_,pricing_,footer_). - Gunakan combo class untuk varian dari hal yang sama (
is-featured,is-dark), dan class baru untuk hal yang berbeda. - Pakai ulang class global (
button,container-large) daripada membuat class baru untuk setiap section.
Juga dicari sebagai: generator nama class webflow, class name generator, penamaan class webflow, client-first webflow, konvensi penamaan css, penamaan bem css, contoh nama class css, sistem penamaan webflow.
Tool yang cocok dipakai bersama Generator Nama Class
- SVG ke Webflow — Paste SVG dari Figma dan salin ke Webflow sebagai Custom Elements asli.
- 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.
- Generator Slug — Ubah judul apa pun menjadi slug URL huruf kecil yang bersih, dengan transliterasi aksen, umlaut, dan huruf Sirilik yang tepat, penghapusan kata umum opsional, serta mode massal untuk seluruh daftar.
- Kalkulator clamp() — Masukkan ukuran minimum dan maksimum serta rentang viewport, lalu dapatkan nilai clamp() yang ramah zoom dengan penjelasan perhitungannya, pratinjau langsung, dan skala tipografi atau spasi fluid yang lengkap.
Pertanyaan yang sering diajukan
Apa itu Client-First?
folder_element (misalnya hero_heading), class utilitas global untuk tipografi dan spasi, serta combo class yang diawali is-. Generator ini mengikuti konvensinya, tetapi tidak berafiliasi dengan Finsweet.Sebaiknya pakai Client-First atau BEM di Webflow?
Apakah ini memakai AI?
Bisakah struktur langsung ditempel ke Webflow?
Apa itu class bergaris putus-putus?
button is-secondary.