[mcgwiz]

What's always missing from these perennial CSS deep dives is that HTML already gives us a paradigm worth extending: generic constructs, used in domain specific contexts. Generic constructs are those that are devoid of domain specifics and can be used by HTML documents from other domains, e.g. links, paragraphs, buttons, tabs, and modals.

A link can refer to a user profile page or a news article. Both use the generic anchor "component", which comes from the wider universe of components applicable to most/all HTML docs. HTML: `<A class="user">`, CSS selector: `A.user`.

To extend this, a media card could represent a video or a book or a sidebar item. Both use the media card component's HTML structure but can be tweaked visually with CSS. The root element of the video media card would be `<DIV class="MediaCard video">` and would be identified with the selector `DIV.MediaCard.video`.

(PascalCase is arbitrary but I like that it harks to class naming conventions from OOP languages. You'd need some other naming conventions as well. I like `_title` for internal element class names, like private class members from OOP languages. Internal selectors would be built using the performant child combinator. Some of these patterns are more verbose than current alternatives, but it's also the minimum necessary to get crystal clarity around inherited and cascaded values. Preprocessor nesting makes this less painful. And `-highlight` for variants, because they resemble CLI switches. What about non-generic components? Those aren't "components" as defined here - they are simply higher-level HTML fragments, typically organized in source as an HTML template.)

This gives you two dimensions along which to flexibly organize things - the generic forms and the domain-specific applications, and should keep you from slipping down the slope to utility-dominant CSS.