一、传统CSS的痛点

CSS 从一开始就是 Web 技术的核心之一，而且近年来 CSS 越来越标准化，功能也越来越强。但是 CSS（截止到目前标准化的）尚不具备现代前端组件化开发所需要的部分领域知识和能力，所以需要其他技术来补足。

这些知识和能力主要包括四个方面：

组件样式的作用域需要控制在组件级别；
组件样式与组件需要在源码和构建层面建立更强的关联；
组件样式需要响应组件数据变化；
组件样式需要有以组件为单位的复用和扩展能力。

因此在现代前端组件化开发的历程中社区涌现了非常多的解决方案，主要分为以下几种：

1、命名规范

为了能够将组件样式的作用域控制在组件级别我们能想到最简单直接的方案当然是制定 class 类名定义规范，目前业内比较普遍使用的是 BEM 规范，例如

// style.css
.btn {
  background-color: white;
}
.btn__icon {
  color: black;
}

import './stype.css'
const TButton = props => {
  return (
    <button className="btn">
      <icon className="btn__icon" name={props.incon}></icon>
    </button>
  )
}

通过命名规范人为保证组件件的样式隔离，这种方式会存在如下问题：

非常依赖开发团队的代码规范化
组件样式没有办法响应组件数据的变化
没有提供非常细粒度的复用能力

因此这种方式在现代前端大型业务应用中使用并不广泛，这种方式比较适合基础组件库的开发，主要原因是：

使用class开发的组件库，业务方可以很方便地由组件样式的覆盖
基础组件库一般由专门的团队开发，命名规范能统一
使用最基础的class，能有效降低组件库的大小

2、Inline styling

无论是 Vue 还是 React，其实都提供了动态 style 样式的不同实现，以 React 的 JSX 的语法为例：

const App = props => {
  return (
    <div style={{color: "red"}}>123</div>
  )
}

相较于命名规范的实现，Inline Styling 提供了非常直接简单的响应组件内状态变化的方案，同时我们也可以通过抽取部分样式为变量实现样式复用或扩展。

但是这种方式如果在央视属性过多的情况下会让代码显得非常混乱，因此 Inline Styling 往往用于元素部分属性调整的情况。

3、CSS Modules

CSS Module 是目前使用的比较多的解决方案，它不是将 CSS 改造成编程语言，而是在 CSS 的基础上通过构建工具对其进行了扩展，针对前面我们提到的 CSS 面对现代前端组件化开发能力的不足给出了自己的解决方案。

3.1、组件级的隔离：局部作用域

CSS Modules 实现局部作用域的核心是使用独一无二的 class，以下面 React 组件为例：

// App.jsx
import React from 'react';
import style from './App.css';

export default () => {
  return (
    <h1 className={style.title}>
      Hello World
    </h1>
  );
};

/*  App.css */
.title {
  color: red;
}

构建工具会将类名 style.title 编译成一个哈希字符串。

<h1 class="_3zyde4l1yATCOkgn-DBWEL">
  Hello World
</h1>

App.css 也会同时被编译。

._3zyde4l1yATCOkgn-DBWEL {
  color: red;
}

这样一来，这个类名就变成独一无二了，只对App组件有效。

大家可以看到 CSS Modules 实现的核心就在构建工具处理的这个阶段，我们以 webpack 为例，使用 webpack 的 css-loader 可以在打包项目的时候指定该样式的 scope，例如

// webpack config
module.exports = {
  module: {
    loaders: [
      { 
        test: /.css$/, 
        loader: 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' 
      },
    ]
  },
  ...
}

这里的 css-loader 会将类名 style.title 转变成 title__app__hash 的格式。

3.2、更灵活的限制：全局作用域

CSS Modules 允许使用 :global(.className) 的语法，声明一个全局规则。凡是这样声明的 class，都不会被编译成哈希字符串。举个例子：

/* App.css */
.title {
  color: red;
}

:global(.title) {
  color: green;
}

