The never ending and very contentious debate around standard CSS stylesheets vs. “CSS-in-JS” continues with this pros and cons comparison between Styled Components (CSS in JS) and CSS Stylesheets (CSS in, ummm…CSS).

Over the last few years, CSS-in-JS solutions have become prevalent across the front-end landscape with many offerings such as styled-components, and emotion that provides a way to colocate your components and style definitions.

While there are many advantages to using a “CSS-in-JS” solution, naturally, it’s quite a polarizing topic among front-end developers. I’m going to lay out some of the essential pros and cons of styled-components vs. more “traditional” CSS stylesheets that affect the way I code in React on a day-to-day basis.