SCSS 隨著專案的規模增大，為了方便維護，會開始有內容與容器分離、結構與樣式分離，進而模組化的進程。這樣的結果，就形成了各種結構設計模式(如 SMACSS、OOCSS、BEM…等)。
第八週課程重點
結構設計討論
從左至右，越發進化。在過程中，你會逐漸拋棄語意化的 class 命名方式，最後每一個頁面部分都是由不同的模組所構成。
頁面 (page) → 佈局 (layout) → 工具 (helper、util) → 格線系統 (Grid) → 模組 (Module, Component)
7+1 SCSS Pattern
https://gist.github.com/rveitch/84cea9650092119527bc
BEM
塑造出自己的風格最為重要。原先定義： __ （區塊）– (修飾符)
經驗談
專案執行流程
樣式 Reset 初始化 (myerweb or normalize) → 全域設定 (變數、Helper、base、Mixin) → 自行製作格線系統 → 模組化設計
模組化的原因
因為這樣可以方便於各個頁面做使用(覆用性高)，如果真有需要客製化樣式，可以特別命名出一個語意化的 class，然後再行更改。
模組化後，能達成 1px 不差的設計嘛？
這點，需要和 UI / UX 設計師高度配合。這樣一來，你有機會透過模組化的方式，修改相關的變數細節，達成設計稿的效果。
Class 命名
儘量使用小駝峰式命名法，因為 “-“, “_” 這兩個符號，在設計模式上，都有基於某結構而改變樣式的意義。如果沒有特別聲明的情況下，會容易造成混淆。
過度設計化
當你同類性質高的時候(至少二到三個)，才特別開出資料夾來管理。模式是原則，不過還是要根據你的專案大小去決定是否要完全套用或是部分使用。
切版練習結果
目前改放置到 Github Pages 上，歡迎大家前往觀看。
網址：https://github.com/andy922200/HexSchool2020Spring
