I mean having to jump between the HTML and multiple CSS files (which often you have to track down by using the browser inspector) to make edits to while styling things. When HTML and styling are tightly coupled anyway and almost always edited together, it just slow everything down for no good reason vs co-locating them together via utility classes.
> The cascading part means you can always add in a file after and overwrite it. I don't see how this would get better without the cascading part.
If you mean overwriting styles set somewhere else, this is what makes CSS confusing and hard to refactor. Cascading is just best avoided whenever you can.
> I am happy to learn new languages if there are clear benefits.
I can recommend looking at Tailwind. Make sure to use it with some kind of templating language e.g. so a "button" component goes in a template file, as that's the way you reuse styling (vs copy/paste) which critics seem to miss. It makes styling much simpler and quicker (everything is co-located, no need to write selectors, no need to make up class names, very concise syntax especially for mobile), especially if you're doing complex responsive designs.
I am editing my CSS files predominantly in the browsers inspector this has the benefit showing you what it looks like directly, potentially even with mobile preview.
I also don't need to hunt down CSS files because I rarely ever got more than 5 css files in projects I authored myself usually more like three: style.css for general stuff, fonts.css for fonts and multiple foo.css for page/section-specific stuff that isn't needed elsewhere thus only one of those is ever loaded.
For most "theming"-like stuff I make extensive use of css variables I want all my things to look like the button? Well just add the same styling with the variables in place.
As for the divide between HTML and CSS: to me HTML is 99% semantic. That means I describe the information as it should be described and the rest is done in CSS. Nowadays I rarely ever feel the need to create useless divs or go back and edit the HTML to fix styling issues thanks to grid layouts.
It wasn't always that way, but thst was to a degree the point of the linked article as well.
> As for the divide between HTML and CSS: to me HTML is 99% semantic. That means I describe the information as it should be described and the rest is done in CSS.
How do you visually group and align elements in designs like this one by only using semantic elements? I agree there's a few things in there that could be ol/ul/li tags but there's a lot of divs that are just flex containers or flex items. I don't see what useful semantics they could all have when they're mostly for cosmetic reasons.
I mean having to jump between the HTML and multiple CSS files (which often you have to track down by using the browser inspector) to make edits to while styling things. When HTML and styling are tightly coupled anyway and almost always edited together, it just slow everything down for no good reason vs co-locating them together via utility classes.
> The cascading part means you can always add in a file after and overwrite it. I don't see how this would get better without the cascading part.
If you mean overwriting styles set somewhere else, this is what makes CSS confusing and hard to refactor. Cascading is just best avoided whenever you can.
> I am happy to learn new languages if there are clear benefits.
I can recommend looking at Tailwind. Make sure to use it with some kind of templating language e.g. so a "button" component goes in a template file, as that's the way you reuse styling (vs copy/paste) which critics seem to miss. It makes styling much simpler and quicker (everything is co-located, no need to write selectors, no need to make up class names, very concise syntax especially for mobile), especially if you're doing complex responsive designs.