[blinky1456]

So if you have a large number of buttons or other elements with the same class you will be repeating yourself over and over.

With elements with a large number of style rules, you add a lot of very long lines to your html.

This would be a nightmare to work on/maintain.

[lmm]

> 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.

[icebraining]

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.

[lmm]

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.

[codeaken]

You can use components for this scenario https://tailwindcss.com/docs/extracting-components

[thrower123]

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.