Conventions
SML follows a small set of conventions to keep Webflow projects consistent and easy to maintain. These conventions provide a common approach to working with components, classes, and custom styling.
Work with the existing system
Before creating something new, check whether an existing component, property, class, or variable already provides what you need.
- Components provide reusable structure and functionality.
- Properties and variants control available variations.
- Variables manage shared values such as typography, colors, and spacing.
- CSS classes define structural styling and provide additional utilities.
- Custom CSS handles requirements that aren't covered by the framework.
Use what's already available when it fits. When something is missing, extend the system to accommodate the design.
The Components documentation explains how to add new styling properties.
CSS classes and attributes
SML uses a combination of predefined CSS classes and conditional data attributes.
Classes provide the underlying styling. For example:
<div class="row">
<div class="col col-6">
...
</div>
</div>
Here, .row and .col establish the layout structure, while .col-6 defines a specific column width.
Component properties can also apply styling through data attributes.
For example, changing a Row's direction from its default horizontal layout to vertical adds:
<div class="row" data-sml-flex-direction="vertical">
...
</div>
The corresponding CSS applies the selected direction.
By default, SML omits attributes that aren't needed. This keeps the generated HTML clean and makes overrides easier to identify.
See the CSS Classes documentation for an overview of the predefined classes.
Naming conventions
Components
Use descriptive names that communicate a component's purpose.
SML distinguishes between regular components and internal developer helpers:
- __dev — row = a component used to build layouts.
- 🚫 __dev — flex direction = an internal helper used to provide property options.
The 🚫 symbol makes helper components easier to identify in Webflow's Components panel.
When creating site-specific components, use names that describe their function rather than their appearance.
Classes
Use descriptive class names and maintain a consistent naming structure throughout the project.
For custom elements, SML generally follows a component-based naming approach:
.card
.card__image
.card__content
.card__title
Use combo classes for variations of an existing element:
.card
.card .featured
Avoid adding classes for styling already controlled through component properties or variables. Likewise, don't add classes solely to name elements when no styling is required.
Properties
Property names should describe what can be changed.
For example, Layout Desktop, Align, and Justify clearly communicate their purpose without requiring knowledge of the underlying CSS.
Use consistent terminology when extending existing components.
Keep the Navigator readable
A well-structured Navigator makes a project easier to understand and maintain.
Use meaningful names for custom elements and avoid unnecessary wrappers.
A Row or Column should only be added when its layout behavior is needed. For example, two buttons can be placed directly inside a Row without wrapping each button in a Column.
See the Architecture documentation for the layout structure.
Site-specific styling
Not every styling decision belongs in the framework.
Add project-specific CSS to the site-specific styles inside the Global Styles element. Keep these additions separate from SML's existing CSS.
If a styling variation will be used repeatedly, consider exposing it through a component property. For occasional exceptions, a scoped CSS rule may be sufficient.
Keep exceptions intentional
SML provides a foundation, not a rule for every possible situation.
Custom structures, classes, and CSS are perfectly fine when a project requires them. Avoid expanding the framework for variations that are unlikely to be reused.
The goal is a consistent system that remains practical to work with.
