Classes

Naming convention

System.exe uses a consistent naming pattern across all elements. Following it keeps the class panel scannable and the codebase predictable.

Structure

Section wrappers and containers follow a {name}_wrap and {name}_contain pattern based on the section or component name.

Figure 4.1.0 System.exe page structure naming convention.

Base class

The base class identifies the element. Words are separated with an underscore.

Figure 4.1.0 Base class naming convention.

Modifiers

Modifiers use the is-{name} pattern. The is- prefix signals that this class describes a variation of the base class.

Figure 4.1.0 Modifier class naming convention.

Utilities

Utility classes always start with u-. Words within the class name are separated with a dash. If you're familiar with Tailwind CSS, they work similarly, each one applies a single CSS property to an element. Instead of writing custom CSS for common properties, apply them directly in the Webflow style selector panel.

To prevent any overwriting issue, utility classes should always be used on top of a base class and/or modifier, never on their own.

Figure 4.1.0 Utility classes naming convention.

This keeps styles scoped to the element and prevents Webflow from overwriting the utility styles across other instances.

Class order

When combining classes, follow this order: base class, modifier, utility.

Javascript Hooks

Use data attributes as JavaScript hooks, not classes. Classes are for styling only. Data attributes can carry values and clearly signal that an element is targeted by a script.

Figure 4.1.0 Javascript hook example