Hacker News Reader

Comment by mimsee | Hacker News Reader

> The biggest one being that you have to jump between files when modifying a single UI.

This is why I still like Vue files over React ones. Vue files can have a <template> tag containing the HTML structure of the component, a <script> tag containing the functionality, and a <style> tag containing the CSS.

View on HN

That's one of the things I like about Svelte and Vue, everything is together in one file. Here's a simple example from the Svelte tutorial: https://svelte.dev/tutorial/numeric-inputs (click the "Show me" button).

Wait until you try styled components

I've used both. I prefer Vue for the continuity between other projects using CSS. Styled components is fine but it adds just a little more friction and ambiguity.

With Vue I know exactly where the CSS goes. With Styled components, Im still in JS land where things can be defined wherever whilly-nilly as a template string; imported, passed around, and manipulated. It's a small thing, but those add up.

Yeah, I don't get styled components, the syntax and organization looks like a mess. I love using Stylus with Vue single-file-components, it lets me use a lot of CSS-specific patterns and macros.

Using Stylus blocks, I like making things responsive just by defining a media query in a block and then doing like:

.container

  flexRowCenter()

    +desktop()

      flexColumnCenter()

Better, but still needs that linking, and you loose your glancable html structure in.

Reply on news.ycombinator.com