Languages & Frameworks

Styled components

This blip is not on the current edition of the Radar. If it was on one of the last few editions it is likely that it is still relevant. If the blip is older it might no longer be relevant and our assessment might be different today. Unfortunately, we simply don't have the bandwidth to continuously review blips from previous editions of the RadarUnderstand more
Published: Nov 20, 2019
Nov 2019

Using tagged template literals styled components make it possible to put the CSS needed to style a React component directly into the JavaScript code that creates the component. This greatly reduces the pain with managing CSS and obviates the need for naming conventions or other means of avoiding naming conflicts in CSS. Developers can see the styling when looking at the component definition, and they don't have to memorize several megabytes worth of CSS. Of course, placing the CSS into the JavaScript code can make it harder to get a consistent view across the styling of different components, which is why we recommend understanding the trade-offs with this approach.