Expedia Group Technology —软件 (EXPEDIA GROUP TECHNOLOGY — SOFTWARE)

TLDR: Using a Gatsby starter setup I investigated four CSS-in-JS libraries, Emotion, styled-components, Treat and JSS. In this comparison I summarise the differences in setup, documentation, styling paradigm and Node package size. The libraries are all very similar and essentially end up doing the same thing, but in different ways. Treat has the smallest bundle size with JSS the largest. Styled-components is the most popular with Treat the least. Using styled-components is the safest way to get started, but, Treat may be worth a gamble based on its scalability and bundle size.

TLDR：使用Gatsby入门设置，我研究了四个CSS-in-JS库， Emotion ， 样式组件 ， Treat和JSS 。 在此比较中， 我总结了设置，文档，样式范例和Node包大小方面的差异 。 这些库都非常相似，并且本质上以不同的方式完成了相同的工作。 Treat具有最小的捆绑包大小，而JSS最大。 带样式的组件是最受欢迎的，而Treat最少。 使用样式化组件是最安全的入门方法，但是，Treat基于其可伸缩性和捆绑包大小可能值得进行一次赌博。

骇客 (The hack)

HTML in JavaScript, are you sure? CSS in JavaScript? Now I know you’re having a laugh!

您确定使用JavaScript中HTML吗？ JavaScript中CSS？ 现在我知道你在笑！

A few years ago if someone mentioned writing HTML in JavaScript as a way of building large scale websites, I would have laughed it off as some sort of crazy idea. Now, with React, writing markup as part of a component’s render function is second nature.

几年前，如果有人提到用JavaScript编写HTML作为构建大型网站的一种方式，我会把它当作某种疯狂的想法而大笑。 现在，使用React，编写标记作为组件的render函数的一部分已成为第二天性。

For me, it has been the same with CSS. I heard about the move to code CSS into components a while ago and the thought made me cringe. Surely, these are completely different languages and mixing them is just asking for trouble.

对我来说，CSS也是如此。 不久前，我听说过将CSS编码为组件的想法，这种想法让我感到畏缩。 当然，这些是完全不同的语言，将它们混合使用只会带来麻烦。

However, recently I’ve taken more of an interest. During a recent hackathon, I experimented with four libraries I came across:

但是，最近我引起了更多兴趣。 在最近的黑客马拉松中，我尝试了遇到的四个库：

• Emotion情感
• Styled-components样式组件
• Treat对待
• JSSJSS

发现 (Findings)

情感 (64.82kb) (Emotion (64.82kb))

Emotion is a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. Both string and object styles are supported.

Emotion是一个旨在使用JavaScript编写CSS样式的库。 除了提供出色的开发人员体验(如源映射，标签和测试实用程序)外，它还提供了强大且可预测的样式组成。 字符串和对象样式均受支持。

Setup

建立

Straightforward installation with optional extras for styled CSS and React (which are separate packages). The core package gives developers access to the css prop to add styles.

简单的安装以及样式CSS和React(它们是独立的软件包)的可选附加功能。 核心软件包使开发人员可以访问css prop以添加样式。

import { css } from '@emotion/core';const style = css`color: hotpink;
`
const SomeComponent = ({ children }) => (<div css={style}>Some hotpink text.{children}</div>
)

Optional extras include @emotion/styled package allowing components to have styles attached to them.

可选的附加功能包括@emotion/styled软件包，允许组件具有附加的样式。

import styled from '@emotion/styled';const Button = styled.button`color: hotpink;
`;render(<Button>This is a hotpink button.</Button>
)

Emotion has an optional Babel plugin that optimises styles by compressing and hoisting them, creating a better developer experience with source maps and labels.

Emotion有一个可选的Babel插件，可通过压缩和提升样式来优化样式，从而通过源映射和标签创建更好的开发人员体验。

Adding a theme was straightforward with a basic JavaScript object passed as a prop to the ThemeProvider.

通过将基本JavaScript对象作为道具传递给ThemeProvider添加主题。

Documentation

文献资料

Good documentation with easy to follow steps to get up and running. The documentation is separated into sections for beginners, advanced, tooling and plugins.

良好的文档以及易于执行的启动和运行步骤。 该文档分为初学者，高级，工具和插件两部分。

Style

样式

