By including modifiers within a single class name & using the attribute wildcard selector to define said-modifiers, how would it impact performance?

Question

While building an internal design system from scratch, I started conceptualizing an approach for how I'd like to handle the styling of components. Without getting too far into the weeds, I'm simply hoping to use one single class name to refer to the CSS of an individual component and any of it's modifiers. This is easily made possible because of the attribute wildcard selector [class*="hello"].

Just to help illustrate how this would work in practice, think of a typical HTML table as a component. To apply default styling to a table, you'd give it the class name .ds-table. And if you wanted the table to take up the full-width of the screen, you would change the class name to .ds-table__full-width. Need it to scroll horizontally whenever necessary? Change the class name again to .ds-table__full-width__scroll-x. So on and so forth until the table component looks and behaves the way the design system dictates.

While I'm familiar with CSS selector specificity/priority, I'm not exactly sure of what the impact on performance will be. And so I'm hoping to gain some insight from folks much more knowledgeable than myself on the merits of this particular approach. Perhaps pros and cons too?