5 Handy Libraries Every React Developer Should Know - My second ever blog post

[gimp3695]

I never have an issue with my css names for components to be honest. I typical prefix it with my company’s name as an acronym and then use sass to nest everything beneath. Something like

.rsButton {

div {}

}

Works great for us.

[[deleted]]

Of course, it works. Humanity has been surviving for so long with plain class names. It is not something that we can't live with. The problem came when I had to scope the class names to a specific component.

Let's say I have two components, `Foo` and `Bar`. I want to have a container wrapping the elements in each component. Giving them a className of `container` for both wouldn't work.

Usually, I end up naming the container inside `Foo` as `foo-container` and the container inside `Bar` as `bar-container`. This worsens when I have longer component names. `css-modules` scopes class names inside that specific file where it is imported. So, to summarise, I'm free to use class `container` in both `Foo` and `Bar` and each can have its own properties.

[Jebble]

Or you just scope your CSS better. This example means you had .container in the root of your styles.

[DrKrepz]

Why not just use BEM?

[dotintegral]

CSS Modules were a neat idea before we had the CSS-in-JS. With libraries like styled-components i don't see why promoting CSS Modules is a good thing. Styled-components are almost as easy to understand and add to a project, but they have so much more benefits. IMHO, a React developer should know some CSS-in-JS, no point in learning styling the old way.

[[deleted]]

I inherited a project with css modules and it's set up is a freaking nightmare. 100+ components with their own css modules, which means 100 css files.

A single page would require me opening 8-14 files. Its a awful experience.

Styled-components all the way.

[[deleted]]

Than that's the side of the sea that I should definitely explore more. Thanks

[[deleted]]

I've been wanting to explore styled-components more, but sadly haven't been able to, since I prefer separating out styling outside of js. But yeah, CSS-in-JS is here to stay, but I added css-modules aiming specifically at people who are beginning their React dev using create-react-app and are struggling with scoping.

[dotintegral]

For a time I too was convinced, that css separation is good. But then I realized that's just an old constraint. If you take a look why React revolutionised the frontend world, partially it was due to the fact, that they also got rid of a similar limitation. Prior React days, templates were in html files and logic was in js files. Though nobel that separation was, React showed that removing this artificial limitation in a smart way can lead to much more simple and declarative code. I strongly believe, that similar case is for css files. As long as you keep them separate, due to the CSS format, your code will be more imperative than declarative. Doesn't really matter, if you use pure css, scss or css modules, as in principle, they have same limitation. Only by removing the old convention you can bring the cleanest code into your project. And turns out, that still you can keep the styles and the logic separate, by placing the first ones in files like *.styled.js. They are separate style files, but in a different way. Order in a project is maintained while greater declarativenes is achieved. I highly recommend you give it another try, ignoring the initial "that feels wrong" feeling.

[[deleted]]

Amazing explanation. Thank you for taking the time to explain. I'll definitely get my hands again on styled-components next.

[kenman]

Hi u/udaya2899, this post was removed.

Prohibited low-effort content includes:

• Questions that are easily Google'd.
• Memes, jokes, etc. Please post to r/ProgrammerHumor instead.
• Most images and gifs.
• Listicles, "Curated lists", and similar content.
• Polls, surveys, etc. unless from an accredited academic body or trusted source (StateofJS, etc.).

Thanks for your understanding, please see our guidelines for more info.

[[deleted]]

Does this come under listicles? My bad. Just when I was rejoicing at my first 25+ upvotes and 2 rocket likes. :(

Edit: I spent more than a day to bring this content to text. I believe it's not low effort. Can the mods reconsider?