As you can see from the code above, Emotion can be used in two different ways, directly as CSS on an HTML element or by attaching styles to the component. For me, both have their weaknesses. The base css prop is obviously a new addition but it doesn't allow for reuse. If two elements share some common styling there doesn't appear to be a way to extend a base style, unlike how it can be done in styled-components.

从上面的代码中可以看到，Emotion可以以两种不同的方式使用，直接用作HTML元素上CSS或将样式附加到组件。 对我来说，两者都有缺点。 基本的css prop显然是一个新的添加，但不允许重复使用。 如果两个元素共享某些共同的样式，则似乎没有一种扩展基本样式的方法，这与在styled-components中如何完成一样 。

One of the examples was the following:

示例之一如下：

render(<divcss={{backgroundColor: 'hotpink','&:hover': {color: 'lightgreen'}}}>This has a hotpink background.</div>
)

This to me, seems unmaintainable and very difficult to read.

在我看来，这似乎难以维护，而且很难阅读。

Also depending on how you prefer naming, styles can either be written as camelCase or when importing css function from the core package you can use familiar CSS selectors.

另外，根据您喜欢的命名方式，样式可以写为camelCase，也可以在从核心包导入css函数时使用熟悉CSS选择器。

Attaching styles to components takes the HTML element out of the React component and into the styles file. This took some getting used to. I found importing all the styles back into the component could mean a lengthy import statement.

将样式附加到组件会将HTML元素从React组件中移出，并进入样式文件。 这花了一些时间来适应。 我发现将所有样式导入回组件可能意味着冗长的import语句。

/* styles */
export const Button = styled.button`...`
export const Text = styled.span`...`
export const Icon = styled.svg`...`
export const PrimaryButton = styled.button`...`
export const SecondaryButton = styled.button`...`/* react component */
import {Button, Text, Icon, PrimaryButton, SecondaryButton} from 'styles.js'

样式组件 (92.47kb) (Styled-components (92.47kb))

Utilising tagged template literals (a recent addition to JavaScript) and the power of CSS, styled-components allows you to write actual CSS code to style your components. It also removes the mapping between components and styles — using components as a low-level styling construct could not be easier!

通过使用带标签的模板文字(JavaScript的最新功能)和CSS的强大功能，样式化组件使您可以编写实际CSS代码来对组件进行样式化。 它还消除了组件和样式之间的映射-使用组件作为低级样式构造并不容易！

Setup

建立

Easiest of the four to get setup as its one package that works straight out of the box (though a babel plugin require for Server-Side Rendering.) As with Emotion, adding a theme was also simple with a JavaScript object passed as a prop to a theme provider.

这四个安装套件中最容易安装的一个是可以直接使用的软件包(尽管babel插件需要Server-Side Rendering。)与Emotion一样，添加主题也很简单，将JavaScript对象作为道具传递给主题提供者。

Documentation

文献资料

Very good docs with easy to follow setup with an additional section on API references.

很好的文档，易于安装，另外还有关于API参考的部分。

Style

样式

Styled-components focus more on exactly that - styling the components.

样式化组件更着重于此-样式化组件。

const Title = styled.h1`font-size: 1.5em;text-align: center;color: palevioletred;
`;render(<Title>Hello World!</Title>
);

Styles can be adapted by passing in props to those components. So for example if a button is clicked, an internal state can change which in turn alters the props passed to the styled component.

可以通过将道具传递给那些组件来修改样式。 因此，例如，如果单击一个按钮，则内部状态可以更改，从而改变传递给样式组件的道具。

An advantage I see with this package compared to Emotion is the ability to extend styles.

与Emotion相比，此软件包的一个优势是扩展样式的能力。

const Button = styled.button`color: palevioletred;font-size: 1em;margin: 1em;padding: 0.25em 1em;border: 2px solid palevioletred;border-radius: 3px;
`;const TomatoButton = styled(Button)`color: tomato;border-color: tomato;
`;

Like Emotion, importing all these styles back into the React component seemed lengthy.

与Emotion一样，将所有这些样式导入回React组件似乎很漫长。

If moving to a CSS-in-JS library, something written with familiar CSS naming structure is easier than remembering to switch to camelCase.

如果转移到CSS-in-JS库，使用熟悉CSS命名结构编写的内容比记住切换到camelCase容易。

对待 (2.67kb) (Treat (2.67kb))

Themeable, statically extracted CSS‑in‑JS with near‑zero runtime.

