Cách dùng Tạo tên class Webflow
- Mô tả section bằng tiếng Anh đơn giản: section là gì (hero, features, pricing, FAQ, footer…) và có những gì bên trong (“tagline, heading, hai nút, ảnh bên phải”, “3 thẻ có icon và link”).
- Chọn quy ước đặt tên: Client-First (hệ thống Webflow của Finsweet), BEM hoặc kebab-case Simple. Cấu trúc sẽ cập nhật ngay khi bạn gõ.
- Nhấn vào bất kỳ class nào trong cây để sao chép, hoặc nhấn Copy all để lấy toàn bộ danh sách. Class có nét đứt là combo class.
- Nhấn Copy structure to Webflow rồi dán vào Designer để có toàn bộ cây element cùng class và kiểu bố cục khởi đầu. Hoặc mở trong công cụ HTML & CSS sang Webflow để chỉnh sửa trước.
Vì sao việc đặt tên class quan trọng trong Webflow
Mỗi class bạn tạo trong Webflow đều xuất hiện trong Style Manager và trong CSS của site. Nếu không có hệ thống, dự án sẽ tích tụ các tên như div-block-47, Heading 3, hero-title và heroTitle nằm lẫn lộn, khó tái sử dụng và rất phiền khi bàn giao. Một quy ước đặt tên giúp class dễ đoán: bất kỳ ai trong nhóm (hoặc khách hàng vài tháng sau) đều biết pricing_plan-name là gì và được dùng ở đâu.
Ba quy ước phổ biến
| Client-First | BEM | Simple | |
|---|---|---|---|
| Khối (section) | section_hero | hero | hero-section |
| Phần tử (element) | hero_heading | hero__heading | hero-heading |
| Biến thể | button is-secondary | hero__button--secondary | button is-secondary |
| Bố cục | padding-global › container-large › padding-section-large | hero__container | container |
Client-First của Finsweet là hệ thống được cộng đồng Webflow sử dụng rộng rãi nhất: dấu gạch dưới tách “thư mục” (component) khỏi element, ví dụ hero_content, hero_image-wrapper. Các class tiện ích lo phần kiểu chữ và khoảng cách (heading-style-h1, text-size-medium), còn combo class bắt đầu bằng is-. BEM (Block, Element, Modifier) là quy ước kinh điển của front-end, rất hợp khi nhóm cũng viết code bên ngoài Webflow. Simple kebab-case phù hợp với các site nhỏ.
Công cụ hiểu được những gì
Công cụ nhận diện các loại section (hero, features, testimonials, pricing, FAQ, stats, logos, team, steps, CTA, navbar, footer và nhiều loại khác), nội dung (tagline, heading, subheading, paragraph, nút, ảnh, video, form, list, badge), các mục lặp kèm số lượng (“3 cards”, “six questions”, “4 stats”) và gợi ý bố cục (“image on the left”, “centered”, “two columns”). Nút dùng class button chung kèm combo is-secondary, đúng cách hầu hết style guide Webflow vẫn làm.
Từ tên class đến một section hoàn chỉnh
Khi bật Starter layout CSS, cấu trúc đi kèm các giá trị mặc định hợp lý: chiều rộng container, padding section, lưới hai cột chuyển thành một cột trên tablet, lưới thẻ xếp chồng trên mobile và kiểu nút. Sao chép vào Webflow là bạn đã có khung hoạt động để thiết kế tiếp. Muốn tinh chỉnh thêm, hãy mở trong HTML & CSS to Webflow, chỉnh code rồi dán lại. Sau đó, hãy chạy Class Name Typo Checker trên trang để bắt lỗi chính tả trước khi ra mắt.
Mẹo đặt tên
- Đặt tên theo mục đích, không theo giao diện:
pricing_planvẫn đúng sau khi redesign, cònblue-boxthì không. - Giữ tiền tố thư mục ngắn và nhất quán (
hero_,pricing_,footer_). - Dùng combo class cho các biến thể của cùng một thứ (
is-featured,is-dark), và tạo class mới cho những thứ khác hẳn. - Tái sử dụng class chung (
button,container-large) thay vì tạo class mới cho từng section.
Cũng được tìm dưới tên: đặt tên class webflow, client-first, quy tắc đặt tên class css, bem naming, cách đặt tên class css, webflow naming system, finsweet client-first, tên class webflow.
Các công cụ dùng kèm tốt với Tạo tên class Webflow
- SVG sang Webflow — Dán SVG từ Figma và sao chép sang Webflow dưới dạng Custom Elements thật.
- Đổi kiểu chữ — Dán văn bản vào và đổi giữa 11 kiểu viết khác nhau, từ Title Case cho tiêu đề đến camelCase và snake_case cho code.
- Tạo slug URL — Chuyển mọi tiêu đề thành slug URL gọn gàng, viết thường, với cách bỏ dấu, chuyển ä/ö/ü và chữ Cyrillic chính xác.
- Máy tính CSS clamp() — Nhập kích thước tối thiểu, tối đa và dải chiều rộng viewport — bạn sẽ nhận được giá trị clamp() thân thiện với phóng to, kèm giải thích công thức, xem trước trực tiếp và thang chữ hoặc thang khoảng cách linh hoạt hoàn chỉnh.
Câu hỏi thường gặp
Client-First là gì?
folder_element (ví dụ hero_heading), các class tiện ích chung cho kiểu chữ và khoảng cách, và combo class bắt đầu bằng is-. Công cụ này tuân theo quy ước của Client-First nhưng không có liên kết chính thức với Finsweet.Nên dùng Client-First hay BEM trong Webflow?
Công cụ có dùng AI không?
Tôi có thể dán cấu trúc thẳng vào Webflow không?
Class có nét đứt là gì?
button is-secondary.