Cách dùng Kiểm tra lỗi tên class
- Nhập URL của trang đã xuất bản (bạn có thể dùng tên miền staging
.webflow.io) rồi bấm Kiểm tra URL. Hoặc dán HTML, một phần trang, hoặc chỉ cần danh sách tên class. - Nếu muốn, dán thêm CSS để xem các class có trong stylesheet nhưng không có trên trang, và các class không có bất kỳ kiểu nào.
- Chọn quy tắc đặt tên để kiểm tra: Client-First, BEM hoặc không áp dụng.
- Xem lần lượt kết quả. Bấm vào một ô thống kê để chuyển đến danh sách tương ứng, rồi đổi tên hoặc gộp các class trong Style Manager của Webflow. Nếu cần, tải toàn bộ danh sách class dưới dạng CSV.
Vì sao tên class dần bị lộn xộn
Trong một dự án Webflow có nhiều người tham gia và kéo dài vài tháng, tên class sẽ dần rối. Ai đó gõ nhầm hero_heding một lần, Webflow vui vẻ tạo luôn một class mới, và từ đó nửa số tiêu đề dùng cái tên sai chính tả. Các phần tử được kéo từ bảng Add sẽ có tên tự động như div-block-12 hoặc text-block-3. Một designer viết hero-title, người khác viết hero_title. Mỗi lỗi như vậy đều làm tăng CSS thừa, khiến các thay đổi toàn cục bỏ sót phần tử và khiến việc dọn dẹp Style Manager khó hơn.
Công cụ tìm được những gì
| Kiểm tra | Ví dụ |
|---|---|
| Lỗi chính tả có thể có (khoảng cách chỉnh sửa) | is-secondray đứng cạnh is-secondary |
| Trùng lặp số ít/số nhiều | feature-card và feature-cards |
| Cùng từ nhưng khác dấu phân cách hoặc chữ hoa/thường | hero-title, hero_title, heroTitle |
| Tên mặc định chưa đặt của Webflow | div-block-12, link-block-3, heading-7 |
| Lỗi định dạng | Chữ hoa, bắt đầu bằng số, dấu phân cách bị lặp, tên quá dài |
| Quy tắc Client-First | Có hơn một dấu gạch dưới, class is- dùng làm class gốc, class kết hợp thiếu is- |
| Quy tắc BEM | Phần tử lồng nhau như card__body__title |
| CSS so với HTML | Class có trong stylesheet nhưng không có trên trang, hoặc có trên trang nhưng không có kiểu |
Kiểm tra lỗi chính tả được tinh chỉnh để hạn chế báo động sai: các chuỗi đánh số (card-1, card-2, heading-style-h2/h3) và các biến thể kích thước hoặc trạng thái (margin-small/margin-large, is-active/is-inactive) sẽ không bị đánh dấu. Khi hai tên quá giống nhau, công cụ sẽ gợi ý tên được dùng nhiều hơn làm cách viết đúng.
Kiểm tra toàn bộ trang Webflow
CSS đã xuất bản của một trang Webflow chứa mọi class có kiểu trong dự án, nên khi kiểm tra bằng URL, công cụ so sánh trang với toàn bộ danh sách class. Nhờ vậy bạn có thể phát hiện lỗi chính tả ngay cả ở các class dùng trên trang khác. Lưu ý rằng “có trong CSS nhưng không có trên trang này” chỉ có nghĩa là class không được dùng trên trang bạn vừa kiểm tra. Hãy kiểm tra các template chính trước khi xóa bất cứ thứ gì. Các class w- của Webflow sẽ bị bỏ qua.
Sửa lỗi trong Webflow
- Đổi tên một class bằng cách chọn một phần tử đang dùng class đó, rồi nhấp đúp vào class trong ô Selector. Tất cả phần tử dùng class này sẽ được cập nhật.
- Gộp lỗi chính tả vào class đúng bằng cách chọn các phần tử bị lỗi, bỏ class sai và áp dụng class đúng. Sau đó xóa class không dùng nữa bằng Style Manager → Clean up.
- Thống nhất một quy ước cho các section mới. Công cụ tạo tên class sẽ tạo tên Client-First hoặc BEM nhất quán, còn HTML & CSS sang Webflow giúp dán các section đã code kèm class của chúng.
Trước khi ra mắt hoặc bàn giao cho khách, hãy kết hợp công cụ này với SEO Checker, Broken Link Checker và một file README bàn giao.
Cũng được tìm dưới tên: kiểm tra tên class css, lỗi chính tả css class, kiểm tra class webflow, class trùng lặp, client-first checker, class css không dùng, dọn dẹp webflow, div-block webflow.
Các công cụ dùng kèm tốt với Kiểm tra lỗi tên class
- Đổ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.
- So sánh văn bản — Dán bản gốc và bản đã chỉnh sửa để xem các dòng được thêm, xóa và thay đổi song song, kèm các từ chính xác đã đổi được tô sáng trong từng dòng.
- Chuyển hướng WordPress sang Webflow — Chuyển website từ WordPress sang Webflow sẽ thay đổi hầu hết các URL: đường dẫn bài viết có ngày tháng, trang lưu trữ /category/, dấu gạch chéo cuối và slug của trang.
- Cầu nối Clipboard Webflow — Webflow đưa element lên clipboard theo một định dạng đặc biệt không đi qua được giữa các trình duyệt (Firefox → Chrome, Safari → Edge…).