- 什麼是 OOCSS?
- “Object Oriented CSS” (物件導向的 CSS)
- OOCSS 是一種哲學，透過模組化、可重複使用性，一定程度上解決了專案越來越複雜難以維護的問題。
- 重點在於可利用性，OOCSS 並不是新的語言或是框架，它是一種撰寫 CSS 的方法，可減少 CSS 代碼，達到優化效能的作用。
- 兩大原則
- Separate Structure and Skin，結構與外觀分離 (size v.s. color)
- Separate Container and Content，容器與內容分離 (container v.s. content)
- 避免樣式依賴位置。
- 把容器和內容獨立出來，好處是相同內容可以任意插入到任何容器中。
- 為了讓內容可重用，OOCSS 主張在內容中添加更多的 Class。
- 命名建議
- 使用語意: 與其用 text-red, 不如用 text-danger
- 名稱擴展: 追加屬性時, 延伸原來的名稱, 例: .item 與 .item.item-firday (oocss)
- 顏色變數：
- 如何逐步提升可利用性、模組化 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:
// 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
<!-- 一般的做法：樣式相依於結構，一定要 .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
$blue: #4183c4 // Or $primary-color: #4183c4
// Better $blue: #4183c4 $primary-color: $blue
