The separation of concern that actually makes sense, and on which we ended up, is structured data (JSON) piped into a presentation layer (SPA lib like React). That's what XML tried to do before it became gimped as HTML.
If you look at other document writing system such as LaTeX. You will see that there are Sections, SubSections etc.
The link to the CSS simply told the browser how these should be presented. LaTeX has something similar as you can create a document class and Word has different styles you can import.
Having a concept of a document structure with a set of styles attached which you can change easily is a good idea.
The HTML document should make sense without a style sheet and if you write/generate semantic markup it does work properly.
I disagree. Unlike JSON which is truly presentation agnostic, the position of the HTML elements always did affect the layout and some designs were pretty much impossible to achieve without having to move HTML elements around. Despite the popular claim to the contrary, HTML was always part of the presentation layer.
The results you see on CSS Zen Garden show that this is not true at all. It was hard, but not impossible then and nowadays grid layout and CSS3 fixed a lot of the issues.
Oh great let me get right on that. Wait, no, I have far more important things to do with my time.
Have you deliberately ignored the rest of the sentence? CSS3 and display grid solved a lot of the issues. It is supported by any modern browser.
Leveraging grid layout makes for a complete separation of concerns and still keep semantic markup without any hacks that only add to the amount of work. Take just a couple of hours of your very important time to learn it, and you might see the payoff.
Also, just anecdotal: I am working on a Vue.js component which I want people to customize the styling however they want. This is forcing me to drop the CSS part of the components. I am not adding any cruft HTML and yet I did manage to get a "basic" theme and a good chunk of the "materialize" look already. Two themes, two separate SASS projects. It can be done.
You are complaining about the wrong thing.
> Despite the popular claim to the contrary, HTML was always part of the presentation layer.
Not at all. It is document format. Designs that do not respect that doesn't change it's intrinsic nature.
This is like complaining that a shoe isn't a very good mallet.
That's not entirely true. Even ignoring the elements that were explicitly about formatting and have since been deprecated, the order and nesting of elements could have a profound effect.
For example, the entire model for how to do layout using CSS floats fundamentally depended on the order of elements in the source HTML document. It wasn't until much later that CSS finally added tools like flexbox and grid where you could explicitly reorder the content from multiple source elements in the rendered output using CSS alone.
Even today, certain effects such as column-based formatting for a table are much easier to specify in CSS if your HTML has additional elements such as <colgroup> included, yet there is little reason to include such elements in the markup except to support that kind of formatting.
Yes a table will need to have the correct elements in the right order. This isn’t presentational it is semantic.
HTML5 does this better than HTML 4 as it has more semantic elements as a response to the more complicated layouts of modern web pages.