Agree. Vue and Svelte get this right as well (assuming you use SFCs properly), except they don't have bizarre preferences for one-way data binding everywhere or typing className instead of class.

Agree with this. Although I’m gonna say it is not the single file per-se which is the winning technology here but the component scoped styles. When writing vanilla web components this can be accomplished with `this.attachShadow()`, and in Stencil you write an external stylesheet and reference it with a `styleUrl` in your `@Component` decorator.

In fact it is kind of nice to put your styles in another file if you have a designer on your team who is afraid to touch any files that don’t have the `.css` extension.

Elm also approaches this way, with type-safe checking.

I still dislike CSS in JS solutions and classname soup.

- A fellow React folk.