Combo classes

After you’ve applied a class to an element and added styling, sometimes you might want to make a small styling change on one instance of this class without affecting other elements with that class. In such cases, instead of creating a new class and going through the entire process of re-creating the same styles, you can create a combo class, a second class on top of the first one, and apply style overrides to create a unique variation.

In this Lesson

1. ‍Creating a combo class
2. Applying a combo class
3. Overriding styles
4. ‍Editing the base class
5. ‍Creating a combo class vs duplicating a class

Creating a combo class

You can add combo classes to elements by typing in a new class name in the selector right next to the base class. You can access the selector either by:

• Clicking into the selector field, to the right of the existing class
• Hitting CMD + Enter (on Mac) or CTRL + Enter (on Windows)
• Right-clicking the element and clicking Add class in the context menu.

Any subsequent class after the first base class is called a combo class. Since the combo class has only been added to the selected element, any styling changes made to this element will not affect other instances of the base class.

Using an existing class as a combo class

You can also select to use an existing class as a combo class. This new combo class will inherit styles from the global class.

The name you use for a combo class will apply styles to combo classes with the same name.

Need to know
We do not recommend using global classes as combo classes as there can be inheritance issues that can break your design across your project.

Applying a combo class

If you’d like another element to have the same base class and combo class, you can apply these classes one after the other— first apply the base class and then apply the combo class.

Keyboard shortcuts

When typing a class name in the selector field, typing a comma will add that class and allow you to quickly type in the next combo class without having to re-focus the selector field.

Overriding styles

Once you create a combo class, you can add new styles or override styles inherited from the base class. The changes will only affect the combo class.

In the Style Panel, the inherited styles are indicated in orange and overridden or new styles will be indicated in blue.

Editing the base class

When styling an element with a combo class, all style changes only affect the combo class that's because the combo class is a more specific selection. If you wish to style the main, base class, you can access it using the inheritance menu above the selector:

1. Click the inheritance selectors indicator above the selector field
2. Select the base class
3. Make your styling changes
4. Click back above the selector to return to styling the combo class

All changes made to the base class will apply to all elements that have that base class applied, including the selected element with the combo class.

However, some styling changes on the base class might not be visible on the combo class if you’ve already styled that same property on the combo class. That’s because the value will be overwritten by the combo class. These styles are indicated with a red strikethrough.

Creating a combo class vs duplicating a class

Combo classes inherit the styles of a base class. They are a great way to create variations of this base class. But, it's not recommended to create more than one combo class since it gets hard to manage the inheritance of multiple levels of combo classes.

If you see yourself wanting to make even deeper variations it's best to duplicate a class which creates a new separate class with all the stylings of the original class.

Must know
A duplicated class becomes a new class that isn’t connected to the original class. In other words, styles won’t cascade to the duplicated class anymore.