自從2008年Nicole Sullivan提出Object-Oriented CSS(OOCSS)以來。它就成為一個領先的模塊系統，用來組織你的CSS代碼方式之一。

OOCSS不同于其他組織CSS代碼方法，比如SMACSS或者BEM。通過將CSS代碼和結構分離讓你的模塊可重用。事實上，我也通常將SMACSS與OOCSS混為一談。

OOCSS、SMACC和BEM在CSS中是很有內涵的東東，早就在W3cplus站點上有相關內容科普過。可以說理解了這些內容將能更好的幫助您組織、管理您的CSS代碼或者說CSS模塊。

今天，我要和大家一起探討的是OOCSS的一些基本原則。主要跟大家一起探討的是如何將Sass和OOCSS更好結合在一起的一些建議。
什么是對象？

    在視覺是這是一個重復的模塊，可以將HTML、CSS和JavaSctrip獨立抽取出來，成為一個獨立的片段——Nicole Sullivan

將一個CSS對象抽取出來要考慮的第一件事情就是怎么將樣式與結構分離出來，組織代碼的最佳方式是什么？OOCSS的創始人Nicole Sllivan提了兩個主要原則：

    結構與樣式分離：你應該在對象中定義結構和位置，而對于樣式特性應該使用類名分離出來，比如說background或border。這樣一來你就不需要去覆蓋一些特征性樣式。
    容器與內容分離：不要在你的HTML結構中插入樣式。換句話說，你的樣式中盡量不要使用html標簽或者id標識符。相反，應該定義一些類名來定義樣式，而且選擇器的嵌套的層級應該盡量的少。

我們快速做一個示例

運用這些原則可能比較困難（理解理論的東西總是蛋疼的）。讓我們來看一個簡單的實例，看看是如何組織這樣的代碼:

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表