Enable javascript in your browser for better experience. Need to know to enable it? Go here.
Last updated : May 19, 2020
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 Radar. Understand more
May 2020
Trial ?

Since we first mentioned CSS-in-JS as an emerging technique in 2017, it has become much more popular, a trend we also see in our work. With some solid production experience under our belts, we can now recommend CSS-in-JS as a technique to trial. A good starting point is the styled components framework, which we mentioned in our previous Radar. Next to all the positives, though, there usually is a downside when using CSS-in-JS: the calculation of styles at runtime can cause a noticeable lag for end users. With Linaria we're now seeing a new class of frameworks that were created with this issue in mind. Linaria employs a number of techniques to shift most of the performance overhead to build time. Alas, this does come with its own set of trade-offs, most notably a lack of dynamic style support in IE11.

Nov 2017
Assess ?

CSS in JS is a technique of writing CSS styling in the JavaScript programming language. This encourages a common pattern of writing the styling with the JavaScript component it applies to, co-locating presentational and logical concerns. The new players — including JSS, emotion and styled-components — rely on the tooling to translate the CSS-in-JS code to separate CSS stylesheets, to make them suitable for browser consumption. This is the second-generation approach to writing CSS in JavaScript and unlike the previous approaches doesn’t rely on in-line styles. That means it provides the benefit of supporting all CSS features, sharing of CSS using the npm ecosystem and utilization of components across multiple platforms. Our teams have found styled-components working well with component-based frameworks, such as React, and unit testing of CSS with jest-styled-components. This space is new and rapidly changing; the approach requires some effort for manual debugging of the generated class names in the browser, and it may not apply to some projects where the front-end architecture does not support reusing components and requires global styling.

Published : Nov 30, 2017

Download the PDF



English | Español | Português | 中文

Sign up for the Technology Radar newsletter


Subscribe now

Visit our archive to read previous volumes