最後一週啦，作業真的要衝刺了，上週看到老師在 slack 發的心得文，感到相當激勵，因為在這裡你會發現很多人跟你一樣都在為未來做準備，你不是孤軍奮戰，小組也有人在跟你一起努力，互相鼓勵是很必須的， 走到這步時，也發現自己的刻意練習也練習了兩個月，每天上班第一件事情就是開slack做每日任務10~15分鐘，晚上下班一定會複習前一週的影片，每天至少兩小時不斷的複習與練習，會發現自己進步了很多，我們大家都走到第八週這一步了，接下來才是真正的開始 ~

第八週：CSS 模組化管理

一個成熟的前端介面，不論是版型管理、語法支援度、元件應用都得顧及到位，本週將會詳細介紹各角度的技術詮釋，以做為完美的收尾。

作品主題：大型訂房網站

教學關鍵字： SMACSS、OOCSS、Template 元件設計

第八週每日任務

12/07 BEM 命名 12/08 Swiper.js 12/09 OOCSS 12/10 carousel 12/11 設計模式優化

slack問題集

Q：請問要如何更改Gulp 的預設瀏覽器呢？ 我用mac, 當我輸入終端 gulp時，他會自動開啟safari, 我要怎麼手動改到chrome?

A：gulpfile.js —> index.js 找 function browser(){} 裡加上 browser: “google chrome”, 即可

Q：12/10 每日任務 jquery的結尾寫上 “return false”，當下覺得為什麼不是用 e.preventDefault()

A：相關的資料

Q：請問gulp的current: index是做什麼用的? A：可以移除，那裡主要是做變數用，你可以看看 。layout.ejs 的 title 可以推敲。 那裡的變數都可以自由新增，但要確保 layout.ejs 要對應。 有時可以做在選單切換上。 current 補在對應的 class 讓他變色，你可以玩玩看。

第八週重點

1. SCSS 結構再進化
2. 知道容器與模組的分離
3. 網頁架構的演進
4. BEM 設計模式 參考資料 Sass教學 (33) - BEM 設計模式
5. OOCSS 設計模式 參考資料 CSS 優良部份系列 - OOCSS 容器與內容分離、OOCSS 結構與樣式、容器與內容

網頁建置流程

1. 若是使用BS4，則不需在載入css reset myerweb
2. base 是全站設定，每個樣式都是共同的
3. utilities 通用類別
4. 寫區塊時可以加註解
5. SEO : 標題 h1~h5 權重要注意
6. SEO : h1標題是以單頁來看權重
7. SEO : ul li 主題列表
8. article : 裡面可以包好幾個 section
9. section : 裡面必須要有標題標籤
10. 不要用數字編號命名
11. 小網站可以語意，大網站盡量元件
12. 要更進階時就要『拋棄語意，擁抱元件』
13. 用外觀命名，元件化
14. 強調刻意練習的重要性
15. 出道三年內的前端工程師可以自己先建立資源庫

• CSS Reset
  • myerweb
  • normalize
• Base
  • 連結顏色
  • 標題設計
• helper、utilities：
  • BS4 程式碼
  • 提供學員用的範例程式碼

格線系統： OOCSS 代表：容器與內容分離

• 960 grid
• BS4 layoutit
• 學員範例 BS4 Grid

模組化概念

1. 佈局 layout、頁面 page (只出現一處)
2. 工具 helper、utilities
3. 模組 module、元件 component (出現兩處以上)
4. 容器 container、grid

模組框架介紹

• BS4、Source
• semantic-ui、Source

設計模式講解

• SMACSS
  • 擴增子模組
  • SCSS 結構
• OOCSS
  • 結構與樣式分離
  • 容器與內容分離
• BEM
  • __ 區塊
  • – 修飾符號