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

章節連結

Sass/CSS 的設計模式,對於使用者來說,你可以把它想做是一種歸納管理 CSS 的思維。隨著專案的開發架構越發龐大,修改一個小小樣式變成一個大工程,因為你必須要在茫茫程式海中找到對應或是關聯的 CSS 位置。容易擴展和模組化的 CSS 架構是大型專案管理的必備思維之一。sass logo


課程對應章節

Course 32 ~ Course 43 (全部一共有 72 Courses)

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

內容

Smacss

  • 用 base rule 打好根基樣式(全站設定),然後再行特別修改。
  • 由 Layout 製作表頭,放置全站會用到的布局(像是導覽列、頁腳……等等),剩餘的就是中間的內容抽換。有點像是 Handlebars 中的 views/layout 中的主要樣板(main.handlebars)。
  • 若你在網站內會有預期的版型配置樣式,那麼你可以加上前綴詞的方式(如:.l-list,代表 List 的共用 Layout)來提醒自己。
  • 常用的樣式,減少語意的用法,改用抽象 + 字詞。
  • 模組化你的 CSS:設定基底樣式 → 針對特定情況下一個部分修改的 CSS 疊加到舊有的樣式上 (例如:class=”btn btn-primary”)
  • 增加子模組是一種擴充包的概念
  • 撰寫CSS時不要去指定 HTML Tag,這樣方便做調整

範例


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瀏覽人氣:19