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