iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 3
0
Modern Web

CSS 實戰心法系列 第 3

OOCSS 結構與樣式、容器與內容(實際範例)

結構與樣式在執行的概念上就是這樣的白話,目標即是將這兩者分離,上一篇我們用建築物的結構與外觀樣式做分離,再依不同的需求去做組合。

CSS 上也是相同的道理,比如說我們可以做這樣的分類:

  • 結構:marginpaddingdisplayvertical-align
  • 樣式:
    • 色彩樣式:colorbackground-colorborder-color
    • 尺寸樣式:font-sizeheight

案例說明

我們透過一個簡單的小故事作為範例,讓大家了解 OOCSS 在實作上是如何運作。

Step1

我們接到一個工作要設計一組按鈕的 CSS,由於這組按鈕是作為銷售頁面的用途,在設計上我們有以下規劃:

  • 按鈕有三個,依據顯眼程度的順序是 購買、註冊、說明。
  • 網站的主色是藍色,強調色彩是紅色 (這邊不特別定義色碼)。

範例:http://codepen.io/Wcc723/pen/KzXZaz/

就以需求來說,我們可以依據需求做出三個按鈕,名稱分別命名為 .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;
}

結構與樣式的混合的結果,就是有大量重複的程式碼,這個案例中我們可以先將重複的程式碼抓出來,來達到結構與樣式分離。

範例:http://codepen.io/Wcc723/pen/dOdWGQ/

Step2

由於需要更多的按鈕樣式,目前提供的三個按鈕並不足夠,在規劃上需要做以下調整:

  • 按鈕有三個,依據顯眼程度的順序是 購買(主色)、註冊(強調色)、說明。
  • 網站的主色是藍色,強調色彩是紅色 (這邊不特別定義色碼)。
  • 說明按鈕還要做登入的功能,註冊按鈕還要兼著做訂閱電子報。

所以命名的部分,建議不要直接使用按鈕的功能性直接命名,而是可以按鈕的樣式特性來命名,比如說:

  • 結構:btn
  • 色彩
    • 主次要:primary, accent

依據這樣的調整,樣式的設計就不會被原本的功能限制,使用更為靈活。

範例:http://codepen.io/Wcc723/pen/YpeVNg/

.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;
}

最後,按鈕的結構就會有很大的調整,結構與樣式分離後,面對更多的挑戰(? 時可以減少修改的幅度,如果要再調整按鈕大小,相信大家也能夠用相同的概念去調整。

文章同時發表於:https://wcc723.github.io/css/2016/12/03/oocss-two/


上一篇
OOCSS 結構與樣式、容器與內容
下一篇
OOCSS 容器與內容分離 (最佳實踐)
系列文
CSS 實戰心法30

1 則留言

0
shupa0325
iT邦新手 5 級 ‧ 2017-08-28 17:57:25

受益良多,最近正要學css設計,先看大大文少走很多岔路

我要留言

立即登入留言