Perhaps I'm just old-fashioned but I prefer semantic classes.
I completely rewrote the CSS for my website and I did not need to touch the templates. An .error is an error and a . collapsible is a collapsible. Their exact style is not dictated by the markup.
I also like that it keeps the markup small and easy to read, because it's not peppered with CSS.
It also avoids situations where two widgets look different because I forgot to copy one class over. A .collapsible is a collapsible.
Semantic classes make sense for small and brochure-style websites. For any moderately complex website or web application, your class semantics quickly become a challenge. Naming things is exceptionally hard, especially when each "component" can have multiple variants each with their own modifier classes e.g. `alert alert-danger alert-with-icon alert-collapsible alert-expandable alert-hidable`. Multiply this by hundreds of components and you find yourself in class soup that's almost indistinguishable from Bootstrap and Tailwind. So I've given up on semantic naming because it's futile for ambitious projects.
Restyling a website without changing any of the markup is a pipe dream from the CSS Zen Garden days when websites were much simpler and more static. Apart from small/personal/static websites, it just never happens in practice today.
If there were more opinionated frameworks actually meant for that kind of restyling, I don't see why it wouldn't work, at least some of the time.
Why do we need all these different classes? One CSS class can handle the presence or absence of a hide button just fine, and lots of frameworks just have .danger set variables or override colors, staying pretty much universal.
I cannot, for professional reasons, point you to any that I have personally worked on. However, Smashing Magazine (https://www.smashingmagazine.com) comes to mind as one of the early adopters of both highly semantic BEM and an SSG methodology.
I completely rewrote the CSS for my website and I did not need to touch the templates. An .error is an error and a . collapsible is a collapsible. Their exact style is not dictated by the markup.
I also like that it keeps the markup small and easy to read, because it's not peppered with CSS.
It also avoids situations where two widgets look different because I forgot to copy one class over. A .collapsible is a collapsible.