iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 6
0
Modern Web

30天前端網頁技術超入門介紹系列 第 6

Day6. CSS 設計模式(二) - OOCSS

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

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

直接切入重點,

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

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

一句一句拆解

結構與樣式分離:

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

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

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

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

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

容器與內容分離:

用過 Bootstrap 的應該知道(X

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

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

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

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

https://ithelp.ithome.com.tw/upload/images/20200914/20119051JLjseF5CcL.png

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

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

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

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

e.g.

.col-6 a {
    // your CSS
}

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


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


上一篇
Day5. CSS 設計模式(一) - SMACSS
下一篇
Day7. CSS 設計模式(三) - 命名基本
系列文
30天前端網頁技術超入門介紹11

尚未有邦友留言

立即登入留言