css in js的优势

什么是 css in js

用 js 的方式管理 css。

这段代码来自 styled-components 官网。
Button 是一个样式组件。

const Button = styled.a`
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
  background: transparent;
  color: white;
  border: 2px solid white;
  ${props =>
    props.primary &&
    css`
      background: white;
      color: palevioletred;
    `}
`;

css 发展历程

pure css

如果网站够小，使用css是没有问题的。但是随着网站的扩充，css会变的难以维护。

css preprocessor

css 预处理是用一种新语法去描述样式，最后会被编译成 css 文件，常见的Less、Sass。

优势

• 提供变量、mixin 等语法支持
• 解决兼容性问题

劣势

• 命名重复，为了名称不重复导致名称越来越长
• 两种维护方式，一种是 js 模块，一种是 scss 方式（全局变量文件，各种 mixin 文件）

为什么要用 css in js

css in js 解决了 css 到 dom 的 mapping 问题

css preprocessor 需要去配置 loader ，将 scss 文件转成 object ，通过 item-list key 来找到 scss 文件中对应的样式。

import styles from "./styles.scss";

<div className={styles["item-list"]} />;
:local(.item-list) {
  color: grey;
}

css in js 可以直接跳转，不需要依赖字符串去找到对应的样式了。
css in js 不仅解决映射的问题，还解决了代码重用的问题。
react 和 vue 这些框架的出现，前端就开始多了很多组件，就是为了代码重用。
现在一个样式就可以是一个组件，样式可以像一个模块一样重用，不需要污染全局命名了。

css in js 的优势

• 类名可以直接跳转
• 不需要依赖字符串去找到对应的样式了
• 本身就是一个模块，不需要关心命名冲突，懒加载等问题。
• 统一用 js 的方式管理，不存在 scss 变量和 js 变量