[筆記] Sass 實戰全攻略 – 10 – 設計模式和規範

Posted onAuthorANDY LIEN

章節連結

每次專案，都提供給自己或是團隊一個可以將這些 CSS 規範給內化的機會。不過要謹記規範是死的，而人是活的，切勿為了規範而讓專案過於瑣碎，而是要力求導入規範讓工作流程更有效率才是。sass logo

課程對應章節

Course 55 ～ Course 57 (全部一共有 72 Courses)

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

內容

1. 使用者當了解 Sass 的架構後，可以擷取各家的部份 (PureCSS, Boostrap4……等)，進而整合出自己的模式。
2. 可以試著手寫 Sass，建一套迷你的套件系統，讓自己熟悉如何架構請自己專案的 Sass 。
3. 規範：可以採取 7 + 1 的模式，包含 ( Base, Component, Layout, Page, Utils, Theme 和 Vender) ，配上 main.scss。
4. 每回專案開始前，可以定下這次的專案力求的 Sass 規範(OOCSS, Smass, BEM)，讓大家得以遵守。
5. 網頁兼容性 / 可讀性 / 螢幕解析度 / 可擴充性 / 可重用性 / 可維護性

Sass 實戰全攻略系列文章

  • [筆記] Sass 實戰全攻略 – 11 – 自製格線系統
  • [筆記] 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 – 簡介
    • 按讚加入粉絲團

    延伸閱讀