样式组件化_5分钟的样式化组件简介

样式组件化

by Sacha Greif

由Sacha Greif

5分钟的样式化组件简介 (A 5-minute Intro to Styled Components)

CSS is weird. You can learn the basics of it in 15 minutes. But it can take years before you figure out a good way to organize your styles.

CSS很奇怪。 您可以在15分钟内学习它的基础知识。 但是，要想出一种组织样式的好方法，可能需要花费数年的时间。

Part of this is just due to the quirks of the language itself. Out of the box, CSS is quite limited, with no variables, loops, or functions. At the same time, it’s quite permissive in that you can style elements, classes, IDs, or any combination of these.

部分原因是由于语言本身的怪异。 开箱即用，CSS非常有限，没有变量，循环或函数。 同时，您可以设置元素，类，ID或这些元素的任何组合的样式，这是非常允许的。

混沌样式表 (Chaotic Style Sheets)

As you’ve probably experienced for yourself, this is often a recipe for chaos. And while preprocessors like SASS and LESS add a lot of useful features, they don’t really do much to stop CSS anarchy.

正如您可能自己经历的那样，这通常是导致混乱的秘诀。 尽管像SASS和LESS这样的预处理器添加了许多有用的功能，但它们并没有真正阻止CSS无政府状态。

That organizational job was left to methodologies like BEM, which — while useful — is entirely optional, and can’t be enforced at the language or tooling level.

该组织工作留给了BEM之类的方法，尽管它很有用，但它是完全可选的，并且不能在语言或工具级别上强制执行。

新浪潮 (The New Wave Of CSS)

Fast forward a couple years, and a new wave of JavaScript-based tools are trying to solve these issues at their root, by changing the way you write CSS.

很快过去了几年，基于JavaScript的新工具浪潮试图通过更改CSS编写方式从根本上解决这些问题。

Styled Components is one of these libraries, and it has quickly attracted a lot of attention due to its mix of innovation and familiarity. So if you use React (and if you don’t, check out my JavaScript study plan and my intro to React), it’s definitely worth taking a look at this new CSS alternative.

Styled Components是这些库之一，由于其创新性和熟悉性的结合，它很快引起了很多关注。 因此，如果您使用React(如果不使用React， 请查看我JavaScript学习计划和React简介 )，那么绝对值得一看这个新CSS替代方案。

I recently used it to redesign my personal site, and today I wanted to share a few things I learned in the process.

我最近使用它重新设计了我的个人网站 ，今天我想分享在此过程中学到的一些知识。

组件，样式 (Components, Styled)

The main thing you need to understand about Styled Components is that its name should be taken quite literally. You are no longer styling HTML elements or components based on their class or HTML element:

关于样式化组件，您需要了解的主要内容是，其名称应完全按字面意思使用。 您不再需要根据它们的类或HTML元素来样式化HTML元素或组件：

<h1 className="title">Hello World</h1>

h1.title{  font-size: 1.5em;  color: purple;}

Instead, you’re defining styled components that possesses their own encapsulated styles. Then you’re using these freely throughout your codebase:

相反，您要定义具有其自身封装样式的样式化组件 。 然后，您可以在整个代码库中自由使用它们：

import styled from 'styled-components';

const Title = styled.h1`  font-size: 1.5em;  color: purple;`;

<Title>Hello World</Title>

This might seem like a minor difference, and in fact both syntaxes are very similar. But they key difference is that styles are now part of their component.

这看起来似乎是微小的差异，并且实际上两种语法都非常相似。 但它们的主要区别在于样式现在已成为其组成部分。

In other words, we’re getting rid of CSS classes as an intermediary step between the component and its styles.

换句话说，在组件及其样式之间的中间步骤中，我们摆脱了CSS类。

As styled-components co-creator Max Stoiber says:

正如样式组件的共同创建者Max Stoiber所说：

“The basic idea of styled-components is to enforce best practices by removing the mapping between styles and components.”

“ styled-components 的基本思想 是通过删除样式和组件之间的映射来实施最佳实践。”

卸载复杂度 (Offloading Complexity)

This will seem counter-intuitive at first, since the whole point of using CSS instead of directly styling HTML elements (remember the <font> tag?) is to decouple styles and markup by introducing this intermediary class layer.

一开始这似乎是违反直觉的，因为使用CSS而不是直接样式化HTML元素(记住<fo nt>标签？)的全部目的是通过引入此中间类层来使样式和标记脱钩。

But that decoupling also creates a lot of complexity, and there’s an argument to be made that compared to CSS, a “real” programming language like JavaScript is much better equipped to handle that complexity.

