When Windows Presentation Foundation split layout, styling, and logic into three separate sets of files, it was a huge win for maintainability. I had my share of complaints about WPF, but it was never that. It was mostly that I wished the rules for how they interacted with each other were easier to understand.

I feel the same way about html/css/jss. It's not the fundamental triumvirate that bothers me. And I'm fine with their respective syntaxes. My problem is that the semantics of the whole system is an ever-growing Gordian knot of accidental complexity.

But that problem is very nearly unfixable, so I can't really blame anyone for tinkering with more superficial things instead.

It isn't really the fact that it is all in one file that is the problem for maintainability, imo, it is that all (html, js. css) are incorporated together into a single unit, with no way of breaking it up.

Vue puts html, js, and css into the same file with their .vue files, and it works great, because they keep those things separate _within_ the file. Also, there is the ability to load each section from a separate file, as well, which works flawlessly.

That shipped has sailed long ago. I don't disagree, and I really don't want to work with any technology that mixes HTML and JavaScript, but that's not really how modern web frameworks view the world.

I agree, in fact I wish there was one more layer that separated layout from styling. Keep padding, but tear out flex box, grid, margin, etc and have a VFL like language instead.

Too be fair flex box and grid are pretty good. I just wish I didn't have to sometimes skim through huge CSS or SASS files to make layout changes.

I'm not sure, I think the idea of scoping HTML/CSS/JS at the same level is good for development. At least when you think in terms of "components", it's easy to see why you would want content, styling and behaviour together. Keeping things local makes everything easier in my experience.

HTML also has that weird position where you have things like <video> or forms, which are not really content but entire components, but still lacks lots of things people expect from a component library.

Having them separate is not necessarily a good thing. Svelte for one collects all the HTML, JS and CSS that you need for a given component into a single file (that uses the original syntax for each language). You can still draw in code from external files, but otherwise your component is just 1 file to take care of. Components are largely isolated from each other so the `.foobar` class used in one component does not affect the `.foobar` used in another.

It maybe just that I am a millennial and lack experience, but for me component based approach is much better than all 3 in separate file, for both maintainability and code reuse.

Nazca's include mechanism allows you to separate your code in whatever way you find appropriate.

Except that in a lot of modern frameworks that separation has gone away - look at React components where the markup and styles usually live together.