zhangdizhangdi

工程化

预处理器

后处理器

PostCSS 可以称作为 CSS 界的 Babel，它的实现原理是通过 AST 去分析我们的 CSS 代码，然后将分析的结果进行处理。

常用的 PostCSS 使用场景有：

  • 配合 stylelint 校验 css 语法
  • 自动增加浏览器前缀 autoprefixer
  • 编译 css next 的语法

构建

Webpack

Vite

模块化

  • Vue 的scoped
  • CSS Modules
  • CSS in JS
  • 命名规则

CSS Modules

css
/* style.css */
.className {
  color: green;
}
js
import styles from './style.css'

element.innerHTML = '<div class="' + styles.className + '">'

CSS in JS

js
const Button = styled.button`
  color: #bf4f74;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid #bf4f74;
  border-radius: 3px;
`

render(
  <div>
    <Button>Normal Button</Button>
  </div>,
)

命名规则

OOCSS

Object-Oriented CSS，面向对象的 CSS。

  • 分离结构（structure）和皮肤（skin）
  • 分离容器（container）和内容（content）
css
/* Button structure */
.btn
/* Button sizing */
.btn-small
.btn-medium
.btn-large
/* Button colour */
.btn-blue
.btn-orange
.btn-pink
.btn-purple
.btn-yellow
.btn-white

/** demo  */
#button {
  width: 200px;
  height: 50px;
  padding: 10px;
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 5px;
}
#box {
  width: 400px;
  overflow: hidden;
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 5px;
}
#widget {
  width: 500px;
  min-height: 200px;
  overflow: auto;
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 5px;
}
/** OOCSS */
.button {
  width: 200px;
  height: 50px;
}
.box {
  width: 400px;
  overflow: hidden;
}
.widget {
  width: 500px;
  min-height: 200px;
  overflow: auto;
}
.skin {
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 5px;
}

BEM

BEM 即为块级元素修饰字符（Block Element Modifier）。
规则是 .block-name__element-name--modifier-name。

css
.button
.button--state-success
.button--state-danger
.form__input
.form__submit
.form__submit--disabled

SMACSS

Scalable and Modular Architecture for CSS

分类：

  • Base
  • Layout
  • Module
  • State
  • Theme
css
/** Base：与 CSS Resets类似 */
body,
form {
  margin: 0;
  padding: 0;
}
a {
  color: #039;
}
a:hover {
  color: #03f;
}

/** Layout */
#article {
  width: 80%;
  float: left;
}
#sidebar {
  width: 20%;
  float: right;
}
.l-fixed #article {
  width: 600px;
}
.l-fixed #sidebar {
  width: 200px;
}

/** Module */
.card {
  .card-title {}
  .card-content {}
}

/** State */
.is-collapsed
.is-expanded
.is-active
.is-error
.is-hidden
.is-shown
.is-successful

SUIT CSS

分类：

  • 工具类 Utilities
    • u-[sm-|md-|lg-]<utilityName>
  • 组件类 Components
    • [<命名空间>-]<组件名>[-后代名][--修饰符]
  • 变量名 Variables
    • --组件名[-后代名|--修饰符]-(CSS属性|变量名)
css
.u-block
.u-floatLeft
.u-sm-button

.Button
.Button--default
.Modal
.Modal-title
.Modal-closeBtn
.Modal-content

--Button--default-backgroundColor
--Button--primary-backgroundColor

Atomic CSS

原子化 CSS

  • class的命名按照功能
  • class的功能单一
Tailwind CSS

Tailwind CSS 的工作原理是扫描所有HTML 文件、JavaScript 组件以及任何模板中的 CSS 类（class）名，然后生成相应的样式代码并写入到一个静态CSS 文件中。

参考