Modified from Whiteboard.is conventions

Use Title Case for Naming

We use title case for our naming our CSS classes in Webflow - capitalize each word with spaces in between words. In other words, we use Section Header rather than section-header

Here are a few more example class names:

• Section Header Component
• Container
• Side by Side Component
• Profile Card Component
• FAQ Item Trigger

Using title case makes our classes very user friendly. They’re a lot easier to read in the designer and more understandable for our non-developer clients.

Webflow automatically generates CSS from the class names we create by converting our class names to lowercase and replacing spaces with hyphens. For example, FAQ Item Trigger becomes faq-item-trigger allowing us to use .faq-item-trigger in any custom code.

If a classname starts with a number, Webflow will add an underscore to the beginning of the generated classname. For example, 3 Column Grid becomes _3-column-grid

Be Component-Focused

Our development style focuses on modular, component-based building. A component is a standalone, reusable group of elements that you can copy and paste onto another page without it losing its functionality.

Examples:

• FAQ List Component (commonly a Collection List Wrapper)
• Header Component
• Side-by-side Content Component

We focus on components because, in Webflow, it makes it easy to use copy-and-paste to add to an existing page or create whole new pages in the Designer.

To help identify components, we can use the following three types of classes:

• Component Level Class: Includes a clear name followed by the word “Component”. Example: Newsletter CTA Component‍
• Component Element Class: Includes the component name followed by a clear name describing the element. Example:  Newsletter CTA Heading‍
• Component Modifier Classes: Includes the component name followed by a clear name describing the alternate version: Example:  Newsletter CTA   Gradient Background

Example: FAQ List Component

Let’s take our FAQ list as an example. The outermost HTML element that we can copy and paste should be given the suffix Component and named something that clearly describes what the component is. So, we could use: FAQ List Component. Then, elements inside of the component should reference what component it is inside of. So, the class structure could look like:

• FAQ List Component
• FAQ List Item
• FAQ List Item Trigger
• FAQ List Item Pane

Utility Classes

Utility classes are global classes that can be used independently or to make slight tweaks to existing classes. For example, let’s say that our Button class has 16px of top margin, but there’s one instance where it needs to have 24px of top margin. We can quickly make this change by adding the Margin Top 24 utility class as a combo class to Button.

In general, utility classes should only be used one layer deep. If you need to add two utility classes to achieve the desired result, that’s an indicator that you should go ahead and create a custom class.

Modified from Whiteboard.is conventions

Use Title Case for Naming

We use title case for our naming our CSS classes in Webflow - capitalize each word with spaces in between words. In other words, we use Section Header rather than section-header

Here are a few more example class names:

• Section Header Component
• Container
• Side by Side Component
• Profile Card Component
• FAQ Item Trigger

Using title case makes our classes very user friendly. They’re a lot easier to read in the designer and more understandable for our non-developer clients.

Webflow automatically generates CSS from the class names we create by converting our class names to lowercase and replacing spaces with hyphens. For example, FAQ Item Trigger becomes faq-item-trigger allowing us to use .faq-item-trigger in any custom code.

If a classname starts with a number, Webflow will add an underscore to the beginning of the generated classname. For example, 3 Column Grid becomes _3-column-grid

Be Component-Focused

Our development style focuses on modular, component-based building. A component is a standalone, reusable group of elements that you can copy and paste onto another page without it losing its functionality.

Examples:

• FAQ List Component (commonly a Collection List Wrapper)
• Header Component
• Side-by-side Content Component

We focus on components because, in Webflow, it makes it easy to use copy-and-paste to add to an existing page or create whole new pages in the Designer.

To help identify components, we can use the following three types of classes:

• Component Level Class: Includes a clear name followed by the word “Component”. Example: Newsletter CTA Component‍
• Component Element Class: Includes the component name followed by a clear name describing the element. Example:  Newsletter CTA Heading‍
• Component Modifier Classes: Includes the component name followed by a clear name describing the alternate version: Example:  Newsletter CTA   Gradient Background

Example: FAQ List Component

Let’s take our FAQ list as an example. The outermost HTML element that we can copy and paste should be given the suffix Component and named something that clearly describes what the component is. So, we could use: FAQ List Component. Then, elements inside of the component should reference what component it is inside of. So, the class structure could look like:

• FAQ List Component
• FAQ List Item
• FAQ List Item Trigger
• FAQ List Item Pane

Utility Classes

Utility classes are global classes that can be used independently or to make slight tweaks to existing classes. For example, let’s say that our Button class has 16px of top margin, but there’s one instance where it needs to have 24px of top margin. We can quickly make this change by adding the Margin Top 24 utility class as a combo class to Button.

In general, utility classes should only be used one layer deep. If you need to add two utility classes to achieve the desired result, that’s an indicator that you should go ahead and create a custom class.

More Resources

Webflow University. Webflow's bank of resources – lots of good and helpful resources for learning how to build in Webflow!