Styling in Webflow

Understanding the concepts below is essential for building and customizing your Webflow projects.

Classes of HTML Tags and Webflow Elements

HTML tags are the basic building blocks.

Webflow elements are pre-built elements in Webflow, such as Containers, Grids, and Buttons.

Element Classes

Custom Element Classes (or base classes) allow you to create unique styles for specific elements.

Combo Classes

Combo classes are modifier classes and variations of existing classes. They allowing you to tweak styles for specific instances without creating new element classes. They all start with cc-.

Attributes

Attributes are not "classes" but we can use CSS to style attributes. Attributes allow you to easily apply additional styles and functionality to elements without creating new classes. S2 Attributes help you work faster.

Utility Classes

Utility classes are predefined classes that can apply specific styles or functionality. They help streamline your design process. They all start with u-.

Choosing between Classes, Attributes, and Utility Classes

When to use attributes?

When you want to apply styles or functions to an element in a single location or for a one-time purpose.
When you want to avoid creating a new combo class that would be rarely reused or might create confusion.
When existing combo classes on an element are already complex and potentially confusing.

Focus on your creativity and enjoy Webflow's flexibility. Use attributes that you remember and fully understand. No pressure!

Guide to Making Styling Choices

Here’s our simple approach to help you prioritize your styling decisions:

Use existing Element Classes and Combo Classes from the S2 Framework.
Create and use your classes.
Use the framework's Attributes (S2 Attributes) that you understand and remember.
Use the framework's Utility Classes.

Should I create new Attributes?

Attributes are powerful tools. However, attributes cannot be searched directly in any Webflow panels. When you want to rename something, there is also no way to update all instances quickly.

Attributes can never satisfy all styling needs. Setting up too many attributes that are not carefully planned can also lead to huge confusion easily. We are not here to reinvent CSS or build a CSS utility framework like Tailwind.

Therefore, we recommend following the above Guide to Making Styling Choices and sticking with the framework's official S2 Attributes.

If you really want to create new custom attributes, place them in the 04_custom code embed inside the Global-Code component. Avoid creating too many custom attributes.