但是这种解耦也会带来很多复杂性，而且有一个论点是，与CSS相比，像JavaScript这样的“真实”编程语言能够更好地处理这种复杂性。

上课道具 (Props Over Classes)

In keeping with this no-classes philosophy, styled-components makes use of props over classes when it comes to customizing the behavior of a component. So instead of:

与这种无类原则保持一致，在定制组件的行为时，样式化组件在类上使用了props。 所以代替：

<h1 className="title primary">Hello World</h1> // will be blue

h1.title{  font-size: 1.5em;  color: purple;    &.primary{    color: blue;  }}

You’d write:

你会写：

const Title = styled.h1`  font-size: 1.5em;  color: ${props => props.primary ? 'blue' : 'purple'};`;

<Title primary>Hello World</Title> // will be blue

As you can see, styled-components let you clean up your React components by keeping all CSS and HTML-related implementation details out of them.

如您所见，通过样式化组件，您可以通过保留所有与CSS和HTML相关的实现细节来清理React组件。

That said, styled-components CSS is still CSS. So things like this are also totally valid (although slightly non-idiomatic) code:

也就是说，样式化组件CSS仍然是CSS。 因此，类似这样的事情也是完全有效的(尽管有些不习惯)代码：

const Title = styled.h1`  font-size: 1.5em;  color: purple;    &.primary{    color: blue;  }`;

<Title className="primary">Hello World</Title> // will be blue

This is one feature that makes styled-components very easy to get into: when it doubt, you can always fall back to what you know!

这是一个使样式化组件非常容易使用的功能：如果有疑问，您总是可以退回到自己所知道的！

注意事项 (Caveats)

It’s also important to mention that styled-components is still a young project, and that some features aren’t yet fully supported. For example, if you want to style a child component from a parent, you’ll have to rely on using CSS classes for now (at least until styled-components v2 comes out).

还必须提及的是，样式化组件仍然是一个年轻项目，并且某些功能尚未得到完全支持。 例如，如果要从父级样式化子级组件，则必须暂时使用CSS类(至少直到styled-components v2出现)。

There’s also no “official” way to pre-render your CSS on the server yet, although it’s definitely possible by injecting the styles manually.

尽管还可以通过手动注入样式来实现CSS ，但是还没有“官方”方法可以在服务器上预渲染CSS 。

And the fact that styled-components generates its own randomized class names can make it hard to use your browser’s dev tools to figure out where your styles are originally defined.

而且，样式化组件会生成自己的随机类名，这使得使用浏览器的开发工具来确定样式的最初定义位置变得很困难。

But what’s very encouraging is that the styled-components core team is aware of all these issues, and is hard at work on fixing them one by one. Version 2 is coming soon, and I’m really looking forward to it!

但是令人鼓舞的是，样式化组件的核心团队已经意识到了所有这些问题，并且正在努力一一修复它们。 第2版​​即将推出 ，我真的很期待！

学到更多 (Learn More)

My goal here is not to explain in detail how styled-components works, but more to give you a small glimpse so you can decide for yourself if it’s worth checking out.

我的目的不是要详细解释样式化组件是如何工作的，而更多是为了让您了解一下，以便您自己决定是否值得检查。

If I’ve managed to make you curious, here some places where you can learn more about styled-components:

如果我设法使您感到好奇，请在一些地方可以了解有关样式化组件的更多信息：

• Max Stoiber recently wrote an article about the reason for styled-components for Smashing Magazine.

  Max Stoiber最近写了一篇有关Smashing Magazine样式元素的原因的文章。

• The styled-components repo itself has a extensive documentation.

  样式化组件仓库本身具有大量的文档。

• This article by Jamie Dixon outlines a few benefits of switching to styled-components.

  Jamie Dixon的这篇文章概述了切换到样式化组件的一些好处。

• If you want to learn more about how the library is actually implemented, check out this article by Max.

  如果您想了解有关如何实际实现该库的更多信息，请查阅Max的本文 。

And if you want to go even further, you can also check out Glamor, a different take on new-wave CSS!

如果您想走的更远，还可以查看Glamor ，这是最新CSS的另一种用法！

Self-promotion time: we’re looking for open-source contributors to help with Nova, the easiest way to create full-stack React & GraphQL apps complete with forms, data loading, and user accounts. We don’t use styled-components yet, but you could be the first to implement them!

自我推广时间： 我们正在寻找开源贡献者来帮助Nova ，这是创建具有表单，数据加载和用户帐户的完整堆栈React＆GraphQL应用程序的最简单方法。 我们尚未使用样式化组件，但您可能是第一个实现它们的人！

翻译自: https://www.freecodecamp.org/news/a-5-minute-intro-to-styled-components-41f40eb7cd55/

样式组件化