[Hexschool Web Layout Training] — Week_8 CSS 模組化管理
Introduction & 前言
為期八週的訓練本週是最後一次課程，這週除了複習過去七週的重點外，這週的重點也放在如何更好的管理 CSS。
這週也會將 BS 利用的更淋漓盡致。
最後一週也是使用 Gulp，如果你還沒用過或是想知道怎麼從 0 開始建立一個 Gulp 歡迎參考我的上一篇文章，[Tool Notes] — 關於Gulp。
Summary & 摘要
*本篇文章將會以三個角度來紀錄， 課程心得(上課後的心得整理)、練習心得(做完作業後的心得整理)) 及 **小組任務(每週會有一項小組任務，寫完後的心得)*。
每週的練習挑戰和地下城有點像，都有自己必須練習到的地方；本週需要練習的目標有至少兩點以上的練習菜單，及額外的一項打字練習。
關卡目標
- 最終練習
課程心得
這週課程前半段複習了前七週的內容，另外六角校長為了讓大家更了解如何管理好 CSS 在上課時也提到了 OOCSS、BEM…等等。
之前在上六角 SASS 課程時自己有寫了一篇文章，有興趣可以看看那篇文章，我只能說，至今為止，幫助很大！如果你還不懂關於 CSS 的規範更應該要看看 [CSS Notes] - CSS模組化。
另外大部分時間應該都是在講解一些 CSS 拆分及學生的程式碼拆分分享，第八週就是複習的一週，也是最後一週了。
練習心得
其實本週上次講到很多，但還是像前面說的，本週著重在複習前幾週的成果，所以這週就是最後實戰演練了。
本週其實想挑戰在 SCSS 上不用任何一頁 pages，想把所有的 CSS 都拆分為 **元件(Components)**，但說實在的，超級難啊！
像是在某一頁需要一個照片牆，這個地方想把它變成元件其實沒這麼容易，而且設計稿看來看去就只有這個地方有用到。
雖然排版可以使用 BS 的格線系統搞定，但是這種需要 RWD 變化的版型，使用格線系統常常就會爆版…
還有使用者頭像這部分，其實最上方的 Header 已經弄成模板了，這時候就會猶豫關於頭像照片的 CSS 我應該放在 Layout 的 header.scss 裡面，還是放在 components 裡面呢？
其實上了八週課程，幾乎每週都在思考怎麼排版外，也在思考怎麼分類 CSS，但其實寫程式就是這樣，沒有最好的解答，只有最適合你的方式，如果你寫的分類的 CSS 是讓你幾個月後回來看一幕瞭然，且其他人接手也可以快速進入狀況，那我覺得就是及格的了！
因為我們常常過度設計化，也就是可能只有一個地方在用的 CSS 也拆開來，我想這個還是我必須要克服的點。
小組任務
任務一：請每個小組討論成員，挑選其中此連結的 SCSS 結構來進行討論其優缺點
任務二：討論第八週版型該怎麼做
Conclusion & 結論
雖然這週心得看起來爆炸少，但其實每天都切的快爆炸，上週結束後禮拜一開工幾乎是天天切版，很多地方真的是要動手做才會發現精髓，這次的直播課程收益真的良多，更多的心得就留到下一篇總結吧！
這邊真的要給設計師一個最高敬意，幾乎每週都是用心設計過，不是胡亂設計的，最近工作幾乎都是客戶要我們切版搭設計，光是設計就搞得一個頭兩個大，難怪很多人常常說，設計的美感是天生的，很好我沒有Ｑ，我還是乖乖切版！
Demo & 成果程式碼
Source Code：點我
Demo：點我
關於設計稿有版權問題，所以這系列文章的連結都已經拿掉囉，需要的可以參考我的成果版面，再進行練習。
參考網站
- 無