组件化的 CSS

Why

传统 CSS 的书写方式已然不适合主流前端框架盛行的组件化开发。 组件化下的 CSS 应该符合以下条件👇

• 可以编写局部CSS：具备独立作用域，不污染其他组件内样式
• 可以编写动态CSS：可以获取当前组件的一些状态，根据状态变化生成不同的 CSS 样式
• 支持所有的 CSS 特性：伪类、动画、媒体查询等

当然，符合原生 CSS 编写逻辑也非常重要。

How

React 里写 CSS 并不像 Vue 那样有统一的标准，所以催生出各种各样的写法和CSS库。

内联样式

优势

• 样式之间不会有冲突
• 可以动态获取当前state中的状态 缺点
• 要使用驼峰标识
• 代码混乱
• 不兼容所有特性（伪类/伪元素）

Live Editor

Result

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

普通 CSS

以.css作为后缀的文件，然后再引入，很熟悉的方式。 问题就是这样的样式是全局样式，不能生成组件局部样式，权重大的标签会层叠权重小的样式。

CSS Modules

使用很简单，像使用普通 CSS 一样导入即可。关键在于使用.module.css作为文件名后缀，并在导入时取 name what ever you want，命中className时通过name.className.

import styles from "./index.module.css";
<div className={styles.buttons}>  <Link    className="button button--secondary button--lg"    to="/docs/intro"  >    🌌 Start with Tutorial  </Link></div>

css modules 解决了局部作用域的问题，同时也有一些问题✍

• 不能使用连接符（item-title），这在JavaScript中不被识别，需要使用驼峰命名
• 不方便动态修改某些样式，仍然需要使用内联样式

CSS-in-JS

CSS-in-JS 是一种模式，CSS 由 JavaScript 生成而不是在外部文件中定义。这样，All in JS 就成了🤷‍♀️。 当然，这样的开发模式并不受到所有开发者的追捧： Stop using CSS in JavaScript for web development

styled-components && emotion

That's all👏