As a designer, the only thing that's important for me in managing CSS is isolation of styles. I apply a reset at the top to make everything as minimal as possible and then apply styling to each element and the naming convention would be such that it applies pretty much only to that element (or only that and its children if I'm being lazy).
If the markup changes, the CSS changes. The nested SCSS should closely mirror the DOM.
I can only imagine utility classes will simply create many problems with naming down the road. I would hate to have to deal with all that.
Yes and if anything I think I spoke too strongly. I do use classes that encompass a broader pattern, but they definitely don't go as far as "text-right", but perhaps something like, "card" for card based layouts.
I think one of the major advantages of Web Components is that styles can be isolated without the need for name-spacing. There is no need to carefully structure CSS according to the DOM, because this isolation is included with the shadow DOM. Incorporating CSS grid takes this even further, allowing these isolated designs to be responsive to the layout without needing to know what it is.
Absolutely agree. My only gripe is that consuming a blackbox (ie third party) Web Component inside a Web Component can get problematic. Your options become create a global override system or (shudder) Shadow DOM piercing.
If the markup changes, the CSS changes. The nested SCSS should closely mirror the DOM.
I can only imagine utility classes will simply create many problems with naming down the road. I would hate to have to deal with all that.