With SCSS/SASS one would use @extend and then call the other CSS class.

Example:

• I want to create a new class for let's say “chat-bubbles”

  • These "chat-bubbles" should have a shadow.

    • But I already have created a consistent shadow class that I use all over the site "shadow-small"

      • So I want to inherit/cross-reference the shadow from the existing class “shadow-small” instead of recreating and updating the box shadow manually in "chat-bubbles".

        • In the end, I just add the class "chat-bubbles" to my element and the shadow comes with it, without having to add "shadow-small" to the element as well.

✅ Meaning, I only want to apply one single class to each chat bubble element: chat-bubbles

❌ I don’t want to apply two classes to each element: chat-bubbles AND shadow-small

Why? This is the best type of architecture for maintaining and updating a consistent design system.

That's why SCSS/SASS allow this in the first place.