CSS 工程化演进


functional CSS

简单讲:一个背景颜色一个类名,跟 inline style 差别:
  1. Inline style 不能有 media query
  2. inline style 的屬性可以隨意設置(這之後我會講詳細一點)
  3. Inline style 沒辦法處理 :before, :after
  4. Inline style 無法重用,但是 css class 可以,我可以定義一個叫做 .bg-red 的規則,想要背景是紅色的加上去就行了
  5. 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