感冒喝咖啡_早上喝咖啡时学习EmotionJS-就是这么简单。-CSDN博客

感冒喝咖啡

by shahar taite

由shahar taite

早上喝咖啡时学习EmotionJS-就是这么简单。 (Learn EmotionJS during your morning coffee — it’s that easy.)

EmotionJS is a CSS-in-JavaScript library with incredible capabilities. Let’s see how the world of CSS evolved to this solution, and then deep dive into what you can do with it today.

EmotionJS是具有不可思议功能CSS-in-JavaScript库。让我们看看CSS世界如何演变成该解决方案，然后深入研究您今天可以使用它做什么。

CSS大战(回顾) (The CSS wars (a recap))

In the last couple of years, we’ve seen a transition to different types of styling methods, all based on CSS. Here is the gist in chronological order:

在过去的几年中，我们已经看到了向所有基于CSS的不同类型的样式化方法的过渡。这是按时间顺序排列的要点：

普通的旧CSS (Plain old CSS)

This is the classic and simple way of applying CSS. We reference a CSS file in our index.html and it is applied to our HTML files by classic rules of CSS.

这是应用CSS的经典且简单的方法。我们在index.html中引用了一个CSS文件，并通过CSS的经典规则将其应用于HTML文件。

This approach has problems when applied at scale, as CSS is based on specificity which needs to be handled gently if we want to prevent CSS collisions.

这种方法在大规模应用时会遇到问题，因为CSS是基于特定性的，因此如果要防止CSS冲突，则需要轻而易举地进行处理。

It is also hard to debug when inspecting in the browser. It is hard to understand which combination of CSS properties ended up influencing the style we see on an HTML tag.

在浏览器中进行检查时，也很难进行调试。很难理解哪种CSS属性组合最终会影响我们在HTML标记上看到的样式。

CSS预处理器 (CSS preprocessors)

Plain old CSS had some limitations, giving birth to some extensions of CSS such as Less and Sass. These language extensions allow us to write in a language with stronger capabilities. Examples include CSS selector nesting, functions, and more. Our build tool compiles these files into simple CSS files and they are applied in an ordinary manner.

普通的旧CSS有一些限制，从而产生了CSS的一些扩展，例如Less和Sass。这些语言扩展使我们可以使用功能更强大的语言进行编写。示例包括CSS选择器嵌套，函数等。我们的构建工具将这些文件编译为简单CSS文件，并以普通方式对其进行应用。

CSS模块 (CSS modules)

This approach was introduced once web development started treating web pages as trees of components. CSS-modules is all about styling a component independently, not affecting other parts of the UI and not being affected by them.

一旦Web开发开始将网页视为组件树，就引入了这种方法。 CSS模块就是关于独立设计组件的样式，而不影响UI的其他部分，也不受它们的影响。

After introducing CSS-modules into our project, each component references a CSS file with ordinary or preprocessed CSS. During the build process, our build system (such as webpack) takes each CSS class, prefixes it with the component’s name and suffixes it with a unique identifier so the class is unique.

在将CSS模块引入我们的项目后，每个组件都引用一个包含普通或预处理CSSCSS文件。在构建过程中，我们的构建系统(例如webpack)将获取每个CSS类，在其前面加上组件名称，并在后缀上加上唯一的标识符，以使该类唯一。

This approach is great as it’s very easy to achieve CSS isolation. Also, it’s easy to understand which CSS rules were applied to our HTML elements and where they originated. I’ve been a big advocate of this approach — until EmotionJS was released.

这种方法很棒，因为很容易实现CSS隔离。同样，很容易理解哪些CSS规则应用于我们HTML元素以及它们的起源。在EmotionJS发布之前，我一直是这种方法的拥护者。

CSS-in-JS (CSS-in-JS)

This approach challenges the practice of isolating CSS into CSS files. It allows us to state our CSS rules within our JavaScript code as JS objects.

这种方法对将CSS隔离到CSS文件中的做法提出了挑战。它使我们能够将JavaScript代码中CSS规则声明为JS对象。

Some frameworks such as React have built-in support for this method. A few libraries emerged from the need to provide a more isolated and scalable solution. The top libraries are Styled Components and EmotionJS.

一些框架，如React 对此方法有内置支持。提供一些更隔离和可扩展的解决方案的需求催生了一些库。顶级库是样式化组件和EmotionJS。

Let’s elaborate on these.

让我们详细说明一下。

样式化组件与EmotionJS！ (Styled Components versus EmotionJS!)

Styled Components arrived first, and EmotionJS was admittedly heavily influenced by it.

样式组件首先到达，并且EmotionJS无疑受到了很大的影响。

Styled Components are simple, small React components. They define a HTML tag and its styles as a function of the component’s props.

样式化组件是简单的小型React组件。它们根据组件的props定义HTML标记及其样式。

This isolates the HTML and CSS semantics from our more functional React components. This in turn provides a more readable and maintainable development experience.

这将HTML和CSS语义与功能更强大的React组件隔离开来。反过来，这提供了更具可读性和可维护性的开发体验。

Styled components example:

样式化的组件示例：

