In those cases, a modifier must be added to the element instead of the component.<style> .card { } .card__title { } .card__title–big { } /* incremental style changes */ .card__description { } .card__excerpt { } .card__button { }</style><div class="card"> <h1 class="card__title card__title–big"></h1></div>Style elements based on the component modifierIf you are modifying the elements of the same component in the same way, consider adding the modifier to the base of the component and adjusting the styles for each secondary element based on that modifier..This will increase the specificity and make the modification of the component much simpler.<!– GOOD –><style> .card–dark .card__title { } .card–dark .card__description { }</style><div class="card card–dark"> <h1 class="card__title"></h1> <p class="card__description"></p></div><!– BAD –><style> .card__title–dark { } .card__description–dark { }</style><div class="card"> <h1 class="card__title card__title–dark"></h1> <p class="card__description card__description–dark"></p></div>And what about multi-word names?The intentionality when using double low scripts and double hyphens instead of simple to separate the block element modifier is precisely for this..Thus, simple hyphens can be used as word separators..The names of the classes should be easy to read, so the abbreviation is not always desirable unless the abbreviations are universally recognizable.And if after reading everything has not convinced you that this is the easiest way to generate CSS, I leave an article-tutorial that I wrote about SASS..Another way to work with CSS — Although you could actually make a combination of both.CSS evolves, you also shouldIf you keep writing pure CSS you’re wasting your time.medium.com. More details