// APP.jsx
import React from 'react';
import styles from './App.css';

export default () => {
  return (
    // 注意这里的类名写法是普通写法
    <h1 className="title">
      Hello World
    </h1>
  );
};

3.3、样式的复用：class 的继承

在 CSS Modules 中，一个选择器可以继承另一个选择器的规则，这称为"组合（composition）"。

/* App.css */
.className {
  background-color: blue;
}

.title {
  composes: className;
  color: red;
}

import React from 'react';
import style from './App.css';

export default () => {
  return (
    <h1 className={style.title}>
      Hello World
    </h1>
  );
};

这种情况下 App.css 文件会被编译成如下内容：

._2DHwuiHWMnKTOYG45T0x34 {
  color: red;
}

._10B-buq6_BEOTOl9urIjf8 {
  background-color: blue;
}

而 h1 元素会被编译成 <h1 class="_2DHwuiHWMnKTOYG45T0x34 _10B-buq6_BEOTOl9urIjf8"> 。

3.4、变量的引入

CSS Modules 支持使用变量，不过需要安装 postcss-loader 和 postcss-modules-values。

// webpack config
const values = require('postcss-modules-values');

module.exports = {
  module: {
    loaders: [
      { 
        test: /.css$/, 
        loader: 'css-loader?modules!postcss-loader
      },
    ]
  },
  postcss: [
    values
  ]
  ...
}

接着，在 colors.css 里面定义变量。

@value blue: #0c77f8;
@value red: #ff0000;
@value green: #aaf200;

App.css 可以引用这些变量。

3.5 总结

CSS Modules 的这种做法非常类似 Angular 与 Vue 对样式的封装方案，其核心是以 CSS 文件模块为单元，将模块内的选择器附上特殊的哈希字符串，以实现样式的局部作用域。在 React 项目中我们通过引入相关打包工具配置同样可以实现相同的效果，对于大部分应用开发场景已经可以完全支持。

二、CSS-in-JS

CSS-in-JS 顾名思义是在 JS 中直接编写 CSS 的技术，也是 React 官方推荐的编写 CSS 的方案，在 github.com/MicheleBert… 这个代码仓库中我们可以看到 CSS-in-JS 相关的 package 已经有60多个了。这里我们主要介绍 emotion ，这个框架比起其他框架更注重开发者体验（Developer Experience），功能相对完整，也比其他一些专注于用 JS、TS 语法写样式的框架更“CSS”一些。

1、基本使用

import { css } from '@emotion/react'

const color = 'white'

render(
  <div
    css={css`
      padding: 32px;
      background-color: hotpink;
      font-size: 24px;
      border-radius: 4px;
      &:hover {
        color: ${color};
      }
    `}
  >
    Hover to change color.
  </div>
)

可以看到 emotion 对于组件内样式隔离、数据变量都有着比较好的支持，而且对于伪类选择器等 CSS 属性也有着比较好的支持，除此之外，比较常用还有子元素选择器：

import { css } from '@emotion/react'

render(
  <div
    css={css`
      padding: 32px;
      background-color: hotpink;
      & > span {
       background-color: blue;
      }
    `}
  >
    Hover to change color.
  </div>
)

子选择器 > 对于 KanbanColumn 组件是必要的。如果去掉 > ，仅保留空格，上面三个子选择器就变成了后代选择器，无论在 DOM 树中的深度如何，只要是子孙元素中的 span 元素就会被应用上面的样式，这就会污染传入的 children 子组件的样式，偏离了我们样式隔离的目标。

2、样式的组合与复用

最简单直接的样式复用方式当然是声明一个值为 css 函数执行结果的常量，然后可以在不同组件中赋给 HTML 元素的 css 属性：

import { css } from '@emotion/react'

const commonStyles = css`
  padding: 32px;
  background-color: hotpink;
  & > span {
   background-color: blue;
  }
`}

render(
  <div
    css={commonStyles}
  >
    Hover to change color.
  </div>
)

