Airbnb的利纳里亚之行

CSS is a critical component of every web application, and many solutions have evolved for how styles are written by developers and delivered to visitors. In this post we’ll take you through Airbnb’s journey from Sass to CSS-in-JS and show you why we landed on Linaria, a zero-runtime CSS-in-JS library, and the impact it has had on the developer experience and performance of Airbnb’s web app.

CSS是每个网络应用的重要组成部分，对于如何由开发者编写样式并传递给访问者，已经有了许多解决方案。在这篇文章中，我们将带你了解Airbnb从Sass到CSS-in-JS的历程，并告诉你为什么我们选择了Linaria，一个零运行时间的CSS-in-JS库，以及它对Airbnb的Web应用的开发者体验和性能的影响。

From Sass to CSS-in-JS

从Sass到CSS-in-JS

In 2016, our web frontend was in a monolithic Ruby on Rails app using a combination of Sprockets, Browserify, and Sass. We had a Bootstrap-inspired internal toolkit for styling, but we weren’t using anything like CSS Modules or BEM.

在2016年，我们的网络前端是在一个单体的Ruby on Rails应用程序中，使用Sprokets、Browserify和Sass的组合。我们有一个受Bootstrap启发的内部工具包，用于造型，但我们没有使用任何类似CSS Modules或BEM的东西。

Production bugs were often caused by our styling — sometimes the correct stylesheet was missing from some pages and other times styles from different stylesheets conflicted unexpectedly.

生产中的错误往往是由我们的样式表引起的--有时正确的样式表在一些页面中缺失，其他时候不同样式表的样式会意外地发生冲突。

Additionally, developers rarely removed styles once added since it was hard to know whether they were still needed. These issues compounded as our product surface area rapidly expanded.

此外，开发人员很少删除已经添加的样式，因为很难知道它们是否还需要。这些问题随着我们产品表面积的迅速扩大而变得更加复杂。

As we began to build our Design System in React, we landed on CSS-in-JS as an exciting new option. At the time, CSS-in-JS was still in its infancy–only a few libraries existed and Styled Components had not been invented yet. We chose Aphrodite, but didn’t want to be directly coupled to Aphrodite’s implementation for two reasons: since CSS-in-JS was a nascent space we wanted to have the flexibility to switch implementations at a later date, and we also wanted something that would work for open source projects where people might not want Aphrodite. So we created an abstraction layer called react-wi...