主题化的，静态提取CSS-in-JS，运行时几乎为零。

Setup

建立

Basic setup with one package. An additional package is required if theming is required. Gatsby didn’t require this, but under normal circumstances, a webpack plugin needs to be added to the config (this is included in the core package.)

一个软件包的基本设置。 如果需要主题，则需要一个附加的程序包。 Gatsby不需要这样做，但是在正常情况下，需要将Webpack插件添加到配置中(此文件包含在核心软件包中)。

Documentation

文献资料

Treat was built by the team at Seek Australia so its purpose fits their needs but they have been kind enough to open-source the library. As with the others above, the documentation was easy to follow and includes some history into why it was created over using an existing package. There is a section on the styling API which gives access to a few helpful functions such as styleMap which allows you to easily create multiple namespaces within a Treat file.

Treat是由Seek Australia团队构建的，因此其目的可以满足他们的需求，但他们善良地将图书馆开源。 与上面的其他文档一样，该文档也易于阅读，并包含一些历史记录，说明了为什么使用现有软件包创建该文档。 样式API的一部分提供了对一些有用功能的访问，例如styleMap ，该功能使您可以轻松地在Treat文件中创建多个名称空间。

Style

样式

By default all styles need to be separated into a file with .treat.js / .treat.ts extensions. This is so they can be compiled and executed at build time.

默认情况下，所有样式都需要分离为扩展名为.treat.js / .treat.ts的文件。 这样便可以在构建时对其进行编译和执行。

import { style } from 'treat';export const button = style({backgroundColor: 'blue',height: 48
});

Then they can be imported into a React component:

然后可以将它们导入到React组件中：

import * as styles from './Button.treat.js';export const Button = ({ text }) => (<button className={styles.button}>${text}</button>
);

This is where I started to see some differences. Styles are written in camelCase in an object and are added to elements using the familiar React className (classname packages can also be used to bundle classes.) This leaves HTML elements to stay within the familiar structure in component render functions; I felt more comfortable with this.

这是我开始看到一些差异的地方。 样式使用对象的camelCase编写，并使用熟悉的React className (也可以使用classname包捆绑类)添加到元素中。这使HTML元素保留在组件渲染函数的熟悉结构内； 我对此感到更自在。

Setting up a theme was a little more in depth. Again a separate file is required for the Treat styles:

设置主题要深入一些。 对待样式再次需要一个单独的文件：

import { createTheme } from 'treat';export default createTheme({brandColor: 'blue',grid: 4
});

and then that is passed to a theme provider as with other packages.

然后将其与其他包一样传递给主题提供程序。

import React from 'react';
import { TreatProvider } from 'react-treat';import theme from './theme.treat.js';export const App = () => (<TreatProvider theme={theme}>...</TreatProvider>
);

I had a few issues with styles picking up the theme as it didn’t seem to pick up by default like the other libraries when hot-loading. This required a restart of Gatsby to work which took a while to figure out.

我在选择主题时遇到了一些styles问题，因为在热加载时，默认情况下它似乎没有像其他库那样选择主题。 这需要重新启动Gatsby才能正常工作，这需要花费一些时间才能弄清楚。

Then in the component they are converted using hooks:

然后在组件中使用挂钩将它们转换：

import * as styleRefs from './Button.treat.js';export const Button = props => {const styles = useStyles(styleRefs);return <button {...props} className={styles.button} />;
};

JSS (157.11kb) (JSS (157.11kb))

JSS is an authoring tool for CSS which allows you to use JavaScript to describe styles in a declarative, conflict-free and reusable way. It can compile in the browser, server-side or at build time in Node.

JSS是CSS的创作工具，它使您可以使用JavaScript以声明性，无冲突和可重用的方式描述样式。 它可以在浏览器中，服务器端或在Node的构建时进行编译。

Setup

建立

A few packages are required to get up and running with JSS. The core package and default preset are required whilst the react-jss package is required for theming.

需要一些软件包才能启动和运行JSS。 主题需要核心软件包和默认预设，而react-jss软件包则是必需的。

Documentation

文献资料

The getting started is a one-pager and then everything else falls under advanced or packages. I couldn’t find documentation on theming without a Google search which directed me to the react-jss page under packaging. Most of the documentation focuses on the packages side.