在此基础上我们也可以选择更加灵活的样式组合：

import { css } from '@emotion/react'

const commonStyles = css`
  padding: 32px;
  background-color: hotpink;
  & > span {
   background-color: blue;
  }
`}

const color = 'white'

render(
  <div
    css={
      css`
        ${commonStyles}
        &:hover {
          color: ${color};
        }
      `
    }
  >
    Hover to change color.
  </div>
)

除此之外如果要组合两个或更多 css 函数返回值的变量，还可以用数组的写法，如果其中有重复的 CSS 属性（如 color: red 和 color: blue），那么后面的会覆盖前面的：

<div css={[style1, style2, style3]}>...</div>

3、基本原理

为了说明 emotion 在背后做了一些什么我们先用 emotion 写一个基本组件：

import React, { useState } from 'react'
import { css } from '@emotion/react'

const KanbanBoard = ({ children }) => (
  <main css={css`
    flex: 10;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    margin: 0 1rem 1rem;
 `}>{children}</main>
)

把开发者工具切换到检查器页签，可以看到标签的 class 属性值变成了一个貌似没有意义的类名 css-130tiw0-KanbanBoard，而这个 CSS 类是在 HTML 文档的里动态插入的

类名中的 130tiw0 是个哈希值，用来保证类名在不同组件间的唯一性，这自然就避免了一个组件的样式污染另一个组件。你不妨将类样式代码格式化，会得到如下片段：

.css-130tiw0-KanbanBoard {
  -webkit-flex: 10; 
  -ms-flex: 10;
  flex: 10; 
  display: -webkit-box; 
  display: -webkit-flex; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-flex-direction: row; 
  -ms-flex-direction: row; 
  flex-direction: row; 
  gap: 1rem; 
  margin: 0 1rem 1rem;
}

貌似比一开始手写的代码增加了几行？是的，增加的这几行中，-webkit-、 -ms- 这样的前缀称作Vendor Prefix 浏览器引擎前缀，浏览器厂商用这种方式来引入尚未标准化的、实验性的 CSS 属性或属性值。为了提高浏览器兼容性，emotion 框架会自动为较新的 CSS 标准加入带有前缀的副本，不认识这些前缀的浏览器会忽略这些副本，而老版本浏览器会各取所需，这样只需按最新标准编写一次 CSS，就可以自动支持新老浏览器。

这儿 emotion 实际上是做了以下三个事情：

将样式写入模板字符串，并将其作为参数传入 css 方法。
根据模板字符串生成 class 名，并填入组件的 class="xxxx" 中。
将生成的 class 名以及 class 内容放到 style 标签中，然后放到 html 文件的 head 中。

4、补充

从字面上看，CSS-in-JS 就是在 JS 里写 CSS，反过来说 CSS 需要 JS 才能起作用。原生的 JS 操作 CSS 无外乎下面五种方式：

通过 DOM API 设置元素的 style 属性，为元素加入内联（Inline）样式；
通过 DOM API 设置元素的 className 属性，为元素关联现有的类（Class）样式；
通过 DOM API 在页面文档中动态插入包含 CSS 规则文本的 <style> 标签；
第 3 条的变体：通过 CSSOM 的 CSS StyleSheet 对象动态修改页面中的 CSS 规则；
非运行时方案：在编译阶段把 JS 中的 CSS 通过 AST（Abstract Syntax Tree，抽象语法树）剥离出来，生成静态 CSS 文件并在页面中引用。

因此无论是哪一种 CSS-in-JS 框架，它们的内部实现最终都会落地于以上五种方式之一或组合。

事实上，不同 CSS-in-JS 框架之间不仅仅是内部实现方式的大同小异，其使用 API 也愈发形成事实上的统一，目前最受欢迎的两个解决方案是 emotion 和 styled-components 在接口上使用同样的接口设计：CSS prop 与样式组件：

// CSS prop
import { css } from '@emotion/css'

const color = 'white'

