I like the idea of using custom elements instead of div with class and being able to gradually enhance it to a Webcomponent if needed.

What I think is a bad practice is the nesting of selectors to avoid classes. This leads to a high specificity and to a tight coupling with the html structure.

A more modern approach to reduce (not avoid) classes is the @scope and @layer rules. They have a hughe potential for designing components in css.