RSCSS seems like a good approach for class names.
It seems there are 2 things in play:
- class names – as you mentioned, these make sense to describe where they are used, and will likely be unique. i.e. there is only one "notes-list" or whatnot.
- css variables - these are a set of common "roots" for the styles so that a user / theme maker can quickly change a color or font and it will affect the entire design.
There seems to be missing the 3rd piece, which ends up being helpful in consistent in design, which is common classes. I.e. a "panel" might have a set margin / padding + background color + border. Or a "headline" which is specific color + font + size.
These "rolled up" styles can be defined in (at least) 2 places - they can either be defined as classes, so a specific element might be .notes-list.panel in the HTML (or even #notes-list.panel since the first is unique). Or, it can be .notes-list in the html and then the rolled-up styles are included in the stylesheet. (If something like SASS is used, this can be "extends").
My preferences is on the former where the common classes are included in the HTML and we maintain a small design system style guide that defines and shows these so developers can easily include cut / paste.
Even better – in another project we actually make all of these sub-elements into their own components, so the developer includes a "headline" component and just provides the string as an attribute. In practice this means that the designer creates all the components in code, and the developer just connects "lego blocks" for layout. This is the https://storybook.js.org approach.
And, since the component will have a name "notes-list", even if it includes common things like a panel and headline, it can easily be overwritten since when it is compiled, the sub-components expose their HTML classes in a predictable way.