Utility classes
Utility classes are classes always starts with a u and are written with just dashes, not underscore. u-content-constraint , u-heading-32 , u-section-64

Custom classes
Custom classes can be whatever you like. I often use the name of the element, followed by an underscore.
testimonial_wrapper testimonial_portrait-image

These are written with lower case, dashes and underscore. You can create a custom class and then add a utility class on top of that to bring in the styles from the utility class but still have the freedom to change the combination without affecting the utility class.
testimonial_title Heading 24
‍
‍A class should include only the block and the immediate element. For example, if a block .photo contains a caption element which in turn contains a quote element, you should name them .photo_caption and .photo_quote – not .photo_caption_quote. All elements are still tied to the base block name (photo in this case), regardless of nesting level.

This keeps class names from becoming overly verbose and brittle. In short, use a single _ for the element portion and don’t extend it further; if an element itself has sub-parts, consider making that sub-part its own block or just use another element name on the base block.

Example
.table → .table_content → .table_header-row → .table_row → .table-cell → .table-text
‍
‍

Combo classes
I try to follow the Lumos system where it makes sense. You write a custom class first and add a utility class after. The benefit of this is that you can just rename the utility class used as a combo class and all elements whith that combinationa will then change.

So lets say you have hero_title u-heading-64 as a combination. If you later need to change all hero titles size you can just rename the u-heading-64 to for example u-heading-48
Same goes to sections. If you want your section_primary u-section-80 to change to 64px instead, just rename it to u-section-64.

For custom classes I use cc-[custom-text] Example: I want a card_default to have 80px top padding: card_default cc-top-padding-80
Just like a custom class, you can put whatever makes sense to you after the cc-
‍

Modifiers for Variants and States
Define modifier classes (using the -- syntax) for any alternate styles or states that a component might have. For example, .cta--large for a bigger button, .card--highlighted for a highlighted version of a card, or state classes like .is-open, .is-active for interactive states. This helps with scalability because as your design grows, you can handle new variants without altering the base class names. It also plays well with JavaScript – e.g., your script can toggle an .is-active class on a modal to show/hide it.
‍

I use as clear naming as possible. For spacing I the actual px value as name. 24px is named 24. This makes it easy to understand what value to pick and also see in the side panel what value you have chosen. I also don't seperate margin and padding. But Gap is in its own group.