Last week, Trulia hosted a meetup for the ReactJS San Francisco Bay Area group, where more than 100 developers came to our office to learn more about React. Speakers covered Atomic Design in React, Graphql and Relay. Representing Trulia, I gave a talk on CSS in React, including the pros and cons of moving from basic CSS to using a React specific framework for handling styles in components.
CSS has come a long way – quickly moving from CSS to Sass, to PostCSS. Now, with the help of new build tools like Webpack and Rollup, CSS has plunged head first into the world of JavaScript. Just as RequireJS and CommonJS made it possible to avoid globals in JavaScript and write modular code, engineers can now do the same with CSS, which the React community has embraced in various shapes.
There are dozens of CSS in JS frameworks out there, but I focused on three for this specific talk, which I’ll share more about here. Each framework follows a slightly different school of thought when it comes to moving into the brave new world of JavaScript powered CSS. These are Radium, react-css-modules and styled components.
Radium
Radium facilitates the use of JavaScript Object notation syntax to express styles inside your components and has a series of polyfills to emulate CSS features like pseudo selectors, keyframe animations and media queries in JavaScript. However, you do not have access to all CSS features in Radium, such as basic selectors like :before and :after. Also, since styles are all inline, debugging larger applications is difficult and there may also be a performance impact.
React CSS modules
This is another popular framework that builds on top of the idea of Interoperable CSS and modularizing style logic. What makes CSS modules unique is that it gives engineers the ability to keep style logic separate in CSS or Sass files and take advantage of all the existing features in CSS. You import your CSS into your JavaScript component, and the compiler takes those rules and scopes them per use case. So, if you write a class that reads .btn it can be customized via your build tool to become .btn_HYx7V. This new modularized class contains your corresponding rules and is scoped to your individual component.
Styled components
This is a newer idea, and it’s sort of the melding of the above two ideas. You write actual CSS (not JavaScripted CSS) inside your component while taking advantage of the ES6 template literal syntax. Since you are writing plain CSS, you avoid writing polyfills, but because you are inside JS, you can write expressions inside your CSS. Finally, Styled components modularizes your classes similar to CSS modules, and supports localizing keyframe animations to your component as well.
If you would like to learn more or experiment with these ideas in a minimized and step-by-step approach, I’ve created a CSS in react github repo to get you started. Just clone the repo, and switch to the directory you’d like to test. I will be keeping an eye on the developments in the CSS in React community as it is exciting to see how cssnext and Shadow DOM gain wider adoption within React. More on these topics will be covered during my upcoming talk at SXSW in 2017, too, so stay tuned!
