CSS 工程化演进
functional CSS
简单讲：一个背景颜色一个类名，跟 inline style 差别：- Inline style 不能有 media query
- inline style 的屬性可以隨意設置（這之後我會講詳細一點）
- Inline style 沒辦法處理
:before,:after - Inline style 無法重用，但是 css class 可以，我可以定義一個叫做 .bg-red 的規則，想要背景是紅色的加上去就行了
- Inline style 跟 functional css 的可讀性還是有差，比比看
class="f-sm bg-blue"跟style="font-size: 10px; background-color: #0000ff;"
namespace 约束
OOCS （Object-Oriented CSS）
分离结构和皮肤（separate structure and skin）
分离容器和内容（separate container an content）
SMACSS(Scalable and Modular Architecture for CSS)
基础（Base）
布局（Layout）
模块（Module）
状态（State）
主题（Theme）
BEM 即Block Element Modifier；
类名命名规则： Block__Element—Modifier
CSS modlue
CSS IN JS
- styled-components
- emotion
- 可以跟 web 解藕
- Scoped styles // 相当于使用 js 变量
- Critical CSS // 转换成内部样式表
- Smarter optimisations // 如转换成原子样式（多个类名组合）
- Package management
- Non-browser styling