Other Naming Strategies
Naming Variables
Use full words and standard English for variable names.
Avoid lengthy names. Other than normal hyphens and spaces, avoid using underscores and other unnecessary punctuations in variable names.
Compare:
Good ✅
Padding/Tablet Small
var(--padding--tablet-small)
Bad ❌
Component - Card/Card Body Padding [LG]
var(--component-card--card-body-padding-lg)
We aim for clear and simple names that are easy to search for in the Webflow panel. They should also be easy to type when coding.
Naming Components
While it is flexible, we recommend naming Webflow components using natural and concise English titles with title capitalization; keep names short and make your components easily searchable and identifiable. Organize your components into folders. Examples:
Blog Card
Latest Status Block
CTA: Subscribe
CTA: Enquiry
Some components are meant to be nested within another component. In that case, you can add a "- " before the name to make them easily identifiable and prevent them from appearing at the top when using Quick Find. Examples:
Subscription Section
- Simple Subscription Form
About title capitalization: Capitalization in Titles: Rules and Examples
Naming Webflow Interactions
Suggested format: Name of element + [State: Optional description of action]
The naming convention for Webflow Interactions is the same as that suggested by Client-First. You should also keep the names short and descriptive, for example:
Section Image [Fade in]
Box Icon [Open]
Box Icon [Close]
Box Icon [Open: Rotate]
Box Icon [Close: Back to 0]
"While scrolling" and "Mouse move" animations don't typically change to a specific state, so you can get more descriptive with them, e.g. Profile Cards [Floating effect].
Last updated