Hacker News new | ask | show | jobs
by ggregoire 1178 days ago
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.
1 comments
bobthepanda 1178 days ago
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.)

link