[skgough]

Can you talk about why separation of concerns is useful? I like it too, but I have a hard time trying to articulate why I prefer it over keeping everything in the same file. I've started working in a project that uses react and tailwind, and I've gotten pretty comfortable, but (ideological purity aside) it just isn't very enjoyable to use.

[imiric]

It's the contextual clarity for me. If I want to change the content, I can keep a specific syntax in mind and focus only on that. Same for JavaScript and CSS. I don't have to think about all of these things at once, but only at the boundaries where they interact with each other. Every component has a separate responsibility and they're composed in a specific way, but keeping them separate allows you to reason about them easier. This is similar to the Single Responsibility Principle.

Specialization is another aspect. Take this example from the mizu docs:

  <div %http="https://example.com">
 

That is supposed to make a `fetch()` call. OK, great, so how do I make a POST request? Oh, with a `.post` "modifier". OK, great, so how do I specify the body? Oh, with a `%body` directive. OK, great, but what if I want to use a different encoding than the ones provided by the library? How about binary data? How about sending a specific header based on a condition, or interpreting the response in a specific way?

There are thousands of these questions and possible limitations and pitfalls that just wouldn't exist if the library didn't try to reinvent JavaScript in HTML. Just use the right tool for the job that is already specialized for what you're trying to do, and your task will be much easier.

BTW, I don't mind having components that contain JS, CSS and HTML in the same file. Svelte does this and I enjoyed using it. My problem is when these are mixed, or when CSS is entirely abandoned in favor of thousands of micro utility classes like Tailwind does.