入门只有一页，然后其他所有内容都归于高级或软件包中。 没有Google搜索，我无法找到关于主题的文档，该搜索将我定向到包装下的react-jss页面。 大多数文档都集中在软件包方面。

Style

样式

Like Treat, JSS uses camelCase to write elements. In the examples the styles are written as one large JavaScript object, which seemed overkill.

像Treat一样，JSS使用camelCase编写元素。 在示例中，样式被写为一个大JavaScript对象，这似乎有些过分。

import {createUseStyles} from 'react-jss'const styles = createUseStyles(theme => ({Container: {margin: '3rem auto',maxWidth: 600,display: 'flex',flexDirection: 'column',alignItems: 'center',justifyContent: 'center',},Excerpt: {color: theme.brandColor,margin: 0,},
}));

Within the React component, styles are converted using a hook and are added as a className (similar to Treat).

在React组件中，使用钩子转换样式并将其作为className添加(类似于Treat)。

const theme = useTheme();
const classes = styles({theme});<div className={classes.UserWrapper}>...</div>

There are a lot of similarities between JSS and Treat, but I found JSS less intuitive especially around the large object for styles.

JSS和Treat之间有很多相似之处，但是我发现JSS不太直观，尤其是在样式较大的对象周围。

结论 (Conclusion)

I see these four libraries split by two methods of interaction. Emotion and styled-components both stick to the classic CSS type styling. Whereas Treat and JSS appear more JavaScript based.

我看到这四个库被两种交互方法分开。 情感和样式组件均遵循经典CSS类型样式。 Treat和JSS似乎更多基于JavaScript。

JSS’s setup and bundle size, especially as I only used one plugin, would rule itself out for me. At 157kb it’s over 170% of its nearest library and nearly 6000% bigger than the smallest. Adding more plugins will only add to this bundle size.

JSS的设置和捆绑软件的大小(尤其是当我仅使用一个插件时)将对我自己排除。 它的长度为157kb，是最近图书馆的170％以上，比最小图书馆大近6000％。 添加更多插件只会增加该捆绑包的大小。

• Emotion: 64.82kb

  情感 ：64.82kb

• Styled-components: 92.47kb

  伴奏风格的组件 ：92.47kb

• Treat: 2.67kb

  款待 ：2.67kb

• JSS: 157.11kb

  JSS ：157.11kb

Emotion and styled-components are very similar, however, I feel there is a little more to styled-components despite its larger bundle size. Both made me feel uneasy adding HTML elements in CSS via styled.div for example, but I guess that would become second nature in time. I'd also imagine running into some naming convention issues. For example, if I had a component named Button, I would have to add a new name for the CSS such as ButtonWrapper to avoid conflicts.

情感和样式组件非常相似，但是，尽管捆绑包尺寸较大，但我觉得样式组件还有更多内容。 两者都使我感到不安，例如，通过styled.div在CSS中添加HTML元素，但我想这将styled.div成为第二自然。 我也可以想象会遇到一些命名约定问题。 例如，如果我有一个名为Button的组件，则必须为CSS添加一个新名称，例如ButtonWrapper以避免冲突。

Treat seemed to be the most extendable, especially seeing what Seek have done with their braid-design-system. Its bundle size is also a big bonus, but it does come with a larger learning curve and more risk as it's not as well supported (less of a community behind it.)

对待似乎是最可扩展的，尤其是看看Seek对其辫子设计系统做了什么。 它的捆绑包大小也是一个很大的好处，但是它的学习曲线更大，风险更大，因为它没有得到很好的支持(缺少背后的社区)。

Coming into this I fully expected styled-components to be my preferred choice and it is definitely the most popular. This was purely down to the fact that I’d heard so much more about this package than the others. But given this brief investigation I’d have to say that there are some very good challengers out there.

对此，我完全希望样式化组件是我的首选，并且绝对是最受欢迎的组件。 这纯粹是因为我比其他人听到了更多有关此软件包的信息。 但是经过简短的调查，我不得不说，那里有一些非常好的挑战者。

So if I was to pick, I would be between styled-components and Treat. If I wanted a quick site with minimum effort, then styled-components would be my choice. If I wanted to create a more complex and maintainable app, then I would take a gamble on Treat.

因此，如果要选择的话，我将介于样式组件和Treat之间。 如果我想以最少的精力快速访问网站，那么样式化组件将是我的选择。 如果我想创建一个更复杂和可维护的应用程序，那么我将在Treat上赌博。