Webflow class naming: Client-First, BEM, or hybrid?
Pick a scalable Webflow naming strategy your team can search, extend, and hand off—without turning the Style Manager into chaos.
By the Faizatech team Published 1 min read
Why naming matters
Webflow’s power is also its risk: without conventions, classes multiply and refactors become scary. A shared system keeps build velocity high.
Popular approaches
- Client-First emphasizes utility-style readability and consistent spacing scales.
- BEM emphasizes component blocks and modifiers—great for teams with strong engineering habits.
- Hybrid often works for agencies shipping many sites with shared internal tokens.
Rules that help every system
- One source of truth for spacing and type scales (variables).
- Avoid duplicate utilities that mean the same thing (“padding-large” vs “p-xl”).
- Document exceptions—when and why to break the rule.
Handoff to editors
Editors should not need to understand every class—expose safe controls via component properties.
Takeaway: pick a system the whole team will actually maintain; the best naming convention is the one you enforce consistently.