[h4x0rr]

Yeah let's do that. You have everything related to your component on place instead of jumping between files.

[paradox460]

Vue, Svelte, and Surface manage to do this without forcing you to inline all your styles

[Kiro]

Jumping up and down in the file is not much better and you still need to come up with names for classes. I want to look at an element and immediately know how it's styled.

[h4x0rr]

I worked with both. Scoped styles are nice. Tailwind is better - no naming of every element, no mental tax of jumping around in the file -

[zelphirkalt]

What stops you from doing the same thing in CSS? It is trivial to assign a specific CSS class to an element that is the root node of a "component" and scope rules under that.

[lawn]

Is jumping between files supposed to be difficult or something?

[chrisweekly]

Colocation is a useful principle in component-based architecture.

[afiori]

Without a lot of discipline it is very easy to end up with a css with lots of unclear and hard to guess effects. Eg consider the case of <A type=1><B><A type=2></A></B></A> where A and B are complex templates. Any selector with the " " operator on A risk expanding to the inner A even if it was intended only for the outer. Similarly a :has selector might catch a descendant of the wrong element.

@scope fixes a lot of this, but it is a complex problem. With tailwind you mostly have to worry about inheritance

[mattacular]

I find it to be more difficult. Especially if I can't pane the files in view comfortably (ie. beyond 2 or 3 it gets significantly harder to work across them).

Some frameworks or coding styles really lean into having lots of tiny files. That necessitates a more complicated directory structure for the project. Locating files eventually tends to requires search capability rather than being able to look through the tree in a sidebar.

None of this is "hard" per se but I find the opposite is nicer to work with typically.

[onion2k]

Yes.

The problem is that the styles for something can be defined in multiple places, and that makes it hard. Especially with CSS and (potentially) having specificity issues if things aren't managed well. Having them as a part of the component means that problem goes away.

[ewuhic]

Is staying in one file supposed to be difficult or something?

[dbbk]

You can literally command click a class to go into a styled components css file. I do not understand what the big issue is.

[runarberg]

Also modern CSS is often written in a <style> tag either in a native web component or in a framework which supports single file component like vue or svelte.