合適的歸納方法是很重要的喔~~ 謹記。

今天要講的是 OOCSS，與 SMACSS 同樣是個歸納、整理 CSS 的方法。

直接切入重點，

OOCSS 注重結構與樣式分離、容器與內容分離。

單看上面那句話根本無從得知他要如何表現...?

一句一句拆解

結構與樣式分離：

用過 Bootstrap 的人應該會知道按鈕的 class 有 .btn 與 .btn-xxx 這兩個。前者是結構，後者是樣式。兩者並用，基本上缺一不可。

這樣的設計模式是否一目瞭然?

看過昨天的 SMACSS 應該覺得有種既視感@@

這不是跟昨天 Model 部分描述得差不多嗎...

就我理解確實是差不多，還是有什麼更深的意涵我沒意會到的呢?有的話就請幫我補充吧OuO

容器與內容分離：

用過 Bootstrap 的應該知道(X

用過格線系統的應該知道，上面註解掉是因為格線系統並非 Bootstrap 的專用。

不過我還是要用 Bootstrap 來比喻，畢竟最多人用嘛~

Bootstrap 的格線為 .col-x 樣式，x 表示帶入的1~12的數字。

在一個區塊中，容器的 CSS 就是容器專用，要設計區塊的內容就在寫個專用的 class。

用個簡單的幾何圖來表示，黑色方框所指的就是容器，而紅色圓圈指的就是內容。

將兩者的 CSS 完全分離，兩個互不影響，就是容器與內容分離。

不論何種格線系統都是依照"容器與內容分離"這段話去做的，所以並不會在設計區塊時順便編寫區塊的內容，將其混雜。

有一點要注意的是，無論何種設計模式應該都要避免用 HTML tag 來設計。

e.g.

.col-6 a {
    // your CSS
}

這樣不就變專屬的樣式了嘛~~ 分離的意義也就沒了。這樣根本就沒分離了阿!!!

說實在，設計模式也就只是一種概念，他人的概念不見得適合你，也許寫久了也能找出自己的設計模式?
OOCSS 與 SMACSS 都是結構分類上的概念，所以明天會介紹 class 該如何命名，盡請期待喽~~