CSS 设计模式

提示

学好 CSS 设计模式后，并灵活搭配起来，可以让网页布局更加得心应手！😎

OOCSS（面向对象 CSS）

核心：把“结构”和“外观”分离（container/layout 与 skin/theme 分离），重用通用类（如 .media, .btn）。

BEM（Block Element Modifier）

核心：用结构化命名（.block, .block__elem, .block--mod）来控制作用域与可读性。

SMACSS（可伸缩和模块化架构）

核心：按类别分文件/规则：

Base：浏览器基础样式重置与元素定制化，如：
- reset.css、normalize.css ……
- a、input ……
Layout：整体布局样式，如：
- .l-layout ……
Module：整个网站可复用模块的样式
State：管理模块不同状态的样式，如：
- .is-hidden ……
Theme：整个网站的多个皮肤样式，如：
- .theme-nav ……

ITCSS（Inverted Triangle CSS）

核心：按重要性/范围从低到高组织样式

Settings：整个网站的样式变量
Tools：维护样式的类似于工具的样式，如：文字省略、清除浮动 ……
Generic：浏览器默认样式重置
Base：默认元素样式定制化，如：a、input ……
Object：组件样式开发
Components：组件样式开发
Trumps：最高权重的样式代码

Atomic CSS（原子化 CSS）

核心：使用一套小而单一职责的类（例如：.text-center, .mt-4）来拼接样式。