http://learn.shayhowe.com/advanced-html-css/performance-organization

LESSON 1

Performance & Organization

1. 策略與架構

1. style架構設計

1. 整體CSS想成是一個系統，並非獨立的頁面
2. 切割方式

• base - 包含所有常見style跟用於全站的元素
• components  - 所有可以被特定切割的功能跟區塊
• modules - 整個網站不同區塊，商業用途

2. OOCSS

1. 將架構跟表皮分開
2. 將內容跟容器分開

3. 可延展模組化的CSS架構

1. 五種核心分類

• Base
• Layout
• Module
• State
• Theme

4. 選擇一種方法
   不管是OOCSS或是SMACSS都可以，只要你有選擇一種方法來做

2. 選擇器決定效能

1. 簡短的選擇器使用 selector
2. 盡量使用 classes

1. selectors rendered 方式是從右邊到左邊

3. 重複使用性
4. 檔案最小化

1. gzip
2. 測量壓縮
3. 檔案壓縮
   圖片品質壓縮

5. 減少 HTTP Requests

1. 檔案請求減少
2. 圖檔合併
3. Data URI  小圖-> 重複使用 避免 Cached 太多資訊

6. Cache 常用的檔案
   重複造訪的時候避免多餘的loading，長達一年也是可以的