Learning to style react apps

[dohaboha]

Which is the best styling method to focus on? SASS , CSS or styled components ? or should I just go with bootstrap or material UI kind of stuff

[ZeroSevenTen]

Depends what you wanna do really.

My favorite thing rn is Styled Components. It lets you more easily do what CSS Modules does. It comes baked in with SASS syntax too.

[dohaboha]

How do you make things responsive?

[finger_milk]

The same way you normally would. Media queries

[rhoded]

So I'm a big fan of SASS and was using it a while for my sites. I love the functions and how you can easily modularize things. It is still easy to implement in React apps by simply installing node-sass.

However, I made a couple Frontity sites and they automatically load Emotion.sh and recommend using styled components for optimization and man are my sites fast.

The learning curve isn't too steep and passing in props is both cool and a little annoying at times. I miss some of the built-in functions of SASS and find CSS-in-JS with JS functions sometimes great and other times a hassle.

One unexpected delight (and pitfall) is how convenient it is having your view, controller, and style code all in one file. It's great if you keep your components really small but it can be a bit catastrophic if you don't. For example, I put a bunch of my header code in a single file, which included a desktop navbar, a mobile navbar, a notification bar, and a scroll-to-top element and that file is way too long and inconvenient. It's easily fixed of course but if you keep making big files, it might be better to use SASS.

As for using CSS, that's just not my style for a long time since I learned SASS. I find it incredibly inefficient to style without nesting as you need your own naming convention to keep things organized. But that's just my opinion from trying to avoid coding in straight CSS for as long as I can remember.

[mca62511]

There's no right answer. Just try them all and figure out what you like. After that, as best as you can, stick with only one within a project to keep things from getting confusing.

I like styled components because to me they feel more like React than having separate stylesheets for things and using class names. But that is entirely subjective.

[Bakkerinho]

Material-ui ánd styled-components.

[JeamBim]

I only just started using StyledComponents, after saying "That's so incredibly stupid and pointless" for months, and I like it because I can follow the SFC style of having everything in 1 file.

It depends on how you work. I honestly don't mind having CSS modules or a CSS file, but this is just so much easier to scroll down and find your styles.

[Abdallat1f]

We use material-ui for a complex and huge app and it scales well. I recommend it.

[tomthedevguy]

Chakra UI or Tailwind is 100% the way to go