In this chapter, we looked at a lot of interesting topics. We started by going through the problems of CSS at scale, specifically, the problems that they had at Facebook while dealing with CSS. We learned how inline styles work in React and why it is good to co-locate the styles within components. We also looked at the limitations of inline styles. Then, we moved on to Radium, which solves the main problems of inline styles, giving us a clear interface to write our CSS in JavaScript. For those who think that inline styles are a bad solution, we moved into the world of CSS modules, setting up a simple project from scratch.
Importing the CSS files into our components makes the dependencies clear, and scoping the class names locally avoids clashes. We looked at how CSS module's composes is a great feature, and how we can use it in conjunction with Atomic CSS to create a framework for quick prototyping.
Finally, we had a quick look at styled-components, which is a very promising...