render(
  <div
    className={css`
      padding: 32px;
      background-color: hotpink;
      font-size: 24px;
      border-radius: 4px;
      &:hover {
        color: ${color};
      }
    `}
  >
    Hover to change color.
  </div>
)

import styled from '@emotion/styled'

const Button = styled.button`
  padding: 32px;
  background-color: hotpink;
  font-size: 24px;
  border-radius: 4px;
  color: black;
  font-weight: bold;
  &:hover {
    color: white;
  }
`

render(<Button>This my button component.</Button>)

这两种 API 接口模式代表着两种组件化样式风格。css prop 可以算是内联样式的升级版，用户定义的内联样式以 JSX 标签属性的方式与组件紧密结合，可以帮助用户快速迭代开发，让用户可以更快速的定位问题。不过由于样式直接内嵌在 JSX 中，势必在一定程度上会影响组件代码的可读性。

样式组件更像是 CSS 的组件化封装，将样式抽象为语义化的标签，把样式从组件实现中分离出来，让 JSX 结构更“干净整洁”。相对而言，样式组件定义的样式不如内联样式更方便直接，而且需要给额外多出来的样式组件定义新的标签名，会在一定程度上影响开发效率；但从另外一个角度来说，样式组件以更规范的接口提供给团队复用，适合有成熟确定的设计语言的组件库或是产品。

三：PostCss

1: 什么是postcss

我们知道，CSS工程化面临着诸多问题，而解决这些问题的方案多种多样。
如果把CSS单独拎出来看，光是样式本身，就有很多事情要处理。
既然有这么多事情要处理，何不把这些事情集中到一起统一处理呢？
PostCss就是基于这样的理念出现的。
PostCss类似于一个`编译器`，可以将样式源码编译成最终的CSS代码。

2: 处理流程

2.1: 看上去是不是和LESS、SASS一样呢？

但PostCss和LESS、SASS的思路不同，它其实只做一些代码分析之类的事情，将分析的结果交给插件，具体的代码转换操作是插件去完成的

2.2: 官方的一张图更能说明postcss的处理流程

官网地址：postcss.org/

这一点有点像webpack，webpack本身仅做依赖分析、抽象语法树分析，其他的操作是靠插件和加载器完成的。

3: 安装 postcss

$ npm i -D postcss

postcss库提供了对应的js api用于转换代码。

如果你想使用postcss的一些高级功能，或者想开发postcss插件，就要api使用postcss，api的文档地址是：api.postcss.org/

4： postcss-cli

不过绝大部分时候，我们都是使用者，并不希望使用代码的方式来使用PostCss。

因此，我们可以再安装一个postcss-cli，通过命令行来完成编译。

$ npm i -D postcss-cli

postcss-cli提供一个命令，它调用postcss中的api来完成编译

$ postcss 源码文件 -o 输出文件

5：配置文件

和webpack类似，postcss有自己的配置文件，该配置文件会影响postcss的某些编译行为。

配置文件的默认名称是：postcss.config.js

module.exports = {
    map: false, //关闭source-map
}

6：插件

光使用postcss是没有多少意义的，要让它真正的发挥作用，需要插件。

postcss的插件市场：www.postcss.parts/

下面罗列一些postcss的常用插件。

6.1 postcss-preset-env

过去使用postcss的时候，往往会使用大量的插件，它们各自解决一些问题。

这样导致的结果是安装插件、配置插件都特别的繁琐。

于是出现了这么一个插件postcss-preset-env，它称之为postcss预设环境，大意就是它整合了很多的常用插件到一起，并帮你完成了基本的配置，你只需要安装它一个插件，就相当于安装了很多插件了。

安装好该插件后，在postcss配置中加入下面的配置。

module.exports = {
    plugins: {
        "postcss-preset-env": {} // {} 中可以填写插件的配置
    }
}

6.1.1 自动的厂商前缀

某些新的css样式需要在旧版本浏览器中使用厂商前缀方可实现。

例如：

::placeholder {
    color: red;
}

