DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 網頁制作教程:面向對象的CSS應用
網頁制作教程:面向對象的CSS應用
編輯:CSS詳解     

什麼是面向對象的 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

性能的最佳實踐、可擴展性、和最重要的-容易使用

  1. 創建對象而不是頁面或模塊
  2. 在內容對象上設置好的公用默認值
  3. 抽象重用元素
  4. 分離結構和皮膚(為兩個 class)
  5. 分離容器和內容(開放的編輯區)
  6. 使用繼承
  7. 對看起來 OO 的應用多個 class

9條最佳實踐

  1. 組件庫:可重用和冗余
  2. 一致性:避免位置依賴(location-dependent)的樣式
  3. 抽象化
  4. 優化圖像和 sprites
  5. 靈活
  6. 學會愛柵格
  7. 避免非標准的浏覽器字體
  8. 避免高度對齊(alignment)
  9. 謹慎賣弄你的技術(choose your bling carefully)

9個陷阱

  1. 位置依賴的樣式
  2. 避免指定一個 class 的標簽
  3. 避免用 ID 定義主內容區域內的樣式
  4. 避免不規則背景上陰影和圓角
  5. 不要拼合所有圖片(觸發只有少數幾個頁面)
  6. 避免高度對齊
  7. 文字就是文字,不要做成圖片
  8. 冗余
  9. 避免過早優化

創建組件庫

可重用的“樂高積木”

重用元素使得它們

性能“免費”

組件就像樂高積木

組合並匹配來創建不同的和有趣的頁面

從組件庫創建 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
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved