css - CSS 方案演进史 - 《重学前端》

OOCSS
- 优点：
- 缺点：
SMACSS
- 分类：
BEM
- 优点：
- 缺点：
Shadow DOM
- 优点：
- 缺点：
CSS-in-JS
- styled-componentsnts">styled-componentsnts
  - 优点：
  - 缺点：
styled-jsx">styled-jsx
tailwind css
CSS modules
CSS Houdini
- 参考链接：

参考：
copy form
CSS之路：css->less->moudleCss->styleComponet

CSS 方案演进史 - 图1

OOCSS

面向对象的 CSS ，独立于应用逻辑书写，鼓励 html 与 css 分离和代码的复用

OOCSS遵循两个原则：

独立的结构和样式
独立的容器和内容

具体实现上可以是拆分为基类和修饰类，将尽可能多的公共属性抽象到基础类，然后将每个变体的样式归类为修饰符类。

<div class="container">
  <div class="row">
    <div class="col-4">
        <button type="button" class="btn btn-success hidden">Success</button>
    </div>
    <div class="col-8">
        <button type="button" class="btn btn-primary">Primary</button>
    </div>
  </div>
</div>

优点：

css 复用率高，扩展性好；
具备良好的可读性和可维护性；
代码量比较少，天然 Atomic CSS；

缺点：

多人协作模式下，class 选择器容易冲突，没有解决命名空间的问题
基础类库开发周期时间偏长

SMACSS

通过结构化命名，将类名模组分组，达到可扩展的目的。与OOCSS相比，SMACSS 更像是一套模板指导 CSS 的书写。

<div id="section">
  <div class="l-flex">
    <div class="l-col l-col-4">
        <button type="button" class="btn-success is-hidden">Success</button>
    </div>
    <div class="l-col l-col-8">
      <!-- 扩展btn样式，创建子模块 -->
        <button type="button" class="btn-primary">Primary</button>
    </div>
  </div>
</div>

BEM

Block__Element—Modifier
使用 Block、Element、Modifier 描述页面结构

Block 即为区块，可以独立存在；
Element 可以理解为元素，它依附于 Block 存在，与 Block 使用 __连接；
Modifier 用于描述 Block 或 Element 的外观或状态，与他们使用 -- 连接;

<form class="form form--theme-xmas form--simple">
  <input class="form__input" type="text" />
  <input class="form__submit form__submit--disabled" type="submit" />
</form>

优点：

制定了一套易与理解的CSS编码规范；
可读性高，通过 class 的命名，可以得知元素的结构；
很大程度解决了命名冲突的问题；

缺点：

重新定义 Block 与 Element 的含义，容易造成混淆；
需要与页面结构并行维护一套CSS 逻辑；
命名过长，产出的 size 偏大；

Shadow DOM

Web components 标准的一部分，将封装的 Showdow DOM 附加到元素并控制其关联的功能。
在 Shadow DOM 中定义的 CSS 样式只会在 ShadowRoot 下生效，很好的实现了代码的隔离。

// js
let tmp1 = document.createElement('template');
tmp1.innerHTML = `
    <style>
    .btn {
      display: inline-block;
      font-weight: 400;
      line-height: 1.5;
      text-align: center;
      text-decoration: none;
      vertical-align: middle;
      user-select: none;
      border: 1px solid transparent;
      padding: .375rem .75rem;
      font-size: 1rem;
      border-radius: .25rem;
      transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    }
    .btn-primary {
      color: #fff;
      background-color: #0d6efd;
      border-color: #0d6efd;
    }
    </style>
    <button type="button" class="btn btn-primary">I'm in shadow dom!</button>
    <slot></slot>
`;
customElements.define('x-button', class extends HTMLElement {
  constructor() {
    super();
    let shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.appendChild(tmp1.content.cloneNode(true));
  }
});
// html
<x-button></x-button>

CSS 方案演进史 - 图2

优点：

面向未来的原生组件写法
与页面的其他代码天然隔离
可增强现有 HTML 标签，创建可重用的新标签（Custom Element）

缺点：

对平台实现有强依赖，浏览器支持度一般
目前只能使用 link 标签引入外部样式 (存在绘制闪烁的问题)，其他形式的外部样式 (例如全局的CSS重置) 无法渗透进 shadowDOM 内部 (已有提案解决）

CSS-in-JS

React原生自带内联样式属于CSS-In-Js的一种，
同时还有其他几种方案

styled-componentsnts

借助 js 语言的灵活性，使用 js 样式化组件，在组件的运行时，将CSS 附加到 DOM 当中。

import React from 'react';
import styled, { css } from 'styled-components';
const Button = styled.button`
    display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  user-select: none;
  border: 1px solid transparent;
  padding: .375rem .75rem;
  font-size: 1rem;
  border-radius: .25rem;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  ${props => props.primary && css`
    color: #fff;
    background-color: #0d6efd;
    border-color: #0d6efd;
  `}
`
// OR
// A new component based on Button, but with some override styles
const PrimaryButton = styled(Button)`
    color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
`;
export default ShowButton() {
  return (
    <div>
      <Button>Normal</Button>
      <Button primary>Primary</Button>
      <PrimaryButton>Primary</PrimaryButton>
    </div>
  )
}