让我们在 2019 年看看 React 中的 CSS - CSS 和内联样式

让我们在 2019 年看看 React 中的 CSS - CSS 和内联样式

让我们在 2019 年看看 React 中的 CSS - CSS 和内联样式

JS 中的 CSS 并不是 React 独有的，然而，我是 React 的一个小粉丝，它恰好是我最喜欢的用来编写前端应用程序的 JS 库之一，所以我将专门讨论 React 中的 JS 解决方案中的 CSS，以及我对它们的感受！

常规 CSS 介绍

在深入研究任何内容之前，我认为我们应该先看看在 React 应用程序环境中我们可以用一些好的CSS 完成什么。

// Button.js
import React from 'react'
import './Button.css'

const Button = () => {
  return(
    <button className="button button-green">
      I think I'm green
    </button>
  )
} 

/* Button.css*/
.button{
  border-style: solid;
  border-width: 2px;
  border-radius: 2rem;
}

.button-green {
  background-color: green;
  border-color: white;
  color: white;
}

这看起来很正常，对吧？除了 之外，它看起来像一些常规的 HTML 和 CSS className。如果你不熟悉 React，class === className因为class是 JS 中的保留字，而 JSX 是嵌入了 JS 的 HTML，那么这是不可以的。

我在 React 中使用 CSS 时遇到的问题

在开始之前，我必须声明，我绝对不是 CSS 的专家或大师。我可以用 CSS 做一些看起来还不错的响应式规则。但我说不出什么疯狂的 CSS 技巧，也写不出纯 CSS 动画皮卡丘。

正因为如此，我甚至不会假装谈论 CSS 的所有缺陷或旨在修复这些缺陷的任何 CSS 新功能，所以我将放弃这个 2014 年的优秀资源。我让你决定它是否仍然有效！;)

全局命名空间❌

您是说我可以使用 BEM 吗？

到时候你就不用这么做了。

如果你看过我上面提供的链接，你会注意到全局命名空间是它在 CSS 中首先讨论的问题。然而，我们都感受到了这种震动，这就是 BEM 这样的命名约定存在的原因。

.button从我们的 CSS 示例来看，.button-green我们已经引入了 2 个全局命名空间。

随着应用程序规模的增长，我发现编写的 CSS 规则也在不断增加。通过一些小的调整创建不必要的重复样式，以及一些未使用的样式，使应用程序变得臃肿不堪。虽然有一些配置可以确保未使用的 CSS 不会包含在你的代码包中，但它们不会从你的代码库中消失，这很让人头疼。

松耦合❌

虽然你可以构建 React 应用，使组件样式与组件位于同一目录中，但组件文件中并没有任何内容严格地将它们绑定在一起。相反，你引用的是为选择器指定的规则。尽管文件结构如此，但这些样式可以在其他地方引用；这只是另一件需要考虑的事情。

笨重的控制❌

单纯使用 CSS 时，你几乎无法通过改变元素的 class 来控制所有样式的改变。虽然用原生 JavaScript 或 JQuery 之类的框架来控制样式似乎更自然，但用 React 时我总觉得这很 hack。你可以通过独立的组件直接访问视图，但我们却把所有这些逻辑都用在了引用不同 CSS class 组合上。

我了解内联样式

另一种无需任何模块即可为 React 应用添加样式的方法是使用内联样式。现在，别在意后面有人大喊内联样式有多糟糕，因为那其实就是我伪装的。我们都被教导说 HTML 中的内联样式很糟糕，而基于类的样式很棒。然而，这就是 JSX。

// Button.js
import React from 'react'

const Button = () => {
  const buttonGreen = {
    backgroundColor: "green",
    border: "2px solid white",
    borderRadius: "2rem"
    color: "white"
  };

  return(
    <button style={buttonGreen}>
      I think I'm green
    </button>
  )
}

这看起来不太糟糕吧？

你可能会注意到，这里的 CSS 规则看起来不太一样。我们没有使用短横线命名法 (Kebab Case)，而是使用了驼峰命名法 (Camel Case)。它们被映射到一个 JavaScript 对象中，其值以字符串形式用引号括起来。

全局命名空间✅

在我们的内联样式示例中，buttonGreen是该文件的本地变量，因此我们可以buttonGreen在整个应用程序中拥有任意数量的变量，而不会遇到任何冲突或遵循任何特定的命名约定！

松耦合✅

由于这些样式是本地定义的，除非你费力地导出和导入它们，否则你无法使用这些样式；理想情况下，应该有足够的步骤来阻止这些糟糕的事情发生。
我认为这也促使开发人员以更有针对性的方式使用 React 来创建可复用的通用组件。

笨重的控制✅

// Button.js
import React from 'react'

const Button = ({backgroundColour, colour, children}) => {
  const buttonStyles = {
    backgroundColor: backgroundColour,
    color: colour,
    border: "2px solid white",
    borderRadius: "2rem"
  };

  return(
    <button style={buttonStyles}>
      {children}
    </button>
  )
}

// SomePage.js
import React from 'react';
import Button from 'Button';

const SomePage = () => (
  <Button backgroundColour="blue" colour="white">I'm going to be blue</Button>
)

这是一个非常简单的例子，但我们可以看到，我们通过传入组件的一些 props 赋予了我们Button对颜色的具体控制权。我喜欢这种方法，因为它是自文档化的，并且将所有逻辑都保留在组件中；我清楚地知道组件中的 props 控制的是什么，而且组件的用法也非常清晰：它将 backgroundColour 设置为蓝色，将 colour 设置为白色。

我不喜欢内联样式的地方

使用对象作为样式

我不太喜欢这种样式语法。它本身就很不靠谱，需要把 CSS 转换成 JavaScript 对象，;用替换,，用 包裹规则""，还要把键名改成驼峰命名，这实在是太繁琐了。而且，对于你的设计师来说，这种方法也足够吓人，一眼看到就让人望而却步。

内联样式仍然是内联的

归根结底，这仍然是内联样式，并且您的 HTML 仍然会带有那些丑陋的样式属性。

我个人会在 React 中使用内联样式吗？

没有。

但这并不是 JS 中 CSS 的终结！现在有一些非常酷的包，它们可以做一些很酷的事情，并尝试解决 JS 中 CSS 的各种可读性、可扩展性和性能问题。

在本系列中，我将尝试研究这些解决方案的多样化池，无论它们是被高度评价的还是被隐藏的。

截至撰写本文时，我已经使用了 Styled Components、Emotion 和 JSS。如果您觉得哪个很酷，请随时留言！

如果你想关注我或在上面聊天，我也在推特上。我有时会在那里发布一些内容！