A utility class is created for a specific combination of CSS properties, which can be applied to elements across the project. Utility classes use dashes ‘-’ only.

Updating a utility class will update all instances in the project that use the utility class. It is ‘global’ by nature.

A global class is intended for use across the entire project. It is a further classification of the purpose of a class. Utility classes & custom classes can be global classes. A global class can use ‘-’ or ‘_’

Updating a utility class will update all instances in the project that use the utility class. It is ‘global’ by nature.

A custom class created for a specific and identifiable component, page, grouping of elements, or single element. Custom classes use an underscore ‘_’ to define the “custom folder name”.

Better for maintaining a project as it’s more flexible to changes. Avoid over-stacking classes and making site-wide mistakes.

A combo class is a variant of a base class. It inherits styles from the base class and adds more styles on top of it. Use the prefix ‘is-’ to define a combo class.

Useful for adding additional styles for a specific instance.

Class names should say what they do.

✅ Give classes meaningful names.

❌ Do not use abreviations.