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

每次專案,都提供給自己或是團隊一個可以將這些 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 – 簡介
  • 按讚加入粉絲團

    延伸閱讀