[筆記] Sass 實戰全攻略 – 7 – Sass/CSS 設計模式 (OOCSS)

章節連結

Sass/CSS 的設計模式,對於使用者來說,你可以把它想做是一種歸納管理 CSS 的思維。除了前一篇文章提到的 Smacss 外,OOCSS 提出另外一種收納 CSS 的方法:將容器、樣式、內容和結構都予以分離。
sass logo


課程對應章節

Course 44 ~ Course 47 (全部一共有 72 Courses)

請注意:本系列文章為個人對應課程的消化吸收後,所整理出來的內容。換言之,並不一定會包含全部的課程內容,也有可能會添加其他資源來說明。課程連結網址:http://tinyurl.com/ueo7bm2

內容

OOCSS

  • 樣式互相組合,彼此之間不會衝突
  • 容器(排版布局) 和內容樣式分離,這樣可以方便搬動
  • 內容、樣式、常用工具(如清除浮動、隱藏文字……等),彼此之間不要綁死,而是分門別類組合的話,運用起來會更靈活

範例


Sass 實戰全攻略系列文章

  • [筆記] Sass 實戰全攻略 – 11 – 自製格線系統
  • [筆記] Sass 實戰全攻略 – 10 – 設計模式和規範
  • [筆記] Sass 實戰全攻略 – 9 – 錯誤的 CSS 設計方式
  • [筆記] Sass 實戰全攻略 – 8 – 關於命名的那些事兒
  • [筆記] Sass 實戰全攻略 – 7 – Sass/CSS 設計模式 (OOCSS)
  • [筆記] Sass 實戰全攻略 – 6 – Sass/CSS 設計模式 (Smacss)
  • [筆記] Sass 實戰全攻略 – 5 – mixin 解決響應式網頁的斷點問題
  • [筆記] Sass 實戰全攻略 – 4 – mixin 統整你常用的 CSS 方法
  • [筆記] Sass 實戰全攻略 – 3 – import 切分檔案和維護
  • [筆記] Sass 實戰全攻略 – 2 – 變數的運用
  • [筆記] Sass 實戰全攻略 – 1 – 簡介
  • 按讚加入粉絲團

    延伸閱讀

    GA瀏覽人氣:2