该功能在不同的旧版本浏览器中需要书写为：

::-webkit-input-placeholder {
    color: red;
}
::-moz-placeholder {
    color: red;
}
:-ms-input-placeholder {
    color: red;
}
::-ms-input-placeholder {
    color: red;
}
::placeholder {
    color: red;
}

要完成这件事情，需要使用autoprefixer库。

而postcss-preset-env内部包含了该库，自动有了该功能。

如果需要调整兼容的浏览器范围，可以通过下面的方式进行配置。

方式1：在postcss-preset-env的配置中加入browsers

module.exports = {
    plugins: {
        "postcss-preset-env": {
            browsers: [
                "last 2 version",
                "> 1%"
            ]
        } 
    }
}

方式2【推荐】：添加 .browserslistrc 文件 创建文件.browserslistrc，填写配置内容

last 2 version
> 1%

方式3【推荐】：在package.json的配置中加入browserslist

"browserslist": [
    "last 2 version",
    "> 1%"
]

browserslist是一个多行的（数组形式的）标准字符串。

它的书写规范多而繁琐，详情见：github.com/browserslis…

一般情况下，大部分网站都使用下面的格式进行书写

last 2 version
> 1% in CN
not ie <= 8

last 2 version: 浏览器的兼容最近期的两个版本
> 1% in CN: 匹配中国大于1%的人使用的浏览器， in CN可省略
not ie <= 8: 排除掉版本号小于等于8的IE浏览器

默认情况下，匹配的结果求的是并集。

你可以通过网站：browserl.ist/ 对配置结果覆盖的浏览器进行查询，查询时，多行之间使用英文逗号分割

browserlist的数据来自于CanIUse网站，由于数据并非实时的，所以不会特别准确。

6.1.2 未来的CSS语法

CSS的某些前沿语法正在制定过程中，没有形成真正的标准，如果希望使用这部分语法，为了浏览器兼容性，需要进行编译

过去，完成该语法编译的是cssnext库，不过有了postcss-preset-env后，它自动包含了该功能。

你可以通过postcss-preset-env的stage配置，告知postcss-preset-env需要对哪个阶段的css语法进行兼容处理，它的默认值为2

"postcss-preset-env": {
    stage: 0
}

一共有5个阶段可配置：

Stage 0: Aspirational - 只是一个早期草案，极其不稳定
Stage 1: Experimental - 仍然极其不稳定，但是提议已被W3C公认
Stage 2: Allowable - 虽然还是不稳定，但已经可以使用了
Stage 3: Embraced - 比较稳定，可能将来会发生一些小的变化，它即将成为最终的标准
Stage 4: Standardized - 所有主流浏览器都应该支持的W3C标准

了解了以上知识后，接下来了解一下未来的css语法，尽管某些语法仍处于非常早期的阶段，但是有该插件存在，编译后仍然可以被浏览器识别

6.1.2.1 变量

变量——未来的css语法是天然支持变量的。

在:root{}中定义常用变量，使用--前缀命名变量

:root{
    --lightColor: #ddd;
    --darkColor: #333;
}

a{
    color: var(--lightColor);
    background: var(--darkColor);
}

编译后，仍然可以看到原语法，因为某些新语法的存在并不会影响浏览器的渲染，尽管浏览器可能不认识如果不希望在结果中看到新语法，可以配置postcss-preset-env的preserve为false

6.1.2.2 自定义选择器

@custom-selector :--heading h1, h2, h3, h4, h5, h6;
@custom-selector :--enter :focus,:hover;

a:--enter{
    color: #f40;
}

:--heading{
    font-weight:bold;
}

:--heading.active{
    font-weight:bold;
}

编译后

a:focus,a:hover{
    color: #f40;
}

h1,h2,h3,h4,h5,h6{
    font-weight:bold;
}

h1.active,h2.active,h3.active,h4.active,h5.active,h6.active{
    font-weight:bold;
}

6.1.2.3 嵌套

与LESS相同，只不过嵌套的选择器前必须使用符号&

