https://zhuanlan.zhihu.com/p/32117359
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;"
https://blog.techbridge.cc/2019/01/26/functional-css/
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
The CSS modules specification also describes a composes directive. It allows class selectors with local names to reference other class selectors. This can be used to split out common sets of properties to avoid duplicating them. And with the from keyword, it can also be used to reference class selectors with local names in other files, 相当于 class 写多个
CSS IN JS
- styled-components // 动态生成 css 插入 style 标签中
- emotion
https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660
- 可以跟 web 解藕
- Scoped styles // 相当于使用 js 变量
- Critical CSS // 转换成内部样式表
- Smarter optimisations // 如转换成原子样式（多个类名组合）
- Package management
- Non-browser styling
https://medium.com/@gajus/stop-using-css-in-javascript-for-web-development-fa32fb873dcc
