Contact Us

What are You Looking for?

ByEwan Mak
April 14, 2024

Categories

Use classes to save styling information that applies to as many elements as you want across your site.

Throughout this session, you will discover:

  1. How to form and implement categories
  2. How to adjust categories
  3. How to delete a category
  4. How to replicate a category
  5. How to craft combination categories
  6. How to establish a global category

How to forge and apply categories

At the instant you commence styling an element, a category is spontaneously generated and implemented to the chosen element. All style modifications made on this element are retained in this category.

To initiate a category:

  1. Pick an element on the canvas
  2. Input the Designator field and define your category

That’s it — you’ve formulated a category!

You can also manually initiate a category before integrating styles by typing a category name in the Designator field.

There are 3 methods to reach the Designator field:

  1. Accessing the designator field in the Style Panel
  2. Using Command + Enter (on Mac) or Control + Enter (on Windows) keyboard shortcuts
  3. Right-clicking the element and selecting Insert category in the context menu
Integrate a category swiftly from the context menu or by applying the shortcut keys.

‍

To implement the same category to as many elements as desired: 

  1. Choose the element on the canvas
  2. Type the category name in the Designator field
  3. Hit Enter

As you start typing a category name in the Designator, you can observe the category name emerge in the Designator drop-down list. You can opt for the category by selecting the name or by navigating to it with keyboard arrows and pressing Enter.

How to modify categories

After a category has been established and implemented to various elements, you can alter that category.

To modify a category:

  1. Select any element with that category 
  2. Adjust your styling

Any style modifications will influence all occurrences where that category is employed across the site.

A category is provided a unique name based on the element type, but you have the liberty to rename it.

There are 4 approaches to rename a category:

  1. Double-tap the category name in the Designator, rename it, and press Enter
  2. Press Command + Shift + Enter, rename the category, and press Enter
  3. Right-click the element, opt for Rename category, rename the class, and press Enter
  4. Hover over the category name in the Designator, click the drop-down that emerges, select Rename category, rename the category, press Enter

The new name will be displayed in the Design manager and the Designator in the Style panel.

You can also rename a category in the Design manager.

Top practices for CSS naming:

  1. Category names are case-insensitive (“alert” is equivalent to “ALERT”)
  2. Category names must start with a letter
  3. Category names should utilize an alphanumeric format (a-z and 0-9) and hyphens, and should evade special characters

Pro tip: When naming categories, it’s advisable to apply hyphens as logical grouping separators (tab-menu) and offer categories specific names based on their operation, not their style. Good: form-button. Bad: blue-button.

Unique characters in category names

A unique character is a character that diverges from alphabetic or numeric characters. Punctuation marks and other symbols serve as instances of unique characters.

While you can include most unique characters in a category name (e.g., your category name +), it’s not endorsed because Webflow automatically alters the unique character to a hyphen. 

For instance, a category named your category name + would be treated precisely the same as a category labeled your category name $ because both the + and $ unique characters will be converted to a hyphen: (e.g., your category name –). 

In the cited scenario, any style alterations to the two separate categories utilizing the unique characters would subsequently apply to both.

How to erase a category

If you aspire to apply a different category to an element that already possesses a category, you can eliminate the existing category in 2 manners:

  1. Input the Designator field and press Delete on your keyboard
  2. Hover over the category, tap the downward arrow, and select Remove category

Method for replicating a class

You have the option to replicate and adjust a class without modifying your original class. 

To create a copy of an existing class:

  1. Hover your mouse pointer over the class
  2. Select the downward-facing arrow
  3. Choose Duplicate Class
  4. Give the class a new name and hit Enter

Important: A duplicated class constitutes a fresh class that is independent from the original one — modifications no longer carry over to the duplicated class.

Technique to establish a combo class

Following the application of a class to an element and the addition of styling, you may want to implement a minor styling adjustment on a particular instance of this class while not affecting other elements with the same class. Instead of crafting a new class and replicating the same styles, Webflow facilitates the creation of what we refer to as a combo class, allowing you to introduce style overrides to craft a unique variation.

You can append combo classes to elements by entering a new class name in the Selector field right adjacent to the base class. 

You can access the Selector in 3 different manners:

  1. Selecting the Selector field, located next to the existing class
  2. Pressing Command + Enter (on Mac) or Control + Enter (on Windows)
  3. Right-clicking the element and opting for Add class in the context menu

 

Any class subsequent to the initial base class is recognized as a combo class. As the combo class has solely been added to the chosen element, any style modifications applied to this element will not affect other occurrences of the base class.

Technique for applying a combo class

If you want another element to possess the same base class and combo class, you can apply these classes consecutively — first apply the base class and then apply the combo class.

Keyboard shortcuts: When entering a class name in the Selector field, typing a comma will include that class and enable you to swiftly input the subsequent combo class without needing to refocus on the Selector field.

Approach to overriding styles

Upon generating a combo class, you can introduce new styles or override styles inherited from the base class. The modifications will solely impact the combo class.

Within the Style panel, inherited styles are denoted in orange, while overridden or fresh styles will be highlighted in blue.

Approach to modifying the base class

While styling an element with a combo class, all style adjustments solely affect the combo class because the combo class serves as a more specific selection. When you wish to style the primary, base class, you can access it through the inheritance menu positioned above the selector:

  1. Click on the inheritance selectors indicator above the Selector field
  2. Choose the base class
  3. Implement your styling changes
  4. Hit Back above the Selector to revert to styling the combo class

All alterations made to the base class will be reflected across all elements where that base class is applied, including the chosen element with the combo class.

Hit Back above the selector to switch back to styling the combo class

Certain styling changes to the base class may not be visible on the combo class if you have already styled that same property on the combo class. This is because the value will be overridden by the combo class. These styles are indicated by a red strikethrough.

Manage Your Stylings like a Pro

Combining a class against replicating it offers a more organized approach. A combo class, inheriting the core attributes of a class, serves as a variation while maintaining the base’s styling. However, it’s advisable to refrain from creating multiple combo classes due to the complexity of managing layered inheritances.

When aiming for deeper modifications, duplicating the original class proves to be a more efficient method. This creates a distinct new class with all the characteristics of the original style, allowing for easier adjustments.

Crafting a Universal Class

Global classes offer a versatile style that can be applied to various elements across your website. These classes cater to a broad range of styles and are assigned to base classes. However, the element styled with the global class remains separate from the base class element. For instance, designing a universally applied drop shadow style presents a strategic approach for uniformity.

To implement global class elements effectively, consider creating a dedicated page—such as a Style Guide page—to house all global class elements. Here, you can:

  1. Insert a Section block
  2. Assign it a unique class name (e.g., Supreme glow)
  3. Customize the Section block with desired properties (e.g., recurring drop shadow attributes for site-wide usage)

And voilà! You’ve successfully established a global class applicable in conjunction with other styles.

Remember: Your global class’s name dictates its application to corresponding classes globally.

By layering the global class over other classes, you seamlessly integrate its style properties into diverse class structures.

Optimal Reference:

Ewan Mak
Latest posts by Ewan Mak (see all)

Related Posts

ByEwan Mak
Updated on