Frontend Alchemist: OOCSS - 以 SASS 開發為例

什麼是 OOCSS?

“Object Oriented CSS” (物件導向的 CSS)
OOCSS 是一種哲學，透過模組化、可重複使用性，一定程度上解決了專案越來越複雜難以維護的問題。
重點在於可利用性，OOCSS 並不是新的語言或是框架，它是一種撰寫 CSS 的方法，可減少 CSS 代碼，達到優化效能的作用。

兩大原則

Separate Structure and Skin，結構與外觀分離 (size v.s. color)

// size + color
#button 
    width: 200px
    height: 50px
    padding: 10px
    border: solid 1px #ccc
    background: linear-gradient(#ccc, #222)
    box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px

#box
    overflow: hidden
    width: 400px
    border: solid 1px #ccc
    background: linear-gradient(#ccc, #222)
    box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px

#widget
    overflow: auto
    width: 500px
    min-height: 200px
    border: solid 1px #ccc
    background: linear-gradient(#ccc, #222)
    box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px

// size
.button 
  width: 200px
  height: 50px

.box 
  width: 400px
  overflow: hidden  

.widget 
  width: 500px
  min-height: 200px
  overflow: auto

// color
.skin 
  border: solid 1px #ccc
  background: linear-gradient(#ccc, #222)
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5p

Separate Container and Content，容器與內容分離 (container v.s. content)

避免樣式依賴位置。
把容器和內容獨立出來，好處是相同內容可以任意插入到任何容器中。
為了讓內容可重用，OOCSS 主張在內容中添加更多的 Class。

<!-- 一般的做法：樣式相依於結構，一定要 .friday 搭配子項目 .item 才會成立。 -->
<div class="friday">
    <p class="item">
        <a>反向傘買一送一<span>$2980</span></a>
    </p>
</div>

<div class="fresh">
    <p class="item">
        <a>反向傘買一送一<span>$2980</span></a>
    </p>
</div>

<div class="newmodel">
    <p class="item">
        <a>反向傘買一送一<span>$2980</span></a>
    </p>
</div>

.friday .item 
    font-size: 1.2 em
    text-align: left
    margin: 10 px 0
    /*在內容新加的樣式*/ 
    width: 500 px 
    background-color: #efefef 
    color: #fff

.fresh .item
    font-size: 1.2 em
    text-align: left
    margin: 10 px 0
    /*在內容新加的樣式*/ 
    width: 300 px 
    background-color: #c3c3c3 
    color: #000

.newmodel .item
    font-size: 1.2 em
    text-align: left
    margin: 10 px 0
    /*在內容新加的樣式*/ 
    width: 200 px 
    background-color: #f1f1f1 
    color: #ccc

<!-- OOCSS 的做法：下通用的基礎樣式，再添加 Class 擴展名稱將樣式抽出來。 -->
<div class="friday">
    <p class="item item-friday">
        <a>反向傘買一送一<span>$2980</span></a>
    </p>
</div>

<div class="fresh">
    <p class="item item-fresh">
        <a>反向傘買一送一<span>$2980</span></a>
    </p>
</div>

<div class="newmodel">
    <p class="item item-newmodel">
        <a>反向傘買一送一<span>$2980</span></a>
    </p>
</div>

.item
    /*基礎內容樣式*/
    font-size: 1.2 em
    text-align: left
    margin: 10 px 0

.item-friday
    /*在內容新加的樣式*/ 
    width: 500 px 
    background-color: #efefef 
    color: #fff

.item-fresh
    /*在內容新加的樣式*/ 
    width: 300 px 
    background-color: #c3c3c3 
    color: #000

.item-newmodel
    /*在內容新加的樣式*/ 
    width: 200 px 
    background-color: #f1f1f1 
    color: #ccc

命名建議

使用語意: 與其用 text-red, 不如用 text-danger
名稱擴展: 追加屬性時, 延伸原來的名稱, 例: .item 與 .item.item-firday (oocss)
顏色變數：

$blue: #4183c4
// Or
$primary-color: #4183c4

// Better
$blue: #4183c4
$primary-color: $blue

如何逐步提升可利用性、模組化 css 程式碼

分析網頁元素(HTML 語意化)

語意化用途:
不是給我們讀的，是給瀏覽器讀的，供裝置辨識的標籤。不用使用語意化寫法也寫得出網頁，但正確使用語意，讓瀏覽器能分辨出標題、內容、語氣、重要性。目前IE不支援，但加上一段JS可正常套用。
語意化的必要性:
正確的語意化寫法可以提高 SEO、語音瀏覽器、手機裝置的支援
如何判斷適用的語意 TAG ？
HTML5doctor 提供了一份流程圖供你參考。

評估每次開發都會重複撰寫的相同內容

命名原則(img、class)
計算圖片寬高(MIXIN)
設計常用排版屬性為class: pull-left , pull-right , clearfix...

UI 元素整理(表格、選單、按鈕)

整理出常用的UI元素
表單按鈕
多階層式選單
麵包屑、網站導覽
參考熱門前端框架(Bootstrap)

整理出常用 jQuery 熱門動畫特效

圖片輪播動畫
TAB效果
彈跳視窗

注意事項

原則上不要使用 !important
讓 css 不具相依性 (低耦合概念提升可利用性)，另外不要直接用 tag 選擇器，會導致對元素依賴
使用 absolute 之前，父元素設定 relative

sublime plugin 開發輔助工具

Color Highlighter
csscomb: Shift + Ctrl + C

總結

兩大原則

結構與外觀分離
容器與內容分離

找出重複結構 HTML ，分出容器與內容，依據不同頁面或同結構不同長相，以 Class 名稱擴展方式來做外觀樣式。
重點在於可利用性，OOCSS 並不是新的語言或是框架，它是一種撰寫 CSS 的方法，可減少 CSS 代碼，達到優化效能的作用。

References:

Frontend Alchemist

2016年2月17日星期三

OOCSS - 以 SASS 開發為例

沒有留言:

張貼留言

2016年2月17日 星期三

OOCSS - 以 SASS 開發為例

沒有留言:

張貼留言

2016年2月17日星期三