2022 CSS 技术一瞥

• 支持函数
• 用 Ruby 写的，可能需要装 Ruby 相关环境，有时环境安装会有问题，碰 到过几次安装 node-sass 出错的情况
• SCSS 相比于 SASS，写法更接近原生的 CSS，需要写大括号，分号等

• 使用 JS 编译
• 比较容易添加到已有项目中

• 使用 JS 编译
• 内置了一些处理函数，能够处理繁重的计算

PostCSS is a JavaScript library that transforms CSS into JavaScript.

PostCSS 和上面三者区别比较大，它会先编译出 AST，以 JS 对象形式表示， 然后可以基于 AST 做很多事情，可以自己写插件去扩展，最后再编译回浏览 器识别的 CSS。

因此，PostCSS 除了本身这个库外，还有相关的插件生态圈，可以通过插件 去实现类似 SCSS 的功能。

相对于上面三者，扩展性更好，可以实现更多功能。

Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.

基于 Sass 打造的一套 CSS 框架，也支持 Less。Bootstrap 本身还提供了一些组件。

Bulma is a free, open source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces.

也是基于 Sass 的框架，更轻量，基于 Flexbox。

模块化的组织结构，你可以只引用某个模块，例如按钮。

A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

它实际上是一个 PostCSS 插件。

高度可定制化，通过 tailwind.config.js 文件进行定制。

相比于 Bootstrap 和 Bulma，它们都是将 CSS 模板做好提供给你，而 Tailwind 更像是提供你制作自己模板的工具。

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default

CSS Modules let you write styles in CSS files but consume them as JavaScript objects for additional processing and safety.

CSS Modules are very popular because they automatically make class and animation names unique so you don’t have to worry about selector name collisions.

就如名字一样，CSS modules 把 CSS 看作一个模块引入使用。

它需要把 CSS 定义到一个 css 文件中，然后引入这个文件，文件中的类名 会被处理成带作用域的。

引入后，相当于一个 JS 对象，通过类似 xxxStyle.title 的形式，引用对 应的样式。

最终会生成 .css 文件，可以预先加载，缓存。

除了全局作用域的写法特别，其它和正常写 CSS 没什么差别。

/* container.module.css */
.container {
  margin: 3rem auto;
  max-width: 600px;
}

import React from "react"
import * as containerStyles from "./container.module.css"
export default function Container({ children }) {
  return (
    <section className={containerStyles.container}>{children}</section>
  )
}

Styled component 会生成一个带有样式的组件。

你可以用语义更好的名字作为组件，例如写个 Title 组件，替换原来的 <h1 style="…" className="…">, 语义化更好。

由于样式和组件捆绑，所以要删的时候很容易删，不用怎么担心会不会影响其它。

不能生成 .css 文件，因此无法提前加载，无法缓存 CSS。

可以根据组件上的 props，决定组件怎么渲染。

const Button = styled.a`
  ${props => props.primary && css`
    background: white;
    color: black;
  `}
`
render(
  <div>
    <Button
      href="https://github.com/styled-components/styled-components"
      target="_blank"
      rel="noopener"
      primary
    >
      GitHub
    </Button>

    <Button as={Link} href="/docs">
      Documentation
    </Button>
  </div>
)

Emotion 通过引入 @emotion/styled 也可以支持 Styled components 的写法。

也可以不用 styled 写法，而是定义一个个 CSS 然后组合起来。

可以通过用字符串定义 const textColor = css`color: red;` 或者对象形 式定义 const textColor = css({ color: "red" }) 最后会返回一个 className。

如果不用 styled 方式定义，就不用通过 prop 来获取状态，可以直接访问 外部变量。

总体上，感觉 Emotion 和 Styled component 都是不错的 CSS-in-JS 技术， Emotion 语法看起来更灵活一些。

import { css, cx } 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>
)