How to Master Classes in Webflow

This video serves as a comprehensive technical guide to mastering classes in Webflow, moving beyond basic definitions to explore the "under the hood" mechanics of CSS styling. It addresses the common confusion surrounding class management by clarifying the precise differences between renaming, duplicating, and layering styles. The content is designed to dismantle misconceptions and provide a robust mental model for how styling rules propagate across a project, empowering designers to build with greater architectural precision and confidence.

The instruction utilizes a practical "outfit" analogy to distinguish between core operations: a base class acts as a reusable outfit, while operations like duplicating create independent clones, and combo classes serve as specific modifications tied to a parent style. The video further delineates the strategic hierarchy between local combo classes and global classes, explaining how to create universal utility styles that function across any element regardless of its existing styling.

Finally, the guide equips viewers with the technical foresight required for advanced implementation and custom coding. It details exactly how Webflow sanitizes class names for the live environment—converting text to lowercase, replacing spaces with hyphens, and stripping special characters to ensure CSS compatibility. By understanding these backend transformations, designers can produce cleaner codebases and seamlessly integrate custom CSS or JavaScript without encountering targeting errors.

• Classes as Reusable Systems: A class functions as a reusable set of CSS rules (an "outfit") applied to HTML elements; modifying a class automatically updates the visual design of every element sharing that label, ensuring global consistency.
• Renaming vs. Duplicating: There is a critical operational difference between renaming, which updates the label for all associated elements without changing the design, and duplicating, which creates a completely independent class that retains the original styles but allows for separate customization.
• Layering with Combo Classes: Combo classes act as specific variations or "accessories" layered on top of a base class (e.g., adding a border), but they remain strictly tied to that specific base class and cannot be reused independently on other elements.
• Universal Styling with Global Classes: In contrast to combo classes, global classes are designed to be applied to any element regardless of its base style, making them ideal for single-property utilities like colors or spacing (e.g., g-background-red).
• Syntax Transformation for Code: When publishing, Webflow automatically transforms class names to meet CSS standards by converting uppercase letters to lowercase, replacing spaces with hyphens, and ignoring special characters or emojis, which is essential knowledge for writing custom code.

• 03:50 – Renaming a class by clicking the small arrow next to the class name or using the shortcut Command/Control + Shift + Enter.
• 05:38 – Duplicating a class by clicking the arrow next to the class name and selecting "duplicate class" to create an independent version.
• 06:53 – Adding a combo class by clicking immediately after the class name in the style panel or using the shortcut Command/Control + Enter.
• 07:49 – Overriding base styles by assigning a specific combo class, such as cc-darker-background, to modify properties like background color.
• 10:07 – Creating a global class by dropping a generic div block and assigning a universal name (e.g., starting with g- or u-).
• 10:16 – defining a global class by styling a single property, such as g-background-red for color or u-border-radius-8 for shape.
• 13:47 – Webflow automatically transforming class names for code by converting uppercase letters to lowercase and turning spaces into hyphens.
• 13:57 – Webflow inserting an underscore automatically if a class name begins with a number.
• 14:06 – Webflow stripping emojis and ignoring special characters or leading hyphens to sanitize class names for CSS compatibility.

Guide: Mastering Webflow Classes – A Step-by-Step Tutorial

Overview: This guide outlines the technical workflow for managing classes in Webflow. It moves from basic operations like renaming and duplicating to advanced architectural concepts like combo classes and global utilities, ensuring your site’s CSS remains clean and scalable.

1. Renaming a Class (Global Updates)

Timestamp: 03:43

How to do it:

• Select the element you want to modify on the canvas.
• Click the small arrow next to the class name in the Style Panel.
• Alternatively, use the shortcut Command/Control + Shift + Enter.
• Type the new name and hit Enter.

Why it’s important: Renaming updates the label for every element in your project that uses this class. It does not create a new style or a copy; it simply refactors the name globally. If you rename hero-section to main-hero, every instance automatically updates, maintaining the same design rules under the new name.

2. Duplicating a Class (Creating Independent Copies)

Timestamp: 05:12

How to do it:

• Select the element with the class you wish to copy.
• Click the small arrow next to the class name in the Style Panel.
• Select "Duplicate Class" from the dropdown menu.
• Webflow will generate a new class with a new name containing all the original styles.

Why it’s important: Duplicating creates a completely independent version of the styles. Unlike renaming, changes made to a duplicated class do not affect the original. This is essential when you need a variation that diverges significantly from the original (e.g., turning a "Vertical Card" into a "Horizontal Card") without breaking the existing design.

3. Adding Combo Classes (Layering Variations)

Timestamp: 06:19

How to do it:

• Select an element that already has a Base Class.
• Click inside the selector field immediately to the right of the existing class name.
• Alternatively, use the shortcut Command/Control + Enter.
• Type a new name (e.g., has-border or darker-background) and hit Enter.
• Apply your specific style overrides (e.g., changing background color).

Why it’s important: Combo classes allow you to "layer" specific modifications on top of a base class, similar to adding an accessory to an outfit. These styles are strictly tied to the base class; a has-border combo class added to a Card cannot be reused on a Button. This keeps your base styles clean while allowing for context-specific overrides.

4. Creating Global Classes (Universal Utilities)

Timestamp: 09:40

How to do it:

• Create a generic div block (often done on a separate Style Guide page).
• Assign a class name that implies universality, typically prefixed with g- or u- (e.g., g-background-red or u-border-radius-8).
• Style only one specific property for that class (e.g., set background color to red).
• You can now apply this class to any element in your project, regardless of its other classes.

Why it’s important: Global classes are "universal utilities" that work on any element, independent of their existing styling. While combo classes are trapped inside their specific base class, global classes allow you to maintain consistency for single properties (like colors, spacing, or typography) across the entire site.

5. Preparing Class Names for Custom Code (Sanitization)

Timestamp: 13:14

How to do it: When writing custom CSS or JavaScript that targets your Webflow classes, you must format the class names exactly as Webflow exports them:

• Lowercase: Convert all uppercase letters to lowercase.
• Hyphens: Replace all spaces with hyphens (e.g., Hero Section becomes hero-section).
• Underscores: If a class starts with a number, add an underscore prefix.
• Strip Specials: Remove emojis and special characters.

Why it’s important: Webflow automatically sanitizes class names upon publishing to ensure they are valid CSS. If you try to target .Hero Section in custom code, it will fail because the browser sees .hero-section. Understanding this transformation prevents breaking changes when integrating external scripts or advanced styling.

Renaming a class updates the label for every element currently using that style, changing the name without altering the design rules for those elements. Duplicating a class creates a completely independent clone of the original styles, allowing you to modify the new version without affecting any elements using the original class.

Use a combo class when you need to layer a specific variation, such as a darker background, onto a single specific base class like a card or button. Use a global class (often prefixed with g- or u-) for universal utility styles, such as padding or colors, that must work on any element regardless of its existing styling.

Webflow automatically sanitizes class names for the published site by converting all uppercase letters to lowercase and replacing spaces with hyphens. Additionally, it strips emojis, ignores special characters, and inserts an underscore if a class name begins with a number to ensure full CSS compatibility.

Renaming a class updates the label for every element currently using that style, changing the name without altering the design rules for those elements. Duplicating a class creates a completely independent clone of the original styles, allowing you to modify the new version without affecting any elements using the original class.