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 30, 2017
Last Updated: May 19, 2020
May 2020

自2017年,我们把 CSS-in-JS 作为新兴技术提出后,它变得越来越流行了,在我们的工作中也可以看到明显的趋势。基于一些扎实的生产经验,我们现在推荐 CSS-in-JS 为试用技术。在上次的技术雷达中我们提到过,要了解这个技术, 样式化组件 框架是一个很好的出发点。在使用 CSS-in-JS 技术的时候,除了它的种种优点,通常也会遭遇到一个缺点:运行时计算样式会导致 用户可感知延迟。通过 Linaria, 我们看到了一类新的在创建时就考虑到这个问题的框架。Linaria 引入了许多技术把大部分性能开销转移到构建时间。不过这也带来了一些妥协,最常见的就是不支持 IE11 的动态样式。

Nov 2017

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.