.a {
    color: red;
    & .b {
        color: green;
    }

    & > .b {
        color: blue;
    }

    &:hover {
        color: #000;
    }
}

编译后

.a {
    color: red
}

.a .b {
    color: green;
}

.a>.b {
    color: blue;
}

.a:hover {
    color: #000;
}

6.2 postcss-apply

该插件可以支持在css中书写属性集类似于LESS中的混入，可以利用CSS的新语法定义一个CSS代码片段，然后在需要的时候应用它

:root {
  --center: {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  };
}

.item{
    @apply --center;
}

编译后

.item{
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

实际上，该功能也属于cssnext，不知为何postcss-preset-env没有支持

6.3 postcss-color-function

该插件支持在源码中使用一些颜色函数

body {
    /* 使用颜色#aabbcc，不做任何处理，等同于直接书写 #aabbcc */
    color: color(#aabbcc);
    /* 将颜色#aabbcc透明度设置为90% */
    color: color(#aabbcc a(90%));
    /* 将颜色#aabbcc的红色部分设置为90% */
    color: color(#aabbcc red(90%));
    /* 将颜色#aabbcc调亮50%（更加趋近于白色），类似于less中的lighten函数 */
    color: color(#aabbcc tint(50%));
    /* 将颜色#aabbcc调暗50%（更加趋近于黑色），类似于less中的darken函数 */
    color: color(#aabbcc shade(50%));
}

编译后

body {
    /* 使用颜色#aabbcc，不做任何处理，等同于直接书写 #aabbcc */
    color: rgb(170, 187, 204);
    /* 将颜色#aabbcc透明度设置为90% */
    color: rgba(170, 187, 204, 0.9);
    /* 将颜色#aabbcc的红色部分设置为90% */
    color: rgb(230, 187, 204);
    /* 将颜色#aabbcc调亮50%（更加趋近于白色），类似于less中的lighten函数 */
    color: rgb(213, 221, 230);
    /* 将颜色#aabbcc调暗50%（更加趋近于黑色），类似于less中的darken函数 */
    color: rgb(85, 94, 102);
}

6.4 postcss-import

该插件可以让你在postcss文件中导入其他样式代码，通过该插件可以将它们合并

由于后续的课程中，会将postcss加入到webpack中，而webpack本身具有依赖分析的功能，所以该插件的实际意义不大

6.5 stylelint

官网：stylelint.io/ 在实际的开发中，我们可能会错误的或不规范的书写一些css代码，stylelint插件会即时的发现错误

由于不同的公司可能使用不同的CSS书写规范，stylelint为了保持灵活，它本身并没有提供具体的规则验证

你需要安装或自行编写规则验证方案

通常，我们会安装stylelint-config-standard库来提供标准的CSS规则判定

安装好后，我们需要告诉stylelint使用该库来进行规则验证

告知的方式有多种，比较常见的是使用文件.stylelintrc

//.styleintrc
{
  "extends": "stylelint-config-standard"
}

此时，如果你的代码出现不规范的地方，编译时将会报出错误

body {
    background: #f4;
}

发生了两处错误：

缩进应该只有两个空格
十六进制的颜色值不正确

如果某些规则并非你所期望的，可以在配置中进行设置

{
    "extends": "stylelint-config-standard",
    "rules": {
        "indentation": null
    }
}

设置为null可以禁用该规则，或者设置为4，表示一个缩进有4个空格。具体的设置需要参见stylelint文档：stylelint.io/

但是这种错误报告需要在编译时才会发生，如果我希望在编写代码时就自动在编辑器里报错呢？

既然想在编辑器里达到该功能，那么就要在编辑器里做文章

安装vscode的插件stylelint即可，它会读取你工程中的配置文件，按照配置进行实时报错

实际上，如果你拥有了stylelint插件，可以不需要在postcss中使用该插件了。

7：......

参考资料

CSS Modules 用法教程 - 阮一峰的网络日志

css工程化(二)