[筆記] 網頁切版直播班 2020 春季班 – 第八週

章節連結

SCSS 隨著專案的規模增大,為了方便維護,會開始有內容與容器分離、結構與樣式分離,進而模組化的進程。這樣的結果,就形成了各種結構設計模式(如 SMACSS、OOCSS、BEM…等)。
hex-school-logo

第八週課程重點

結構設計討論

從左至右,越發進化。在過程中,你會逐漸拋棄語意化的 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


相關文章

按讚加入粉絲團

延伸閱讀

GA瀏覽人氣:27