re: React Beginner Question Thread ⚛ VIEW POST

re: Hey Dan, thanks for doing this. What would you say is the latest best practice for approaching CSS/styling in React?

I'm not a Dan Abramov :D But still, react is lightweight library so I'm not sure that they will add any "CSS-in-JS thing" to it that is more complex than inline-styles that they have now.

About best practices now and what community is fascinated about is surely CSS-in-JS libraries.
Such as styled-components, jss, glamorous.

They have automated out all styles isolation problems keeping the ability to work with 3rd party CSS styled components.
At the end, we have:

  • perfect props dependent styling
  • isolation
  • styles encapsulation within the component

And many other things like discoverability of usage, modularization of the styles, so you don't have any unnecessary styling applied to the page, dead simple theming support, lot's of reusable functions, mixins, shortcuts and everything you can imagine cause it's just JS.

You can analyze it using way more tooling than CSS have, you can programmatically do tons of stuff etc.

If you want an example of usage of styled-components which is the most popular solution, for now, go ahead here.

I highly recommend styled-components.

About more traditional things, well, postcss with CSS modules and cssnext preset is a nice thing for old-fashioned people, but is way-way-way-way weaker than styled-components and jss and glamorous in terms of natural use with React and component way of doing things.

code of conduct - report abuse