結構與樣式在執行的概念上就是這樣的白話,目標即是將這兩者分離,上一篇我們用建築物的結構與外觀樣式做分離,再依不同的需求去做組合。
CSS 上也是相同的道理,比如說我們可以做這樣的分類:
- 結構:
margin
、padding
、display
、vertical-align
- 樣式:
- 色彩樣式:
color
、background-color
、border-color
- 尺寸樣式:
font-size
、height
- 色彩樣式:
案例說明
我們透過一個簡單的小故事作為範例,讓大家了解 OOCSS 在實作上是如何運作。
Step1
我們接到一個工作要設計一組按鈕的 CSS,由於這組按鈕是作為銷售頁面的用途,在設計上我們有以下規劃:
- 按鈕有三個,依據顯眼程度的順序是 購買、註冊、說明。
- 網站的主色是藍色,強調色彩是紅色 (這邊不特別定義色碼)。
See the Pen OOCSS (Demo 1) by Wcc723 (@Wcc723) on CodePen.
就以需求來說,我們可以依據需求做出三個按鈕,名稱分別命名為 .button-resgister
、.button-purchase
、.button-info
,顏色也分別為 藍色
、紅色
、白色
。
就以這個範例來說,我刻意很明確地將相同的部分寫在上方,其實這也就是結構與樣式混合的範例。
.button-resgister {
/* 重複的部分 */
display: inline-block;
padding: .375rem 1rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
user-select: none;
border: 1px solid transparent;
border-radius: .25rem;
/* 樣式 */
color: #fff;
background-color: #0275d8;
border-color: #0275d8;
}
結構與樣式的混合的結果,就是有大量重複的程式碼,這個案例中我們可以先將重複的程式碼抓出來,來達到結構與樣式分離。
See the Pen OOCSS (Demo 1) by Wcc723 (@Wcc723) on CodePen.
Step2
由於需要更多的按鈕樣式,目前提供的三個按鈕並不足夠,在規劃上需要做以下調整:
- 按鈕有三個,依據顯眼程度的順序是 購買(主色)、註冊(強調色)、說明。
- 網站的主色是藍色,強調色彩是紅色 (這邊不特別定義色碼)。
- 說明按鈕還要做登入的功能,註冊按鈕還要兼著做訂閱電子報。
所以命名的部分,建議不要直接使用按鈕的功能性直接命名,而是可以按鈕的樣式特性來命名,比如說:
- 結構:
btn
- 色彩
- 主次要:
primary
,accent
- 主次要:
依據這樣的調整,樣式的設計就不會被原本的功能限制,使用更為靈活。
See the Pen OOCSS (Demo 1) by Wcc723 (@Wcc723) on CodePen.
.btn {
display: inline-block;
padding: .375rem 1rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
user-select: none;
border: 1px solid transparent;
border-radius: .25rem;
}
.btn-primary {
color: #fff;
background-color: #0275d8;
border-color: #0275d8;
}
.btn-accent {
color: #fff;
background-color: #d9534f;
border-color: #d9534f;
}
.btn-secondary {
color: #373a3c;
background-color: #fff;
border-color: #ccc;
}
最後,按鈕的結構就會有很大的調整,結構與樣式分離後,面對更多的挑戰(? 時可以減少修改的幅度,如果要再調整按鈕大小,相信大家也能夠用相同的概念去調整。