什麼是面向對象的 CSS
框架？工具？哲學？
Object-orIEnted CSS is a coding paradigm that styles "objects" or "modules"—nestable
chunks of Html that define a section of a webpage—with robust, reusable styles.
很像語言的進化
令 CSS 更強大
有什麼不同？
ul{...}
ul li{...}
ul li a(②但是，結構在這裡){①直至現在，我們只關心這裡}CSS 大約 2005
意大利面條
CSS 大約 2008
稍微好一點
而不是使我們的代碼變好
我們築了大柵欄
性能呢？
公認的毒藥中心
網站變慢
文件大小和 HTTP 請求未作優化
CSS 大約 2009
面向對象的CSS
性能的最佳實踐、可擴展性、和最重要的-容易使用
- 創建對象而不是頁面或模塊
- 在內容對象上設置好的公用默認值
- 抽象重用元素
- 分離結構和皮膚(為兩個 class)
- 分離容器和內容(開放的編輯區)
- 使用繼承
- 對看起來 OO 的應用多個 class
9條最佳實踐
- 組件庫：可重用和冗余
- 一致性：避免位置依賴(location-dependent)的樣式
- 抽象化
- 優化圖像和 sprites
- 靈活
- 學會愛柵格
- 避免非標准的浏覽器字體
- 避免高度對齊(alignment)
- 謹慎賣弄你的技術(choose your bling carefully)
9個陷阱
- 位置依賴的樣式
- 避免指定一個 class 的標簽
- 避免用 ID 定義主內容區域內的樣式
- 避免不規則背景上陰影和圓角
- 不要拼合所有圖片(觸發只有少數幾個頁面)
- 避免高度對齊
- 文字就是文字，不要做成圖片
- 冗余
- 避免過早優化
創建組件庫
可重用的“樂高積木”
重用元素使得它們
性能“免費”
組件就像樂高積木
組合並匹配來創建不同的和有趣的頁面
從組件庫創建 Html
新的頁面一般不需要額外的 CSS
標題
根據你需要的語義來完成你想要的表現
列表
必須對頁面中的所有模塊可用
SIDE-WIDE LOGES
- 標題
- 列表(比如 action list, external link list, product list, 或 feature list)
- 模塊 headers 和 footers
- 柵格
- 按鈕
- 圓角 boxes
- Tabs, Carousel, toggle blocks
避免重復
在不能增加價值的元件上浪費性能資源
近似相同的模塊
h3 和 h5 太相似了
經驗法則：
如果一個頁面中的兩個模塊看起來太相似，它們在一個站點中太相似，選擇一個！
例子
Yahoo! 個人財經
2+不同的 tab 風格。能用相同的圖像嗎？
3個元件的輪廓太相似了。選擇一個。
模塊寬度、背景色或背景圖片的改變是個很好的模塊復用的例子。
避免位置依賴(location-dependent)的樣式
沙盒比意大利面條好，不過引起了性能問題
避免什麼？
運行區域
不時…
返回直徑
破壞
在 CSS 中我們一直這麼做
破壞
不好的：
#weatherModule h3{color:red;}
#tabs h3{color:blue;}- h3 的全局顏色未定義，將導致
- 在新模塊中沒有定義樣式
- 開發者被迫為相同的樣式寫更多 CSS
推薦：
h3{color:black;}
#weatherModule h3{color:red;}
#tabs h3{color:blue;}- 定義了全局顏色(更好！)
- Weather 和 tabs 覆蓋了缺省的 h3
- h3 的3種樣式在同一模塊中不能並存
- 缺省樣式不能用在 weather 和 tabs 除非有更高的優先級
- Weather 和 tabs 的 h3 永遠不能在其他模塊中使用
一致性
寫更多規則去重寫之前的瘋狂規則。
比如標題在任意模塊的表現是可預見的。
用這個來代替
h1, .h1{...}
h2, .h2{...}
h3, .h3{...}
h4, .h4{...}
h5, .h5{...}
h6, .h6{...}- 定義全局值
- 遵循語義(同時允許靈活的視覺)
需要超過6個標題？
真的嗎？沒有重復？沒有相似的？
仍然需要更多標題？
.category{...}
.section{...}
.product{...}
.prediction{...}- 通過對象本身的 class 擴展標題對象
- 避免使用繼承來改變嵌套對象的表現
抽象
復用代碼段
重復編碼
是抽象不同水准的語義失敗所導致的
分離：
- 容器和內容
- 結構和皮膚
- 輪廓和背景
- 對象和混合物
分離容器和內容
定義每個對象的界限
開放的編輯區
圖像或 Flash
混合與匹配
容器和內容對象達到高性能設計
分離輪廓和背景
內部透明！
MAKING IT LOOK FAB
需要小心選擇像素
考慮 PNG8 來漸進增強
陷阱
可變的或漸變背景
提防圓角後的可變或漸變背景
分離結構和皮膚
兩個單獨的 class
示例：模塊
結構
Sloves borwser bugs, positions presentational elems, and generally does the heavy
lifting of CSS
皮膚
弄漂亮些。
目標是非常明確的皮膚，復雜的被結構對象和跨網站共享所吸收(The goal is very predictable skins, complexity is
absorbed by the structure object and shared across the site)。
/* ----- simple (extends mod) ----- */
.simple .inner{
border:1px solid gray;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
}
.simple b{
*background-image:url(skin/mod/corners.png);
}什麼屬於皮膚？
皮膚的每個值應該是確定的，容易預測並測量。
- 顏色
- 邊框
- 圖像
靈活性
可延長的高度和寬度
固定尺寸
Limit the ways in which a module can be resued
學著愛上柵格
堅信其會很美
傳授 OO CSS
給設計師和工程師
自然改進
從簡單到復雜的任務
一個真實案例
Gonzalo Cordero Yahoo! 前端開發工程師
需要考慮的設計因素
- 跨浏覽器兼容
- 多語言支持
- 可訪問性
- 按時完成全部布局和功能
困惑
WEB 妥協
- 為什麼“簡單的東東”變復雜？
- 為什麼要妥協？
- 為什麼我們不能依固定的規則和結構？像講台上那樣？
OOCSS SAVES THE DAY
- 單個簡單的標簽結構
- 跨浏覽器支持(甚至 IE 5.5！)
- 非常少的 CSS
- 可剝離的，容易應用在多個設計上
譯注
這不僅僅是 OOCSS！
本文內容來源於：
- Object OrIEnted CSS 高清視頻下載
- What is Object OrIEnted CSS?
- The Fast And The Fabulous
- The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, AJax ExperIEnce 2009
- After YSlow “A”
- Design Fast Websites