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. codesandbox.io/s/21nx9pw8jr
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.
Hey! I don’t think there any “best practices” because the field is still evolving and there are many unsolved problems. If I were to create a project I’d probably still use plain CSS 😅 Facebook uses something similar to CSS modules (but with a different syntax) and that works okay-ish too. In side projects I’ve enjoyed using glamor but I don’t really have any opinions there.
Liana, I don't know if this could be considered a "latest best practice", but it is something I've started doing for my own projects, which is to import CSS files as modules import "./component-style.css" inside the component file, then use Webpack to compile it.
You can avoid errors during testing using ignore-css module.
If you research a bit there are very interesting articles on the topic, and it has helped me to keep my CSS modular and clean.
You can even keep your CSS file close to your component.js and component.test.js files in the same folder, which for me at least is very practical when working on any particular component.
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:
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-componentswhich is the most popular solution, for now, go ahead here.codesandbox.io/s/21nx9pw8jr
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-componentsand jss and glamorous in terms of natural use with React and component way of doing things.Hey! I don’t think there any “best practices” because the field is still evolving and there are many unsolved problems. If I were to create a project I’d probably still use plain CSS 😅 Facebook uses something similar to CSS modules (but with a different syntax) and that works okay-ish too. In side projects I’ve enjoyed using glamor but I don’t really have any opinions there.
Liana, I don't know if this could be considered a "latest best practice", but it is something I've started doing for my own projects, which is to import CSS files as modules
import "./component-style.css"inside the component file, then use Webpack to compile it.You can avoid errors during testing using ignore-css module.
If you research a bit there are very interesting articles on the topic, and it has helped me to keep my CSS modular and clean.
You can even keep your CSS file close to your component.js and component.test.js files in the same folder, which for me at least is very practical when working on any particular component.
Hope it helps!
Or you can just use
styled-componentsand all that will be very natural with zero dead CSS code :P