[rualca]

> The next step is to move all the UI definition into a single place, i using a single language that abstracts the underlying HTML/CSS/JS files & semantics.

That sounds like a gigantic step backwards, and one which does not follow the example you've mentioned.

The point of Sass was to introduce backwards-incompatible changes to CSS which adds nice human-readable syntactic sugar to CSS. Being turing-complete is besides the point and even it's regular use. In fact, I worked in projects where Sass was introduced just for it's support for nesting and partials alone.

Mixing content and presentation in scripts misses any of the lessons from the last couple of decades. It feels like yet another example of the cargo cult of javascript, where people mindlessly argue that dragging everything into a script solves anything at all.

[mattlondon]

> Mixing content and presentation in scripts misses any of the lessons from the last couple of decades.

Agreed - although this is not a JavaScript thing, but a react thing I think (maybe also Vue? No idea about that). E.g. Angular still has CSS (actually SASS) and HTML in separate dedicated files, and then a another separate file that contains the JavaScript (actually typescript) for the logic itself.

I do not see the benefit at all of putting all these things in one single file, apart from trivial tiny simple things (angular allows you to create single-file components for instance) or for making "To-Do with React" type tutorials look easy. Once you get more than 100-200 lines of code + html + CSS then it is time to separate the files.

[jitl]

I would rather have my files be Page.component, Header.component, Details.component, Article.component than have my three files be Page.html, Page.css, Page.js.

What is the benefit of separating code by file type? If your reasoning is to reduce coupling, I think this is false simplification - again, in complex applications with lots of interaction, there is no escaping the coupling of DOM nodes, JS logic, and styles. Any feature changes change is going to need to modify all three. Maybe for a mostly read-only site de-coupling these things makes sense, and you can achieve your goals with something like Bootstrap, where you compose a bunch of reusable CSS classes. But for the majority of work I’ve done over the last 8 years, that decoupling model doesn’t work. It’s an even harder nest of snakes when you multiply 3 screen sizes x 2 input methods x N pages where CSS could be used - again for something simple, it’s fine to just collapse columns on mobile (the typical CSS column-css-6 style) but frequently you want this stuff to be much more responsive to user device and input than decoupled styles allows.

[rualca]

> I would rather have my files be Page.component, Header.component, Details.component, Article.component than have my three files be Page.html, Page.css, Page.js.

...except that Page.css at most only adds minor tweaks that cascade over the site's styling, and arguably already should be a part of the site's main styling definitions.

> What is the benefit of separating code by file type?

Separation of concerns. This lesson was learned the hard way. Must we keep on relearning it?

> I think this is false simplification - again, in complex applications with lots of interaction, there is no escaping the coupling of DOM nodes, JS logic, and styles.

This assertion is quite wrong and misguided. Styling is a property of a site's visual identity. It is not a property of a component or a specific interaction state. Any well-designed site follows a uniform visual identity which spans over all aspects pertaining to user interactions. Moreover, UI components are also uniform and reused. There is no excuse.

[robertoandred]

React doesn't require mixing styles and content. You can use regular CSS files just fine.

[ratww]

> Mixing content and presentation in scripts misses any of the lessons from the last couple of decades

If you're using React or Vue, chances are your content is coming from JSON in fetch requests, etc, not from the HTML/JSX in your components. In those cases HTML/JSX is the presentation. The content/presentation separation still exists.