Styling in Webflow
Last updated
Last updated
Understanding the concepts below is essential for building and customizing your Webflow projects.
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!
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.
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.
Read more: Naming Custom Attributes
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-.