Hacker News Reader

Comment by digdugdirk | Hacker News Reader

I'm a non-programmer, and recently I've been trying to turn a bunch of various time-saving scripts I've created over the years into a vaguely cohesive GUI. I figured aiming for a modern web gui framework (run locally) would be the way to go.

This comment encapsulates the experience so, so well. I have no idea what is going on, everyone tends to have a very strong opinion on which way to go, but no one can provide an explanation of the baby steps in how to get started. Or even why to get started. It's maddening.

View on HN

From that list you only need React and a bundler, which can be Vite. You really don't need more than that to get started. Please ask, I'll do my best to help you out.

What do you need for keeping CSS scoped to React components?

Solution 1: You can give a classname to your component and prefix every CSS rule with this classname. e.g. <CustomSelect>, which translates to <div className="custom-select">, which you can style by prefixing every rule with .custom-select. You put that in the index.css inside your folder CustomSelect to be easily editable when you need it.

Solution 2: Otherwise you could try to use CSS modules (Vite supports them out-of-the-box I think).

Solution 3: Otherwise you could try one of the many "CSS-in-JS" libraries like styled-components.

Personally I'm using the solution 1, did for more than a decade, works fine, scales well, nothing to install and learn, just old straightforward CSS.

In practice, I find keeping your CSS separate from the JSX tends to be cleanest (your solution 1).

Separation of concerns with what are essentially totally different markup languages is best when you can. We tolerate it with JSX because there isn't a fantastic first-class declarative way to express an object, a list of objects, or filtering in HTML. (I have seen WebComponents and the MDN tutorial seemed like taking a step back.)

styled-components

Personally I suck at CSS and avoid writing it like the plague, even after 20+ years of doing it.

I use TailwindCSS [1] for all my styling needs and couldn't be happier.

If you really want scoped CSS in React this approach [2] can also work, and it makes it easy to use tailwind if you want.

[1] https://tailwindcss.com

[2] https://miyauchi.dev/posts/lib-vite-tailwindcss/#css-modules

If you are non-programmer, then you need to stay away from whatever bleeding edge tech HN and Reddit raves about.

Instead pick a stable tech. In js framework land, no tech is stable. But relatively speaking, react, Vue and Angular are more stable and popular. Among these Vue is more newbie friendly than others.

So, I would start with Vue. Checkout laracasts course on vue 3 to get started.

I'm not particularly fond of Vue for my own use but pretty much every trade-off it makes that annoys -me- is one that also makes things easier to get started with.

So since the person we're making suggestions to is (so far as I'm aware, and I'm pretty sure I remembered my dried frog pills today) very definitely -not- me, I think I agree entirely with Vue as a starting point.

Reply on news.ycombinator.com