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:

	Variable name on the panel	Actual code generated
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].