How to organize and clean up CSS classes

In TeleportHQ, you organize CSS classes in the Classes tab of the Design Language panel. Group classes into categories, search and filter the list, and use More options (⋯) to delete every unused class or empty category at once. Be careful when deleting a class that's in use: its styles are removed from the elements that used it.

Before you start#

• You need a role that can change CSS classes.
• To open the tab, press Esc so no element is selected, then click Classes at the top of the right panel.

The Classes tab at a glance#

1. Search finds classes by name.
2. The filter button (a funnel) shows only some kinds of classes.
3. More options (⋯) deletes unused classes or empty categories in bulk.
4. Add new category creates a category, below the list of categories.

Classes are listed by category. Click a category's name to open or close it.

Find a class#

• Search: type in the Search box. It matches class names and combinators, in capital or small letters. Categories without a match are hidden. If a category is closed, click its name to open it.
• Filter: click the filter button and choose Design system classes or Default classes. Active filters show under the search box; click Clear all to remove them.
• Unused classes show an info icon with the tooltip "This class is unused in the project".
• By name, from anywhere: press Ctrl+P (Cmd+P on a Mac), type part of the class name and pick the result labelled Class.

Group classes into categories#

1. Create a category#

1. Below the categories, click the field Add new category.
2. Type a name, for example Cards.
3. Press Enter, or click +.

2. Move a class into a category#

1. Right-click the class.
2. Click Move to Category, then click the category, for example Cards.

The class's combinators move with it. To move a class back to Uncategorized, open it and pick Uncategorized in the Category list of the Edit class panel.

3. Manage a category#

Right-click the category name, or point at it and click ⋯ (tooltip Options):

• Rename: type a new name.
• Mark All as Design System Classes / Unmark All as Design System Classes.
• Delete Category: deletes the category only. Its classes move to Uncategorized.
• Delete with Classes: deletes the category and its classes. A window titled Delete project category- and the category's name asks you to confirm. Classes that no element uses go at once. For each class that elements still use, a second window, Delete project class- and the class's name, says how many elements use it: Delete removes it from those elements and deletes it, Cancel keeps it, under Uncategorized.

Delete unused classes and empty categories#

1. At the top of the Classes tab, click ⋯ (tooltip More options).
2. Click Delete all unused classes.
3. In the Delete Unused CSS Classes window ("Are you sure you want to delete 12 unused classes?"), click Delete.

A message shows, for example, "Deleted 12 unused classes", or "No unused classes found". Default classes and classes that elements use are never deleted this way.

A class counts as unused when no element in the project has it. A class that only your own code uses, for example the HTML in a Code Embed, also counts as unused and would be deleted.

To remove categories that have no classes, click ⋯ and choose Delete all empty categories.

Delete one class#

1. Right-click the class.
2. Click Delete.
3. If elements use the class, the Delete project class- window shows how many are bound to it, for example "3 node/s bound to the project class." Click Delete to confirm. A class that no element uses is deleted right away.

Deleting a class also deletes its combinators. To bring a deleted class back, click Undo right away, before you reload the project. See How to undo and redo changes.

Check that it worked#

The deleted classes no longer appear in the list, and each class shows under the category you chose.

Troubleshooting#

Delete is greyed out Default classes, such as button or thq-heading-1, can't be deleted. Delete Category and Delete with Classes are also disabled for Teleport Default Classes ("Cannot delete Default classes").

"Your current role does not have permission to delete classes" Ask a workspace admin for a role that can change CSS classes. See What can each role do?.

The category I want isn't in Move to Category The menu lists only your other categories, not Uncategorized or the class's own category. Use the Category list in the Edit class panel.

My category name was cut short Category names are limited to 30 characters. If the name is taken, TeleportHQ adds a number to it.

Good to know#

• Design system classes are classes you mark as shared across pages or components. Right-click a class and choose Mark as Design System Class. Use the Design system classes filter to list them.
• Categories only organize classes in the editor. They have no effect on your exported code.
• Unused classes are left out of exported code automatically. To include them, click the Project settings cog at the bottom of the left sidebar, then Editor → Preferences → Editing, and under Export and AI turn on Export unused classes.
• The number of elements in the delete window can be lower than the real number. The class is still removed from every element that uses it.
• Uncategorized holds classes that aren't in a category.