有了資料夾結構、共用變數，我們可以試著開始切元件了
而且今天是中秋節過後的第二天，是一個適合開始切一些小元件的日子呢(?)
怎麼樣做出一個彈性高的元件呢？
我們可以將OOCSS的概念納入你的切版之中，
好囉，那我們就以每個網站的按鈕為例吧，開始囉～～

何謂OOCSS?

OOCSS = Object-Oriented CSS 物件導向的CSS，
這個CSS的設計模式主要是針對Class的命名及使用，
主要的目的是希望讓CSS可以最大化的reuse，也可以降低一直重覆寫css的cost，
我覺得這是一個讓自己重新審視你的css該如何更有彈性的思考方式

主要的概念原則有兩個：

概念1. Separate Structure From Style (結構與樣式分離)

可以想想我們的頁面元件組成，通常都會是有些固定的結構，Eg. sideMenu, header, list .. etc
那結構與樣式分離，我們可以想像成，紙娃娃的身體和衣服（現在的小孩事不是不玩紙娃娃了QQ)
或是想成你手機遊戲中的人物與衣服裝備～
人物就是結構，衣服裝備就是樣式，
當你把結構與樣式分離，就可以讓一套衣服套用在不同人身上
實際上的例子：

// 沒有OOCSS的SideMenu
.sidemenu{
    color: #414141;
    font-size: 16px;
    letter-spacing: 0.3px;
    padding: 10px;
    width: 300px;
}

// 有OOCSS的範例SideMenu
.sidemenu{
    padding: 10px;
    width: 300px;
}
.style-text-normal{
    color: #414141;
    font-size: 16px;
    letter-spacing: 0.3px;
}

假設我有一個主選單也要用同樣的文字樣式

// 沒有OOCSS的SideMenu , MainMenu
.sidemenu{
    color: #414141;
    font-size: 16px;
    letter-spacing: 0.3px;
    padding: 10px;
    width: 300px;
}

.mainmenu{
    color: #414141;
    font-size: 16px;
    letter-spacing: 0.3px;
    padding: 5px 15pxpx;
    width: 100%;
}

// 有OOCSS的範例SideMenu , MainMenu
.sidemenu{
    padding: 10px;
    width: 300px;
}
.style-text-normal{
    color: #414141;
    font-size: 16px;
    letter-spacing: 0.3px;
}

.mainmenu{
    padding: 5px 15pxpx;
    width: 100%;
}

在OOCSS的方法下，主選單只要定義不同的結構，可以統一使用一樣的樣式

概念2. Separate Container From Content (容器與內容分離)

容器：承載內容的物件，如：header, footer, sidebar, card.. etc
內容：實際上放文字或圖片的區塊：如：title, content, descrition, image.. etc

實際上的例子：

// 沒有 OOCSS
.card { ... }   // 容器 (裝圖文的容器)
.card h2 { 
    // h2是內容，針對card裡面的h2去給標題的樣式
}


// OOCSS
.card { ... }  // 容器 
h2.title--card {   // 內容
    // h2是標題樣式，有一種叫做card的標題
}
 

這樣的方式可以讓後續你有第二張卡時，但標題樣式相同的時候不需要一直做重覆撰寫

// 沒有 OOCSS , 每一種容器都要重新寫一次樣式
.card { ... }   // 容器 (裝圖文的容器)
.card h2 { 
    // h2是內容，針對card裡面的h2去給標題的樣式
}

.card2 {...}
.card2 h2 { ... }

// OOCSS  ,  標題樣式可在不同容器中共用
.card { ... }  // 容器 
h2.title--card {   // 內容
    // h2是標題樣式，有一種叫做card的標題
}

.card2 {...}

有了以上這兩個概念，明天我們可以試著實際來建立一個可以reuse的元件囉～

參考資料

The Basics of Object-Oriented CSS (OOCSS)