React 中的 CSS

如果你刚接触 React，你可能会对组件样式的多种写法感到疑惑。在这篇文章中，我们将讨论这些不同的方法，它们各自的优缺点，以及如何在平时的项目中去使用它们。  

我们不妨从最原始但在项目中不常见的方法开始，再逐步去讲解一些更现代且更为实际的方法：  

 全局 CSS 文件：和组件代码相隔离的 CSS 文件，就像传统的 HTML 和 CSS 之间的关系。

 JavaScript 样式：每一个组件都有一个存有样式的 JS 对象，二者共存于同一个 .js / .jsx 文件当中，并通过 styles 属性将样式传递给组件。

 模块化 CSS：每个组件都有自己独立的 CSS 文件，它将被 import 到 JS/JSX 文件中并应用于 className 属性以实现带作用于的类名系统。

 样式化组件：通过使用 glamorous/emotion/styled-components 之类的库，可创建一个可复用的模块化带样式组件。

全局 CSS 文件 | Global CSS Files

通过名字就不难看出，使用这个方式就意味着：所有的样式都被定义在一个或多个 CSS 文件中，并且这些文件和组件对应的 JS 代码将完成的分割开来。不幸的是，这种做法迄今为止还很常见，因为许多后端框架为开发者们培养了这种思维模式，它鼓励为 CSS 和 JS 这种前端资源文件提供单独的文件夹。  

在这种结构下的项目目录大概会是这个样子： 

render 函数中的代码应该和传统的 HTML 颇为相似： 

再次不幸的是，保持文件的分离不仅是不必要的，还为进一步的优化制造了难题，比如样式的作用域问题。使用这种方式就以为着：仍然会在项目中碰到常规 HTML 和 CSS 的之间的命名冲突和一些意外的副作用。 

JavaScript 样式 | JavaScript Stylesheets

在这种方案中，一个组件的样式会被定义在其自身的 JS 文件中。样式被定义在一个常规的 JS 对象中，当然了，刚开始写的时候需要一个短暂的适应期。这是写法上的一小步，却是从全局样式到单个组件样式的一大步。这是 React-Native 中默认的组件样式写法，如果想在 Web 项目中使用的话，需要借助 radium 或 aphrodite 之类的库。 

模块化样式 | Modular Stylesheets

在这个方案中，组件的样式和组件本身的 JS 文件在同一级目录下，使用时只需要将其引入对应的 JS 文件即可。这不仅让 CSS 文件清爽并且更为可读，并且为实现类名的命名空间提供了可能，一个实用的小技巧：根据业务场景为组件赋予一个独一无二的类名，以确保没有全局的样式冲突，这就以为着你可以在不同的组件中使用相同的类名，用不着去担心命名冲突的问题。  

你大可以使用 sass 或 less，通过变量的定义和模块的划分，可以使样式文件更加的干净清爽。  

这时的项目结构可能长这样： 

在每个组件内部，仅需要将样式文件引入并在 className 属性上传递类名，就可以享受模块化 CSS 带来的便利：

通过观察编译后的 HTML 文件，你会看到一个类似：<div class="header--container_7a1i0" /> 的标签，这就是 React 避免样式冲突的方法。但这样做也有缺点，碰上需要使用组合类或者条件类的时候，你需要额外使用诸如 classnames 之类的库。 

样式化组件 | Stylized Components

基于创建干净/模块化/可复用的组件块，这种方法在慢慢变得流行起来，究其根本，是将组件的结构(HTML) 和 样式(CSS) 封装在一起。开发者将不再在 render 函数中写常规的 HTML 标签并通过 className 的桥接把写在别处的样式应用于此，取而代之的是创建一个“自带样式的”组件，也就是说，样式这种东西在这个组件定义的时候就有了。  

举个例子，通过使用 glamorous(已停止维护) 或 styled-components 之类的库，你可以这么去定义一个自带样式的组件：

你可以把这些自带样式的组件当作一个微粒度的 React 组件。对于一个不带业务逻辑确需要一些特定样式的组件来说，这种写法比之前需要将 JS 文件和 CSS 文件分开的写法要更加的清晰。

总结 | Conclusion

在 React 组件中应用样式的方法从 global CSS，到 JavaScript stylesheets 和 modular stylesheets，再到今天的 stylized components。虽然 stylized components 并不能完美适用于各种场景，但大体上来说，React 社区仍然在这个方向上努力 —— 在不需要隔离组件文件的基础上，创建一个干净/模块化/可复用性高的 HTML 和 CSS 的组合组件。

参考文章: https://alligator.io/react/react-css/