leeword / blog

总结 沉淀 分享
3 stars 0 forks source link

CSS 方案演进史 #1

Open leeword opened 3 years ago

leeword commented 3 years ago

image

OOCSS

面向对象的 CSS ,独立于应用逻辑书写,鼓励 htmlcss 分离和代码的复用

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>
优点:
缺点:

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>
分类:

优缺点:同 OOCSS

BEM

Block__Element--Modifier 使用 BlockElementModifier 描述页面结构

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

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>

image

优点:
缺点:

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 modules

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

CSS Houdini

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

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

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

参考链接:

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/