CSS 方案演进史 - Githubissues

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>

优点：

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

缺点：

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

CSS-in-JS

借助 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>
  )
}

优点：

很轻松的实现css 与 js 变量共享，易于维护；
代码中只存在 javaScript，具有跨平台优势；
不需借助编译工具，即可提取 Critical CSS；

缺点：

风格比较激进
有一定学习理解门槛
没有统一的标准约束

CSS modules

利用 webpack 之类的工具，编译阶段将类名加上随机的 hash 值，以回避命名冲突的问题

CSS Houdini

开放css底层api，开发者可通过接口自行扩展css

文章介绍了几种前端发展中出现的css方案，其实在解决的下面提及的几个问题：

作用域（全局 -> 组件）
模块化与代码复用（提高可维护性）
CSS Atomic 化（更小的代码尺寸）
提取 Critical CSS（更快的首屏加载体验）
跨平台（Write once，run every where）

方案可能会过时，但其中折射隐含的思想，会以新的形式流传进化，它值得每个前端开发人员深入学习与思考。总而言之，技术没有银弹，实际开发中亦需要不断权衡利弊，明确使用场景，选择合适的方法维护项目。

参考链接：

https://caniuse.com/ http://oocss.org/ http://smacss.com/ https://github.com/Polymer/polymer https://www.cssinjsplayground.com/ https://styled-components.com/ https://github.com/webpack-contrib/css-loader#modules https://github.com/WICG/webcomponents/blob/gh-pages/proposals/css-modules-v1-explainer.md https://developer.mozilla.org/zh-CN/docs/Web/Houdini https://www.smashingmagazine.com/2016/03/houdini-maybe-the-most-exciting-development-in-css-youve-never-heard-of/

leeword / blog

CSS 方案演进史 #1