What we see here is a HTML button with some CSS props.

我们在这里看到的是带有一些CSS道具HTML按钮。

The color and background CSS properties are determined as a function of a primary prop which is passed (or not) to the component.

color和background CSS属性是根据primary属性(传递给(或不传递给)组件的)确定的。

Notice how the JSX is very simple and semantic, and the CSS and HTML part is isolated into the styled component.

注意JSX如何非常简单和语义化，并且CSS和HTML部分被隔离到样式化组件中。

Now let’s look at EmotionJS.

现在让我们看一下EmotionJS。

EmotionJS takes the power of styled components and adds some more useful functionality (and also the coolest logo ever).

情感JS 利用样式化组件的功能，并添加了一些更有用的功能(以及有史以来最酷的徽标)。

Let’s demonstrate the things I thought were most impressive with EmotionJS.

让我们展示一下我认为EmotionJS给人留下深刻印象的事情。

One thing I hated up until now was maintaining CSS media queries.

到目前为止，我讨厌的一件事是维护CSS媒体查询。

The CSS rules for each breakpoint resided in different areas of the CSS files. It was hard to see and handle the overlapping properties.

每个断点CSS规则位于CSS文件的不同区域。很难看到和处理重叠的属性。

In EmotionJS, we can create a constant holding our breakpoint widths with the help of the Facepaint library.

在EmotionJS中，我们可以借助Facepaint库创建一个包含断点宽度的常量。

We can then reference this constant, declaring the values of a CSS property for each breakpoint in one place.

然后，我们可以引用此常量，在一个位置为每个断点声明CSS属性的值。

Let’s break this example down:

让我们分解这个例子：

Line 4-9: we define our breakpoint widths, in one place in our application
第4-9行：我们在应用程序的一个位置定义断点宽度
Line 13–23: we define a Button component which is a div tag with some CSS properties. Its width and height values are defined as an array of values, one for each breakpoint. Notice how we don’t need to specify the px units. They are added automatically. Also notice the background-color property being dependent on the primary prop provided to the Button component. This is similar to the Styled components example.
第13-23行：我们定义一个Button组件，它是一个带有一些CSS属性的div标签。它的width和height值定义为一组值，每个断点一个。请注意，我们不需要指定px单位。它们是自动添加的。还要注意， background-color属性取决于提供给Button组件的primary属性。这类似于“样式化的组件”示例。
Line 26–33: in our React component, we reference our EmotionJS Button and use it as a JSX tag
第26–33行：在React组件中，我们引用了EmotionJS Button并将其用作JSX标签

EmotionJS的其他功能 (Other features of EmotionJS)

EmotionJS has some more ways of achieving some of these capabilities:

EmotionJS具有实现这些功能的更多方法：

The CSS prop — we can provide our React components with a CSS prop which is a JavaScript object or string defining our CSS properties.
CSS道具—我们可以为React组件提供CSS道具，CSS道具是定义我们CSS属性JavaScript对象或字符串。

Media queries can also be targeted with the CSS prop approach
媒体查询也可以使用CSS prop方法来定位

总结一下：好，坏和情感 (To conclude: the good, the bad, and the emotional)

Pros:

优点：

Easy to integrate and replace other CSS solutions.
易于集成和替换其他CSS解决方案。
Easy to identify and remove dead code compared to other solutions.
与其他解决方案相比，易于识别和删除无效代码。
Easier to work with media queries, values are gathered together.
媒体查询更容易使用媒体查询。
React components become more semantic as HTML and CSS are isolated.
随着HTML和CSS的隔离，React组件变得更加语义化。

Cons:

缺点：

With CSS-modules, it’s easy to understand exactly where the CSS rule is coming from when inspecting in the browser. This is because class names are generated with React component name prefixes. With EmotionJS, this doesn’t happen.
使用CSS模块，在浏览器中进行检查时，很容易准确地了解CSS规则的来源。这是因为类名称是使用React组件名称前缀生成的。使用EmotionJS，这不会发生。
If we define a CSS property for one media query, we need to define it for the rest as well, as we provide an array of values. In a lot of cases, we just want to address one or two media queries and leave the others as the default value.
如果我们为一个媒体查询定义CSS属性，那么我们还需要为其余媒体定义CSS属性，因为我们提供了一组值。在很多情况下，我们只想解决一个或两个媒体查询，而将其他媒体查询保留为默认值。

判决 (The verdict)

EmotionJS is the next step in the right direction, dealing with the pitfalls of CSS. It provides an isolated, maintainable environment keeping our main components logic-centered and semantic.

EmotionJS是朝着正确方向迈出的下一步，它处理了CSS的陷阱。它提供了一个隔离的，可维护的环境，使我们的主要组件保持逻辑中心和语义。

It literally took me ten minutes to learn and integrate it and it’s a major improvement in this area.

从字面上看，我花了十分钟来学习和集成它，这是该领域的重大改进。

Don’t forget to clap if you liked this, and follow me on Twitter: https://twitter.com/shahar_taite

如果您喜欢，别忘了鼓掌，然后在Twitter上关注我： https ： //twitter.com/shahar_taite