css你要知道的基础

css 方案

排序	库	年份	场景
1	vanilla-extract	2021 年的黑马	主打零运行时与 TS 支持。零运行时是通过 @vanilla-extract/webpack-plugin 插件在编译时就完成内容输出
2	styled-components	CSS-In-JS 框架	版本间出现过运行时不兼容，但不得不说是这个方向的鼻祖
3	stitches	主打零运行时	第一名很像，也主打零运行时，不过没有提对 TS 是否友好
4	Twin	实现了 CSS-In-JS 版的语法	Tailwind CSS 实现了 CSS-In-JS 版的语法，可以认为是内置了一套最佳实践的 CSS-In-JS 库，也没解决太大的痛点，只是如果你同时喜欢 Tailwind CSS 与 CSS-In-JS，可能会爱屋及乌的选择 Twin。
5	Emotion	相对完备的库	基本上 CSS-In-JS 各类语法都能支持

SCSS: 49.5%

Tailwind: 35%

Styled Components: 33.5%

是一种 React 下的 css in js 方案。基于 js 的 tagged templates 特性实现。tagged template 是 template literal (template strings) 的一种特殊形式，允许传递自定义的字符串解析函数。
其好处很明显有这样一些：
在 JS 里面直接写 CSS 对于熟悉 CSS 的程序员来说更容易，不用使用 React 的 style api，语法上无转换成本。
更符合组件化的文件管理方式。组件自带样式，添加或者删除都比较容易，不用到全局样式文件里去找。
生成的 CSS 自带作用域，不担心重复或者冲突。
CSS 里面可以通过传入组件的 props 变量实现简单的逻辑。
缺点：
某些时候生成的 CSS 可能比较冗余，且 class 名字可读性不太好，但有插件可以改善。
定义很多 styled component 会生成过多的 HoC，嵌套比较多。且掺杂了太多仅仅是为了样式定义而创建的组件的 jsx, 整体可理解性可能不好。

yarn add styled-components -D;
import styled from 'styled-components';
/*
创建一个Title组件，
将render一个带有样式的h1标签
*/
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;
/*
创建一个Wrapper组件，
将render一个带有样式的section标签
*/
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

// 使用 Title and Wrapper 得到下面效果图
render(
  <Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>
);

CSS Modules: 24.9%

学过网页开发就会知道，CSS 不能算编程语言，只是网页样式的一种描述方法。
为了让 CSS 也能适用软件工程方法，程序员想了各种办法，让它变得像一门编程语言。从最早的Less、SASS，到后来的 PostCSS，再到最近的 CSS in JS，都是为了解决这个问题。

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

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

Less