The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
 
This video features an old UI. Updated version coming soon!

The Style Manager displays a complete list of classes, combo classes, and tags you've created or edited in your project. Here, you can rename styles and delete any styles that aren’t being used anymore.

Accessing the Style Manager

The Style Manager, located in the right panel, can be accessed by clicking on the Style Manager icon or pressing G on your keyboard.

Anatomy of the Style Manager

When you create a new class or style a tag, it appears in the Style Manager in the order it was created. Here, you can rename the class or clean up any unused classes as indicated in the top right.

Tags

All the tags (pink) you've styled will appear at the very top.

Learn more: Tags

Classes

All the classes appear in blue below the tags in the order they were created.

Learn more: Classes

Combo classes

All combo classes appear in blue and are nested under each class with an icon to their left.

Learn more: Combo classes

Nested tags

All nested tags appear in pink and are nested under each class with an arrow icon to their left.

Learn more: Nested classes

Edit wrench

To rename classes or combo classes, click the wrench icon. Once you’ve renamed the class, click the check icon or press enter to save the new name. To discard the changes, click the x.

Clean up

To view and delete any classes that are not associated with any page elements, select clean up in the top right. Make sure you confirm the deletion of classes by clicking remove. To abort, click cancel.

Renaming classes

To rename classes and combo classes in the Style Manager, click the wrench icon, rename the class, and press enter.

 


You can rename classes in the Style panel. To do so, double-click the class name in the selector field and enter the new class name. The new name will then be reflected in the Style Manager.

Deleting classes

Removing a class from an element will not remove the class from the Style Manager or project. That’s because a class can be reused for styling other elements at any time, regardless of whether it is currently applied to an element. Classes can be fully removed from the Style Manager and project only when they aren’t connected to an element.

Cleaning up all unused styles

You may quickly delete all classes that aren’t used by any element in the project by selecting clean up at the top of the Style Manager.

 

Deleting any unused styles will help improve your website's performance as unused styles add weight to your website’s code.