I've been saying for years that, in these days where all HTML is generated, CSS makes no sense and we might as well just style inline. You probably already have a "button" class in your UI framework that contains the HTML for rendering a button; put the styling there too.
> So if you have a large number of buttons or other elements with the same class you will be repeating yourself over and over.
In the HTML, sure. But so what? It gets compressed in transport so there won't be significant overhead there (similar to how remote desktop protocols that send images with compression turn out to be just as efficient as those that tried to send intelligent drawing commands), and the browser has to compute the final style for each element anyway so there's no overhead in-memory either.
> This would be a nightmare to work on/maintain.
HTML is an output format, you don't edit/maintain HTML any more than you edit/maintain binary machine code. And keeping the styles inline allows better encapsulation: the styling for each component lives in that component, you don't have the spooky action at a distance of child selectors.
What frameworks treat HTML as an output format, and what is the input? When I see samples of React code, all the HTML (in the form of JSX) is still handwritten, just combined dynamically.
Sure - you write the html snippets by hand (and those are still very maintainable if you use inline styles). But you don't maintain the final page that might have e.g. twenty buttons, so that's not a case to optimise for.
CSS sucks because it lets you reuse code to a very small degree, but doesn't go very far. Less or sass seem much betters, if for no other reason than referencing common behavior.
