---
tags: 網頁切版直播班 - 2021 夏季班
---

# 洧杰老師 SCSS 評論

## 學習習慣心得牆
1. [Elaine Liu](https://www.notion.so/gonsakon/94c1f2a26e4c4566b670737fd5e4002a#1d85294f8b07492baf7e80b0e6954845)
* 每天會記錄三件學習上覺得自己很棒的事
3. [cate Chang](https://catechang.medium.com/%E7%B6%B2%E9%A0%81%E5%88%87%E7%89%88%E7%9B%B4%E6%92%AD%E7%8F%AD-2021%E5%A4%8F%E5%AD%A3-74c67be92b2c)
* **瞭解自己的精力狀態**：並讓自己持續有產出
* **轉換心態，將學習變成是一種習慣**：文中有提到「換個心態，只要每日練個 10 分鐘就好」
* **養成寫筆記習慣**：從 HackMD 轉為 Notion
4. [沈依蓉](https://common-rainforest-f60.notion.site/34027e83d78c4037917db127bfcb30bf)
* 會檢視問答資源，內化成自己的筆記
<!-- ([repo]()、[Demo]()) -->
# 第八週

## 嘉軒 ([repo](https://github.com/Kevin-Chia-Hsuan/gulp-week8-2-layout-training-2021)、[Demo](https://kevin-chia-hsuan.github.io/gulp-week8-2-layout-training-2021/index.html)) 一顆 🌟 - 語意跟結構都很棒
1. [這裡](https://github.com/Kevin-Chia-Hsuan/gulp-week8-2-layout-training-2021/blob/main/app/assets/style/helpers/_mixin.scss#L17-L31) ，可以嘗試 BS5 提供的[斷點 mixin](https://bootstrap5.hexschool.com/docs/5.0/layout/breakpoints/#min-width) 來統一
2. [.container](https://github.com/Kevin-Chia-Hsuan/gulp-week8-2-layout-training-2021/blob/main/app/assets/style/layout/_navbar.scss#L2-L4)是容器，建議容器跟客製化樣式抽離，讓容器 class 回歸他的用途，不要將樣式與容器 class 混在一起
3. 蠻多 pages 你都有用到 `object-fit: cover;`，或許可以嘗試用 BS5 的 util 擴充+斷點的方式來產生出對應的 util class
4. 預約列表各頁面你都是用 offset 硬推，那裡可以考慮讓格線搭配 flex 居中方式來設計，這樣就不用每個區塊硬推

## Harold ([repo](https://github.com/HaroldZhen/front-design-course-week8-doyoga)、[Demo](https://haroldzhen.github.io/front-design-course-week8-doyoga/)) 一顆 🌟 - 有嘗試拆出元件
1. 首頁 header 上的兩顆按鈕可以用 ul li 結構，比較不會用空 div
2. 首頁的「方案選擇」，裡面的產品名稱，不會是 h5 那麼低的權重，至少會是 h3~4，就像是一個文件有大標題，卻直接跳到第五標題，中間卻沒有副標題感到突兀
3. 首頁的「聽聽他們怎麼說」那裡的姓名也不會是 h6 這麼低的標題，如果你是想要剛好排版文字一樣，你可以用 `<h3 class="h6">標題</h3>` 來滿足
4. `/course.html` 的頁面，上課須知下方都會是 p 標籤，而不是 ul li
5. `_reboot.scss` 的 `.overflow-hidden` 跟 `main` 、`.fab` 不大算是 `reboot`
6. helper 嘗試得不錯
7. util 嘗試得不錯，不過裡面放變數 SCSS 有點違和，不宜放在 util 資料夾
8. `_swiper.scss` 放在 vendors 會比較合適
9. 元件嘗試得不錯，card 也有看到你有擴充

## Vic([repo](https://github.com/Hsuan777/2021SlicesWeek8)、[Demo](https://hsuan777.github.io/2021SlicesWeek8/index.html)) 兩顆 🌟，沒 pages 與 layout
1. header 的 `nav-item me-18 d-none d-lg-block` 空區塊為了推擠選單居中設計部分，可以再想下比較好的調整方式
2. 師資介紹的 `Ellipse38.png` 不見了導致破圖，可以再補上
3. `/reservation-2.html` 的性別少補了 focus
4. [這裡](https://github.com/Hsuan777/2021SlicesWeek8/blob/develop/app/assets/style/components/_img.scss)可以嘗試用規格，例如 xs、s、xl，或者是實際 44、66、216 來替代語意式命名
5. [這裡](https://github.com/Hsuan777/2021SlicesWeek8/blob/develop/app/assets/style/all.scss#L8)的`@import './helpers/base.scss';`可以改為`@import './helpers/base;`

## 黃士桓([repo](https://github.com/huan5678/week8-DOYOGA)、[Demo](https://huan5678.github.io/week8-DOYOGA/))- 半顆 🌟，SCSS base、component、vendors 寫得不錯

1. [banner](https://github.com/huan5678/week8-DOYOGA/blob/master/app/index.html#L7)部分，請用 background-position: bottom，讓人物可以靠下，目前 banner 沒有顯示人物完全，可以參考 [Vic](https://hsuan777.github.io/2021SlicesWeek8/index.html) 的 Banner 設計
2. [base](https://github.com/huan5678/week8-DOYOGA/blob/master/app/assets/style/base/_base.scss)、[components](https://github.com/huan5678/week8-DOYOGA/tree/master/app/assets/style/components)、[vendors](https://github.com/huan5678/week8-DOYOGA/tree/master/app/assets/style/vendor)寫得 ok
3. [logo](https://github.com/huan5678/week8-DOYOGA/blob/master/app/assets/style/helpers/_helper.scss#L1-L19)不算是 helper，比較偏向 pages 或 layout
4. [Sass map util](https://github.com/huan5678/week8-DOYOGA/blob/master/app/assets/style/utilities/_utilities.scss) 嘗試得不錯
5. `breadcrumb` 那裡的方案選擇是 ul li 結構
6. 每頁的 h1 配置得不錯，語意都蠻好的
7. `contact.html` 的表單 label、for 對應沒有寫到
8. `/reservation.html` 最下方的 aos 預約告知區塊顯示比較慢，看了下是 delay 設置過久 900ms
9. 首頁的頂尖師資，左邊的圖片過高

> 建議首頁的還原度還可以高一些，其他頁還不錯

## huanan ([repo](https://github.com/yx-chill/doyoga)、[Demo](https://yx-chill.github.io/doyoga/)) - 半顆 🌟，SCSS 嘗試得不錯
1. base 的[這裡](https://github.com/yx-chill/doyoga/blob/master/app/assets/style/base/_base.scss#L17-L19)不算是 base，如果找不到分類可放 layout 與 pages
2. [mixin](https://github.com/yx-chill/doyoga/blob/master/app/assets/style/helpers/_mixin.scss#L1-L5)的部分可以嘗試 BS5 提供的[斷點 mixin](https://bootstrap5.hexschool.com/docs/5.0/layout/breakpoints/#min-width) 來統一
3. [這裡](https://github.com/yx-chill/doyoga/blob/master/app/assets/style/helpers/_utlis.scss#L5-L28)不算是 util，util 最小單位是一個 CSS 功能，例如你有寫 `display:block`，那就會是 `d-block`，可以多瀏覽 Bootstrap 5 的通用類別瞭解用法
4. 有用到外部套件 [hover.css](https://github.com/yx-chill/doyoga/blob/master/app/assets/style/vendors/_hover.scss) 很棒
5. [這裡](https://github.com/yx-chill/doyoga/blob/master/app/assets/style/pages/_reservation.scss#L8-L10) 的語法，可以嘗試用 BS5 的通用類別取代，例如 `d-none`，可以多嘗試擴充通用類別來減少 util、pages
6. 不過你 layout、pages 量都很少了，這點很棒
7. 元件 [card 部分](https://github.com/yx-chill/doyoga/blob/master/app/assets/style/components/_card.scss)，若是 card 開頭，class 開頭也應是 card 為方向，裡面的命名有些違和
8. 首頁的 `感受身心，活在當下` 區塊，下方三個內容會是 ul li 結構，或是預約流程上面的進度條也會是 ul li 結構
9. `course.html` 有 h2、h4，卻沒 h3，這樣就像是一個文件有標題二跟四，卻沒標題三

# 第 6 週

## Tori - ([repo](https://github.com/aer456987/Art_Exhibition)、[Demo](https://aer456987.github.io/Art_Exhibition/)) - 一顆 🌟，[EJS](https://github.com/aer456987/Art_Exhibition/tree/master/app/components) 值得參考
1. [圖片](https://github.com/aer456987/Art_Exhibition/blob/master/app/assets/style/base/_base.sass#L7-L8) base 部分風險有點高， width:100% 意思是如果父層 DIV 很寬的話，原本小圖也會被拉到模糊
2. [body](https://github.com/aer456987/Art_Exhibition/blob/master/app/assets/style/base/_base.sass#L1-L2)設定也是，這樣是強制沒 x 軸，但如果因破版畫面超出時，會比較難除錯
3. 盡量減少 [class 名稱](https://github.com/aer456987/Art_Exhibition/blob/master/app/assets/style/base/_typography.sass#L1)跟頁面名稱有掛勾，原因第八週有提及，在元件與 util 搭配之下，不應有「頁面名稱命名」
4. [這裡](https://github.com/aer456987/Art_Exhibition/blob/master/app/assets/style/helpers/_helper.sass#L11-L20)會比較建議是元件，因為有樣式跟功能。helper 算是純功能的實現
5. [這個](https://github.com/aer456987/Art_Exhibition/blob/master/app/assets/style/utilities/_borders.sass)不算是 util，util 是最小單位，所以只會有一行語法，這寫法比較偏向是元件

.d-block(display:block)

6. [這裡](https://github.com/aer456987/Art_Exhibition/blob/master/app/assets/style/utilities/_shadow.sass)才算是 util
7. [這裡](https://github.com/aer456987/Art_Exhibition/blob/master/app/assets/style/utilities/_util.sass#L1)以 BEM 來說的話，__dark 代表裡面有子區塊，但妳這裡只有單一樣是設定，所以不符 BEM 規範，如果是我的話，我的 HTML 標籤會寫 `<a class="text-dark colorHover--secondary"` 用兩個 util 去組樣式，這樣會更靈活
8. [這裡](https://github.com/aer456987/Art_Exhibition/blob/master/app/assets/style/components/_card.sass#L1-L6)的 Code 的 hover 部分，就剛好上個建議可以用到相同概念
9. 有比較符合 BEM 部分，算是[進度條](https://github.com/aer456987/Art_Exhibition/blob/master/app/assets/style/components/_progressBar.sass#L18)的元件，不過這裡的`progressBar__text__undone`，應該要叫做 `progressBar__text--undone`，因為雙下底線表示裡面的子區塊，而雙中線 `--` 則是樣式，`undone` 你用來變更樣式，所以應為 `progressBar__text--undone`
10. 不用寫 `col-12`，BS 預設是 Mobile first，所以預設就是滿版
11. `pb-4.5` 這 class 可能會被業界視為過度設計，出現小數點的 class 會有點 over，幾種折衷的方式，其中一種就是以 `0.25 rem ` 為一個單位，或是以 2px 的倍數為一個單位，用整數值會比較好的。
12. 像是 `.h-x4` x 為 100 倍數想法不錯
13. `taiwanDesignExhibition.html` 的`學生、全票、愛心`那裡會是 ul、li 結構

## anna ([repo](https://github.com/annanaha/week6hw/tree/main/app)、[Demo](https://annanaha.github.io/week6hw/)) - 半顆 🌟，SCSS 嘗試得不錯
1. cart-part1.html 命名建議修正，例如第一頁改為 checkoutOrder.html，語意上會更好懂，要留意未來合作時，這些名稱都會跟其他工程師協作
2. `@import 'setting/_font.scss';` 可以改為 `@import 'setting/font';` 也能使用
3. [這裡](https://github.com/annanaha/week6hw/blob/main/app/assets/style/setting/_base.scss#L1-L7)不用 body 裡面依賴 ul、li，可以抽出來 ul li 即可
4. [這裡](https://github.com/annanaha/week6hw/blob/main/app/assets/style/setting/_mixin.scss#L1-L6)可以嘗試 BS5 提供的[斷點 mixin](https://bootstrap5.hexschool.com/docs/5.0/layout/breakpoints/#min-width) 來統一
5. [progressBar](https://github.com/annanaha/week6hw/blob/main/app/assets/style/page/_cart-p1.scss#L2-L15)可以嘗試拉出來變成元件 components
6. [這段](https://github.com/annanaha/week6hw/blob/main/app/assets/style/helpers/_bg.scss#L9) 算 pages.scss，或是 custome.scss
7. 把一些無法分類的東西放在 [style.scss](https://github.com/annanaha/week6hw/blob/main/app/assets/style/helpers/_style.scss) 來取代 pages，我覺得這想法不錯，可以做為日後優化的項目
8. 「猜你也喜歡」的部分因為 swiper 有些 BUG，所以出現了 x 軸
9. cart-part2.html 的「訂購人資訊」會是 h2~3 標籤，不會到 h4
10. 一個頁面一定會有一個 h1，像是 cart-part1.html 就沒有，但首頁是有的

## twoz ([repo](https://github.com/twozwu/layout-exhibition-week6/tree/main/app)、[Demo](https://twozwu.github.io/layout-exhibition-week6/))
1. SCSS 結構寫得不錯
2. layout 資料夾應是放共通區塊，所以 index.scss 這個名稱不符合，建議更名為 layout.scss，而 index.scss 裡面像是 footer class 則符合 layout 規範
3. _component 嘗試得不錯，section .menu，可以嘗試寫成 .menu
4. 有嘗試自行擴充 util 很棒
5. [這裡](https://github.com/twozwu/layout-exhibition-week6/blob/main/app/assets/style/pages/_product.scss#L5)不建議污染到 `.row`，因為 row 是容器設定，還請額外客製化 class 來取代樣式
6. 首頁的熱門特展底下的 `card` 列表可用 ul li 結構
7. 首頁的 `開幕對談｜藝術展演巡禮` 標題你用 h5，但建議用 h3~4
8. 首頁的熱門特展的產品區塊你寫 h5，至少會是 h3~4，就像是一個文件有大標題，卻直接跳到第五標題，中間卻沒有副標題感到突兀，就像是一個文件有大標題，卻直接跳到第五標題，中間卻沒有副標題感到突兀

## 咖哩 ([repo](https://github.com/hungcurry/week06)、[Demo](https://hungcurry.github.io/week06/)) 一顆🌟，有盡量手寫並搭配部分 BS5，接近真實業界情況，語意寫得不錯
1. 有點無法跟你的 CSS 對起來，是有些沒更新上去嗎？因為原本以為你都純手寫，但還是有看到有用到 BS5格線系統，但[這裡](https://github.com/hungcurry/week06/blob/main/app/assets/style/all.scss#L9)卻沒載入格線系統
2. 像是[這裡](https://github.com/hungcurry/week06/blob/main/app/assets/style/all.scss#L30-L45)也是，沒看到你 style 根目錄有這些檔案
3. checkout-A、B、C 命名建議修正，例如第一頁改為 `checkoutOrder.html`，語意上會更好懂，要留意未來合作時，這些名稱都會跟其他工程師協作
4. 盡量嘗試用[util]來產生 util class，藉此取代你 util 資料夾裡面其他的 SCSS 檔案
5. util 最小維度只會有一行工具語法，就像是積木一樣把語法組起來，所以這裡有[兩行](https://github.com/hungcurry/week06/blob/main/app/assets/style/utilities/_background.scss)就不合適
6. 這裡的 [992](https://github.com/hungcurry/week06/blob/main/app/assets/style/layout/_header.scss#L10) 可以嘗試用變數載入，而不是寫一個數字，用變數容易統一管理
7. 這裡的[名稱](https://github.com/hungcurry/week06/blob/main/app/assets/style/pages/_index.scss#L19)，建議改成 `.popular-card-title`
8. 承上，[這裡](https://github.com/hungcurry/week06/blob/main/app/assets/style/pages/_checkout.scss#L4-L8)如果我看 HTML 標籤的 class，很難聯想到 `checkout` 跟 `cartList` 有關聯性，建議命名為 `.checkout-cartList`，才知道他跟 `checkout` 有相關聯
9. 結構嘗試得不錯，語意寫得蠻好的

## Mei Lu ([repo](https://github.com/ying30821/week6)、[Demo](https://ying30821.github.io/week6/)) - 半顆🌟 有嘗試使用 BS5 util 擴充
1. [a 標籤](https://github.com/ying30821/week6/blob/main/app/assets/style/reboot/_reboot.scss#L8-L11)寫這樣有些風險，因為有時候連結會放在 p 段落裡面的其中的文字有連結，如果 a 全部都下 display: block 就會變成斷行，會建議不要放，有用到的 a 標籤就加上 class 即可，例如`<a class="d-block">按鈕</a>`
2. [util](https://github.com/ying30821/week6/blob/main/app/assets/style/utilities/_utilities.scss) 嘗試得不錯
3. [timeline 元件](https://github.com/ying30821/week6/blob/main/app/assets/style/components/_timeline.scss)嘗試得不錯，不過最後面的 active 沒有包在 timeline 內
4. pages 精簡得很棒了，例如 [text-indent](https://github.com/ying30821/week6/blob/main/app/assets/style/pages/_detail.scss#L30)可以嘗試用 util 來取代
5. 你提的問題，也有可能 gulp 本身不支援，或許也可以嘗試擁有多個 layout.ejs 來切換，可參考 [Gill](#Gill-repo、Demo) 作法
6. 「猜你也喜歡」的部分因為 swiper 有些 BUG，所以出現了 x 軸
7. 一個網頁都會一個 h1，不會都沒有
8. 首頁的熱門特展的產品區塊你寫 h5，至少會是 h3~4，就像是一個文件有大標題，卻直接跳到第五標題，中間卻沒有副標題感到突兀
9. `col-12 col-md-4 mb-2 mb-md-0` 的 class，可以移除 `.col-12`，因為預設就是滿版，可以不用 col-12

## YIJUN DAI ([repo](https://github.com/jun0527/hexschool_gulp_week6/tree/main/app/assets/style)、[Demo](https://jun0527.github.io/hexschool_gulp_week6/)) - 半顆🌟 語意寫得很不錯
1. 我花時間查了下，會出現 x 軸是因為你 footer 標籤裡面的 swiper 影響的關係，可以再移除該段觀看效果，並也看看其他同學如何處理這段
2. [base](https://github.com/jun0527/hexschool_gulp_week6/blob/main/app/assets/style/setting/_base.scss) 跟 components 寫得不錯！
3. [格線系統](https://github.com/jun0527/hexschool_gulp_week6/blob/main/app/assets/style/setting/_mixin.scss)部分，可以嘗試 BS5 提供的[斷點 mixin](https://bootstrap5.hexschool.com/docs/5.0/layout/breakpoints/#min-width) 來統一，會建議直接統一 mobile first，不要 max 與 min 混用
4. [util](https://github.com/jun0527/hexschool_gulp_week6/blob/main/app/assets/style/setting/_util.scss) 嘗試得不錯，也可以嘗試用 BS5 的 util 來產生出來
5. `header .banner` 可以寫成 `.banner` 就好
6. `leftColArea`、`rightColArea` 語意命名可以更好些
7. 「猜你也喜歡」的產品區塊你寫 h5，至少會是 h3~4，就像是一個文件有大標題，卻直接跳到第五標題，中間卻沒有副標題感到突兀
8. 手機版跟 PC 都顧得很好，棒棒~

## 阿熊([repo](https://github.com/hsiung0322/HexSchool-week6-exhibinection/tree/master/app)、[Demo](https://hsiung0322.github.io/HexSchool-week6-exhibinection/))
1. [這裡](https://github.com/hsiung0322/HexSchool-week6-exhibinection/blob/master/app/assets/style/_util.scss#L1-L15)可以嘗試修改 variable.scss 來覆蓋
2. [.btn](https://github.com/hsiung0322/HexSchool-week6-exhibinection/blob/master/app/assets/style/_layout.scss#L1-L4)不算在 layout 裡，你可以修改 variables.scss 的 btn 設定
3. [base](https://github.com/hsiung0322/HexSchool-week6-exhibinection/blob/master/app/assets/style/_base.scss)寫得不錯，部分有覆蓋掉 bootstrap 的 reboot
4. 可嘗試將這裡[區塊](https://github.com/hsiung0322/HexSchool-week6-exhibinection/blob/master/app/assets/style/pages/_checkout.scss#L11-L43)抽離出來變成元件
5. [這裡](https://github.com/hsiung0322/HexSchool-week6-exhibinection/blob/master/app/assets/style/pages/_product.scss#L4-L5)你可以嘗試用 BS5 的[背景 util](https://bootstrap5.hexschool.com/docs/5.0/utilities/background/#background-color)來取代
6. 首頁的「猜你也喜歡...」那裡是 ul li 結構
7. checkout-1.html 的 「2020 台味設計展 」的標題權重不會那麼低，至少會是 h2~4，就像是一個文件有大標題，卻直接跳到第五標題，中間卻沒有副標題感到突兀
8. checkout-2.html 的左右區塊，左邊區塊你寫 `col-12 col-lg-8 d-flex order-2 order-lg-0`，可以將 col-12 移除，因為預設就是滿版，不需要特別設定，其他頁面也一樣

## ZY Hsu([repo](https://github.com/zihyinhsu/exhibition)、[Demo](https://zihyinhsu.github.io/exhibition/))
1. [這行](https://github.com/zihyinhsu/exhibition/blob/master/app/assets/style/all.scss#L7)可以移除，因為 bootstrap.scss 本身就有載入這個
2. [這裡](https://github.com/zihyinhsu/exhibition/blob/master/app/assets/style/setting/_base.scss#L9-L15)不需要包在 body 裡來增加階層，.material-icons 不算 base
3. [這裡](https://github.com/zihyinhsu/exhibition/blob/master/app/assets/style/setting/_util.scss#L25-L36) 是 helper，不是 util，util 是最小單位，只有一行設定
4. [這裡](https://github.com/zihyinhsu/exhibition/blob/master/app/assets/style/component/_component.scss#L11-L21)是 pages，不是元件
5. 一個網頁只會有一個 h1，不會有兩個以上，像是首頁你就有 6 個 h1
6. 首頁的 swiper-slide 結構是 ul li
7. 表尾的訂閱我們的 col-8 可以移除
8. .nav-scroller 裡面會是 ul li 結構
9. 首頁有 h1、2、4，但唯獨沒有 h3，就像是一個 word 文件沒有標題三，結構上不正確

## YuriT ([repo](https://github.com/WenfishTseng/pages-gallery)、[Demo](https://wenfishtseng.github.io/pages-gallery/index.html))
1. [這裡的 body 設定](https://github.com/WenfishTseng/pages-gallery/blob/master/app/assets/style/base/_base.scss#L35)，可以透過 BS5 variables.scss 去修正
2. [container](https://github.com/WenfishTseng/pages-gallery/blob/master/app/assets/style/base/_base.scss#L37-L47)請不要放在 base，container 算是容器，寫在 layout、grid.scss 會比較合適
3. [mixin](https://github.com/WenfishTseng/pages-gallery/blob/master/app/assets/style/helpers/_mixin.scss)可以改成 BS5 提供的[斷點 mixin](https://bootstrap5.hexschool.com/docs/5.0/layout/breakpoints/#min-width)
4. 可以思考看看[這段](https://github.com/WenfishTseng/pages-gallery/blob/master/app/assets/style/helpers/_mixin.scss#L38-L42)，改成以下寫法，這樣 CSS 複用性會比較高

.bgCoverCenter{
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

5. [這裡的 Code](https://github.com/WenfishTseng/pages-gallery/blob/master/app/assets/style/layout/_layout.scss#L25) 可以用 BS5 的通用類別 [overflow](https://bootstrap5.hexschool.com/docs/5.0/utilities/overflow/) 取代
6. 可以多嘗試 pages、layout 資料夾的程式碼，都盡量用現有的 通用類別(util) 或擴充、更改既有 BS5 變數、新增元件來取代。
7. pages 的 code 很少，代表 BS5 整合得不錯，也可以嘗試繼續優化，例如[這裡](https://github.com/WenfishTseng/pages-gallery/blob/master/app/assets/style/page/_index.scss#L17)的標籤，可以嘗試用 BS5 的字型來覆蓋，例如寫 `.h5`、`.fs-5`
8. 在 [checkout-Order.html](https://wenfishtseng.github.io/pages-gallery/check-order.html) ，下面有多餘的內容，看起來是 layout 沒有轉換成，沒有 footer 版本，可以參考 [Gill](https://github.com/gill74123/week6/tree/main/app) 的 Layout EJS 規劃
9. 在推擠空間時，可以不用空的 col 來推擠，可以善用 [offset](https://bootstrap5.hexschool.com/docs/5.0/layout/columns/#offsetting-columns)
10. 點選表頭的購物列表 icon ，console 有報錯，可以再看看問題
11. `col-md-3 col` 可以只寫成 `col-md-3` 這樣就好，手機會自適應
12. `checkout.html` 有看到 `col-md-2 offset-md-5` 這樣的 code，但因為該頁面只有一行文字居中，所以寫 text-align: center 也可以

## Gill ([repo](https://github.com/gill74123/week6/tree/main/app)、[Demo](https://gill74123.github.io/week6/))
1. [mixin](https://github.com/gill74123/week6/blob/main/app/assets/style/mixin/_images.scss)的部分，可以寫成 .img-cover、.bg-img 寫在 helper 會比較好，想想看如果很多地方都用了 mixin，表示編譯出來的 CSS 會變得臃腫，重複性 code 會很多，不如寫 class，並套用在對應的 html 標籤會比較好
2. helper 資料夾裡面有些 SCSS ，有些覺得放到 components 資料夾會比較合適，例如 timeline、card、cartlist
3. checkout-2.html 那裡的表單記得要做 label、for 的對應
4. [text-indent](https://github.com/gill74123/week6/blob/main/app/assets/style/pages/_designInfo.scss#L33-L35) 比較像是 util，不是和放在 pages，若會推擠多行，也需要增加單位，例如 text-indent-2
5. SCSS 資料夾整體結構拆分蠻清楚的
6. [這裡](https://github.com/gill74123/week6/blob/main/app/assets/style/utilities/_font.scss)可以嘗試拉出 BS5 的 util scss map 在自己的 all.scss 去覆蓋，可看[這篇](https://hexschool-share.slack.com/archives/C0201HR4W5P/p1628841738005900)討論
7. ejs 這樣規劃可以的，也有看到你用了 [@include 語法](https://github.com/gill74123/week6/blob/main/app/layoutCheckout.ejs#L25)來去管理，很棒哦 :D
8. 首頁的 h2 熱門特展是對的，但裡面的 2020 台味設計展 下 h4 則不大對，因為直接忽略了 h3，就很像是你有個區塊有副標題，第四大標題，但卻忽略的第三大標題
9. footer 如果你寫死高度了，那麼運用 flex 屬性讓區塊靠下也可以，裡面區塊用絕對定位不大合適
10. 購物車 modal 最下面的 「前往結帳 」會被檔到，不易點擊，如下圖，滾不到下面點擊，只露出一點點
<img src="https://i.imgur.com/BOPIZYO.png" width="300">

## Joy Cheng([repo](https://github.com/Joy-port/week6-exhibinection/tree/master/app)、[Demo](http://exhibinection.joycheng.io/)) 🌟 - 不敢相信我的眼睛，layout、page 都沒有..XD
1. 有透過 BS5 變數擴充不錯
2. 這個沒用到的話請移除 >> assets/style/helpers/bootstrap.scss
3. 這個叫做 bootstrap 有點奇怪，因為她是 BS5 裡的 util >> Exhibinection/app/assets/style/utilities/_bootstrap.scss
4. mixin 裡面寫的東西有點刻意，有可能會變成只有少數地方會用到，mixin 使用時機是當用到的頻率比較高時，拆成 util 或 mixin 才比較有用途，裡面只有[這裡](https://github.com/Joy-port/Exhibinection/blob/master/app/assets/style/mixin/_sizing.scss#L16-L28)是覺得 ok 的
5. 我後來研究很久，發現你其實是想做到全元件+util，有個極端的方式就是，你透過 BS5 的 util，自己產生一個寬、高的 util，例如 .w-1，1 的單位是 4px，.w-10 則是 40px，來產生出你要的 class，這樣會比你[這裡](https://github.com/Joy-port/Exhibinection/blob/master/app/assets/style/utilities/_sizing.scss)寫死一個單位還好些
6. 但我自己是覺得你寫的 util 的[客製化寬高]((https://github.com/Joy-port/Exhibinection/blob/master/app/assets/style/utilities/_sizing.scss))，也是代表你找到了設計師的規律性，這樣刻意練習也很棒哩 ~
7. components/_timeline.scss 的嘗試很棒！
8. 其他的元件例如 推播、bar、swiper 都蠻合適的
9. 你有提到購物車彈跳視窗的作法，用 offcanvas 做是否 ok，我覺得拿來取代 modal 也是可的
10. order-info.html 點選優惠碼的 label 會跳到 focus Email

## 黃士桓 ([GitHub Repo](https://github.com/huan5678/week6-EXHIBINECTION)、[Pages](https://huan5678.github.io/week6-EXHIBINECTION/)) 🌟🌟 沒有 pages 資料夾！
1. 這個 [mixin](https://github.com/huan5678/week6-EXHIBINECTION/blob/master/app/assets/style/mixin/_breakpoint.scss) 可以嘗試提取 BS5 的斷點 Mixin 來做，這樣你就不需要這個 mixin
2. [helper.scss](https://github.com/huan5678/week6-EXHIBINECTION/blob/master/app/assets/style/helpers/_helper.scss) 我比較感覺他接近 components，helper 主要是工具類的 class，裡面我覺得 circle 算是 helper，.link、.img 接近 components，.divider 比較難以分類，不過在 [7+1](https://gist.github.com/rveitch/84cea9650092119527bc) 格式裡，或許放 theme.scss 會比較合適
3. .index-banner 名稱可以叫做 .hero
4. 在 banner 部分，如果會透過後台上稿 banner 的話，banenr 背景就不會寫在 CSS，而是寫在 HTML inline style，例如 `<div style="backgroun('url')" class="bgCoverCenter"></div>`，方便後端將網址路徑塞在 HTML 標籤 style 上，只是單純提一下
5. .index-nav 建議叫 .nav 或其他，不要用頁面名稱來取名
6. 要自訂[CSS Reset](https://github.com/huan5678/week6-EXHIBINECTION/blob/master/app/assets/style/base/_reset.scss) 來覆蓋 bootstrap 的 reboots.scss，這樣可以，但是有些設定有重複覆蓋，例如 body margin 0px，如果知道覆蓋原理，這樣做也是可以就是，但就留意是否會跟 reboot.scss 有衝突就好
7. footer 標籤可以充當 div 標籤，可以把這裡的內容 `footer d-flex flex-column justify-end` 寫在 footer 標籤上，讓結構更簡潔

## Lina Chen ([GitHub Repo](https://github.com/Lina-SHU/art_exhibition)、[Pages](https://lina-shu.github.io/art_exhibition/)) - 🌟 適合新手檢視
1. [這裡](https://github.com/Lina-SHU/art_exhibition/blob/master/app/assets/style/helpers/_base.scss)的 4 與 17 行，可以寫在 helper/variable 上的 [302](https://github.com/Lina-SHU/art_exhibition/blob/master/app/assets/style/helpers/_variables.scss#L302) 行、[433](https://github.com/Lina-SHU/art_exhibition/blob/master/app/assets/style/helpers/_variables.scss#L433) 行。
2. [_mixin.scss](https://github.com/Lina-SHU/art_exhibition/blob/master/app/assets/style/helpers/_mixin.scss) 裡面的 banner mixin，取名叫做 bgCoverCenter 會比較合適
3. [util.scss](https://github.com/Lina-SHU/art_exhibition/blob/master/app/assets/style/helpers/_util.scss)這檔案比較像是 Bootstrap 裡面的 helper，util 只會有單一設定，不會因為斷點而改變樣式設定
4. 以 [banner.scss](https://github.com/Lina-SHU/art_exhibition/blob/master/app/assets/style/layout/_banner.scss) 來說，我會將[_mixin.scss](https://github.com/Lina-SHU/art_exhibition/blob/master/app/assets/style/helpers/_mixin.scss) 裡面的 banner mixin 移除，然後寫以下程式碼，好處在於說，不會因為我四處有用到，就多八行相同 CSS 變得臃腫，而是有會用到的 HTML 標籤，我就下 `.bgCoverCenter`，在 CSS Code 上會更簡潔，並且實用度上會更高。

.bgCoverCenter{
  background-size: cover;
  background-position: center center;

}

5. [footer.scss](https://github.com/Lina-SHU/art_exhibition/blob/master/app/assets/style/layout/_footer.scss#L2-L3) 這裡我會在 .footer 的 HTML 標籤下 `pt-3、pb-3`之類的 class，並移除這裡的 CSS 樣式，但你有善用 BS5 變數 $spacer 我覺得很棒
6. 以一個元件設計來說，進度條很常會出現在各個網站上，例如「購物流程階段」、「退貨流程階段」，所以這裡的 [Code](https://github.com/Lina-SHU/art_exhibition/blob/master/app/assets/style/layout/_process.scss#L7-L17) 也可以思考變成 components 元件
7. 有看到你命名了「_confirm.scss、_orderFinish.scss」的名稱，裡面都是購物流程的頁面，但從 SCSS 檔案名稱來論，很難看出他們都是隸屬購物流程，或許可叫做 `cartConfirm、cartOrderFinish.scss` 會比較合適

## Vic ([GitHub Repo](https://github.com/Hsuan777/2021SlicesWeek6)、[Pages](https://hsuan777.github.io/2021SlicesWeek6/index.html))
1. 表尾的訂閱我們，h2 可以不用納入格線系統裡，表單如果是為了格線系統對齊，可以納入，因為文字很容議會增減，用格線會有點風險
2. 表尾區塊的左側內容跟右側內容有差異，不宜包成三個 li ，右側可以一個 ul 包 兩個 li，左側的 copyright 獨立出來
3. /payInfo.html 的產品標題，例如 2020 台味設計展，通常都會設計為標題標籤
4. min-h-md-50vh min-h-lg-70vh 的部分，右側內容如果是我做，我會隨著螢幕解析度的高度內容來嘗試置底，不會寫死 vh，另外結帳流程頁面沒有 footer，可以嘗試作兩個 layout 來滿足
5. /userInfo.html 的姓名欄位的 label、for 沒有對應到
6. [selet (選取)](https://github.com/Hsuan777/2021SlicesWeek6/blob/develop/app/assets/style/helpers/components/_select.scss)元件嘗試得不錯
7. 把所有的檔案都放在 helper 會有點不大合適，在 BS5 的 helper 意思是「輔助語法」，例如 layout 的部分就不適合放在 helper 資料夾
8. 這個 _project.scss 的檔案，project 較難聯想是什麼意思，看起來比較像是 helper 跟 page 的混合？
9. 這隻 [_img.scss]([_img.scss](https://github.com/Hsuan777/2021SlicesWeek6/blob/develop/app/assets/style/helpers/_img.scss)) 檔案蠻適合嘗試元件化，也就是常見的圖片效果
10. [tools](https://github.com/Hsuan777/2021SlicesWeek6/tree/develop/app/assets/style/helpers/tools) 資料夾，比較適合叫做 vendors，tools 比較像是自己寫的工具類 class，較難聯想成是第三方套件

## Harold ([GitHub Repo](https://github.com/HaroldZhen/front-design-course-week6)、[Pages](https://haroldzhen.github.io/front-design-course-week6/index.html)) - 有嘗試作元件化
1. mb-md-mdx2 是指兩倍的意思？class 可以再精簡優化
2. [util](https://github.com/HaroldZhen/front-design-course-week6/blob/master/app/assets/style/utils/_after-utilities.scss) 用 merge 方式增加的練習不錯
3. [min-h-350](https://github.com/HaroldZhen/front-design-course-week6/blob/master/app/assets/style/utils/_utilities.scss#L1-L3) 的 class 有點刻意，建議可以放在 pages，如果使用頻率不高的話
4. [這裡](https://github.com/HaroldZhen/front-design-course-week6/blob/master/app/assets/style/utils/_utilities.scss#L5-L23)的程式碼，也可嘗試用 util 來新增
5. 如果以 BS5 helper 來定義的話，這個檔案只有這[區塊](https://github.com/HaroldZhen/front-design-course-week6/blob/master/app/assets/style/utils/_helper.scss#L25-L27)符合，其他都算是 pages
6. [components](https://github.com/HaroldZhen/front-design-course-week6/tree/master/app/assets/style/components) 資料夾嘗試抽離元件不錯，像是 `progressbar`、`date`，確實是有機會出現在多處的，抽出來做元件合理。不過要留意元件都是以「外觀」、「功能性」來命名，比較不會針對「頁面語意」來命名，像是 [_shopping.scss](https://github.com/HaroldZhen/front-design-course-week6/blob/master/app/assets/style/components/_shopping.scss) 就不大適合。像是裡面也有顯示「__productImg2」，這樣的話，這個元件就只能放在產品列表與圖片。但若是有天要擴充「會員列表」，結果發現介面也蠻適合使用 shopping 元件，此時就會造成語意衝突
7. 這裡蠻常看到你用 [box](https://github.com/HaroldZhen/front-design-course-week6/blob/master/app/assets/style/pages/_detail.scss#L14)命名，建議改成 `body` 會比較合適，例如 .detail__body，像是 BS5 的 card 元件也有類似的容器命名設計
8. [這段](https://github.com/HaroldZhen/front-design-course-week6/blob/master/app/assets/style/all.scss#L5)可以嘗試載入 node_modules 的 bootstrap scss
9. pages 的量很少，表示你 util 跟 component 都優化得很好，很棒哦 :D

# 第3~4 週
## [ZY Hsu](https://github.com/zihyinhsu/glasses) - 適合新手檢視
1. setting 資料夾不適合放 layout、header、footer.scss，setting 意思比較算是設定檔的概念
2. [這裡](https://github.com/zihyinhsu/glasses/blob/master/app/assets/style/setting/_variable.scss#L46-L58)無依照倍數來設定，10 直接跳 11，這樣會導致與你合作的伙伴，會不瞭解你的邏輯
3. 變數 SCSS 建議裡面不要放 mixin，抽離出一個 mixin 來放置會比較合適
4. base 寫得 ok，但 p 段落的斷點要衡量，一般 base 不常會放斷點設定
5. 有在 layout.scss 看到 Title 的命名，建議開頭不要大寫，請一律開頭都小寫，CSS 命名上大部分都是小駝峰命名，開頭都是小寫，例如 .productList，像是你這裡的[命名](https://github.com/zihyinhsu/glasses/blob/master/app/assets/style/pages/_blog.scss#L13)
6. layout 裡面有些東西不算是 layout，例如 siteCard
7. [.btn](https://github.com/zihyinhsu/glasses/blob/master/app/assets/style/pages/_index.scss#L353-L366) 這名字很普遍，建議獨立出來，不要放 index，可以拉出來一個 .btn.scss 做元件 component

## [Tori](https://github.com/aer456987/GlassShop_week3) - 適合新手檢視 - 半顆星 🌟
1. 這[兩個](https://github.com/aer456987/GlassShop_week3/blob/master/app/assets/style/all.sass#L7-L8)不建議放在 config，config 算是資料初始化
2. component 嘗試得不錯，但通常 component 比較少加上斷點後的客製化設計，可觀看 BS5 的元件設計方式，不過實務上需要也是可放
3. 本週五上課完後，嘗試在 util 加上斷點 class 設計，例如 .mb-sm-1
4. 當 util 加上斷點後，[這裡](https://github.com/aer456987/GlassShop_week3/blob/master/app/assets/style/pages/_blog.sass#L141-L148)的語法，就可以在 HTML 標籤加上 mb-3、mb-md-4、.d-md-none 來取代這裡所有的 code，讓 pages 的 code 量變得更少，其他方式也可一併思考簡化方式
5. [這裡](https://github.com/aer456987/GlassShop_week3/blob/master/app/assets/style/pages/_index.sass#L1-L2)可以嘗試簡化，例如用一個 .index-title 取代所有的 class

## [Shani](https://github.com/ShaniMaCC/glasses_Store_hexschool/blob/master/app/assets/style/all.scss) - 適合設計師檢視
1. @import "import/_variable.scss"; 也可寫成 @import "import/variable";
2. 建議不要全放到 import ，可以根目錄拆各個資料夾來放
3. 變數寫得很棒！
4. util 嘗試得不錯！之後可以觀看之後的直播瞭解 BS5 產生 util 的邏輯
5. mixin 嘗試得不錯，不過也能思考，有沒有些複用性高的區塊，做成 component class 的方式，可以檢視 [Tori](https://github.com/aer456987/GlassShop_week3) 的 component 看看。好處是說就用你寫好的 class，會用到的話，就直接在該 HTML 標籤加上 class 就好，而非用 @mixin 的方式產生過多相同的 CSS 樣式在各個 class 標籤
6. .blog-Tags 建議改為 .blog-tags，其他也一致調整，實務上不會在子區塊開頭是大寫，在程式命名時，命名的大小寫都有其用途，有興趣可以關鍵字搜尋大小駝峰命名法
7. 且你 .blogContent 裡面的 -date 則是小寫，也不具有一致性，建議統一第六點寫法
8. 請盡量減少方向式命名，例如 `footerRight`，盡量改以語意命名，例如 `footerCopyRight`、`footerContact` 等等，因為在響應式設計上就變成單欄式排版，就沒所謂的左右邊

## [peter](https://github.com/PeterCHEN-JIANRONG/gulp-glasses-rwd-1/tree/master/app/assets/style) - 半顆星 🌟
1. grid.scss 比較適合放在 components
2. [type](https://github.com/PeterCHEN-JIANRONG/gulp-glasses-rwd-1/blob/master/app/assets/style/config/_variables.scss#L55)，字型，變數設定得不錯
3. `h4 h6-pad` 這樣的嘗試不錯，之後可嘗試 Bootstrap 針對斷點來嘗試，例如 .font-md-xl
4. 元件嘗試得不錯
5. [這裡](https://github.com/PeterCHEN-JIANRONG/gulp-glasses-rwd-1/blob/master/app/assets/style/layout/_footer.scss#L12-L15)之後觀看 BS5 util 設計方式後，可以嘗試用 class="d-flex justify-content-between align-items-center" 取代，詳細可看 BS5 通用類別 [flex](https://github.com/PeterCHEN-JIANRONG/gulp-glasses-rwd-1/blob/master/app/assets/style/layout/_footer.scss#L12-L15)，藉此消滅更多的重複 code
6. 有看到你用 [BEM](https://github.com/PeterCHEN-JIANRONG/gulp-glasses-rwd-1/blob/master/app/assets/style/layout/_navbar.scss#L8-L15)，但給個建議，有時候用 util 可以消滅的，就不需產生出該 class 區塊， BEM 常搭配元件設計使用。
7. 有看到你圖片問題，在 bootstrap 5 設計上，util 通用類別都會在語法後面加上 !important 來硬蓋掉元件樣式，你也可試試看

## [vivian](https://github.com/vivian1223/Course-admin/tree/main/scss) - 第五週 SCSS 結構
1. grid 在 bootstrap 4 概念上，他算是 component
2. @import 'helper/container'; 覺得可一併放在 util/grid 裡面，因為都是容器
3. _font-style.scss 這個不會放在 component 資料夾，會命名為 typography，並放在 helper 資料夾，再來名字會叫做 .font-monospace
4. link.scss 也是會放到 util，不宜放到 component
5. btn.scss 裡面有一個 .btn-file 有點刻意針對特定區域做設定，看是否能用 util 來取代，因為在專業設計上，會盡量減少語意式命名(.cart、.login、.index)，而是針對工具或元件外觀來命名(.card、.pagination、.mb1)
6. sass each 產生 class 嘗試得很棒
7. _variables 接下來可以觀看 BS5 產生 [util+斷點](https://github.com/twbs/bootstrap/blob/main/scss/_utilities.scss) 的方式來設計

## [Joy Cheng ](https://github.com/Joy-port/week4/tree/master/app/assets/style)
1. base 資料夾不宜放 reset，兩者用途不同
2. 可以看出你很認真嘗試去做拆分，這裡會依照你拆分的檔案給予意見
3. 如果以 BS5 結構來說，這裡適合為 [util](https://github.com/Joy-port/week4/blob/master/app/assets/style/all.scss#L11-L15)
4. [這裡](https://github.com/Joy-port/week4/blob/master/app/assets/style/all.scss#L16-L17)為 components
5. [這裡](https://github.com/Joy-port/week4/blob/master/app/assets/style/all.scss#L19-L20)不算 component，因為元件是會出現在各處，但 logo 僅只有一處顯示
6. 很棒的是你開始在用 util，下一步你可以開始減少 pages 跟 layout 的 code，像是[這裡](https://github.com/Joy-port/week4/blob/master/app/assets/style/pages/_posts.scss#L18-L24)，你可以透過 util 加上斷點來取代這裡的 code
7. 字體相關設定放 _typography 我覺得可以
8. 在 card.scss 上，此為歸類在元件，通常元件比較不會加上斷點，而看了下你的斷點都在調整距離的部分，這段在本週五討論格線系統會再進行說明，可以再看下

## [alpha](https://github.com/alphatero/gulptest)
1. layout 就不需要再次載入 variable.scss，其他地方也是
2. mixin+content 嘗試得很不錯
3. _index.scss 的 .h3 ，請寫在 base 上
4. _index.scss 的 order-1 order-2 請寫在 util.scss 上
5. 不建議直接在 _index.scss 寫 form 標籤，一個網頁會有許多 form 標籤，建議還是給個 class 在 form 標籤上，像是 location.scss 那裡的 label 也是
6. 變數 SCSS 裡面的 $mt 建議改成 $mt-1
7. variable 比較像是 變數+base+util，建議可以拆開

## [Kent](https://github.com/spmdl/optical-website/tree/master/app/assets/style) 🌟
1. base 資料夾不適合裡面放 reset，reset 跟 base 是不一樣用途，可一起放 helper
2. _utilities.scss 嘗試得很棒
3. _helpers.scss 請嘗試用 util 來取代，太過客製可寫在 pages，裡面只有 .image-replace-text 合適
4. 通常元件裡面不會搭配[斷點](https://github.com/spmdl/optical-website/blob/master/app/assets/style/components/_card.scss#L6)，建議移除
5. 這裡分享一下，component 的設計目的在於說，若一個元件會出現在多個頁面時，就合適將該區塊設計成 component，不過像是 [form](https://github.com/spmdl/optical-website/blob/master/app/assets/style/components/_form.scss) 的部分，只有首頁有出現，那麼就不宜設計成元件，但是刻意練習是不錯的。
6.** header 與 footer 的程式碼量已經很少了，表示你藉由 util 跟 component 的功力越來越好，但可以的話，盡量少到連 layout 都沒有**

Q：_variables 通用類別是否需要為了特別的樣式做設置（只用到一次的），ex: 設計稿中的 footer 間距、首頁 banner 文字 「看得清，才能看得遠」

A:如果真的很少見，就真的會設定在 pages 上，但假使有潔癖的話，在用 each 產生 util class 時，會順道產生出來

Q：class 要用 util class 寫在 html 或是 sass css 的抉擇，ex：index 中的 crossoverProduct__subTitle，這邊需要 class 中下置中語法所以會在寫 scss class，但又有些樣式是已有的 util class，因此我就陷入有些樣式要使用 util class 寫在 html 中或是寫在 scss class 中，想問校長平時怎麼抉擇的（有發現 flex 相關的大多會寫在 html）。

A：可以的話，我會盡量全部都產生 util scss，然後寫在 html 上

Q：media class 問題，之前寫 Bootstrap 時是手機優先 min-width，因此在特定斷點寫樣式比較容易方便，但這次使用 PC 優先 max-width（努力將所有斷點相關設置都改為 max-width），但在做特定斷點的樣式(ex：只有 PC 才有效果) 的寫法是，寫一個 @media(min-width: xxxx) 再將樣式寫在裡面，不知道這樣寫法會不會有什麼問題，在 PC 優先的情況下。

A：原來如此，難怪我看有些地方還會寫 media 在裡面，想說你不是有客製化做這段，這裡我會建議要就一致做 min-width 就好，不要 max-width 與 min-width 混用

Q：component 問題，在做 index 客戶推薦時將樣式拆為 card component，但後來做門市據點時發現不能沿用，一直在思考如何將 card 拆的更好一些使它擴充性更高，想詢問校長有沒有推薦的學習資源

A：要靠經驗了哈哈，有個想法，就是你去看 BS5 的 SCSS Code，之後第六週跟第八週設計稿，你刻意不用 BS5 的按鈕或特定元件，嘗試自己產生元件來取代。學習資源 BS5 SCSS 就是你最好的範本庫

Q：font-weight 命名以及斷點的問題 命名問題：一開始參考 Bootstrap 的命名但發現太少，後來直接照著設計稿的粗細英文為命名，想問校長 $font-weights 這樣命名可以嗎？ 斷點問題：在 helpers/_utilities.scss，有設置 font-weight css 中也有吃到樣式，但在 html 中下樣式卻沒有吃到(fw-md-medium)，因為設計稿的首頁 banner 的文字（Promise-Desert 2020 早春系列）在 pad、mobile 的斷點中 font-weight 變為 medium，想請校長幫我看看他沒吃到 fw-md-medium 的問題

A：這裡我先檢視 SCSS 結構，樣式問題你可以再 Debug 一下

## [Jessie Cheng ](https://github.com/JessieMosbi/glasses-website/tree/master/app)
* module 不宜放在 config，config 算是初始設定檔
* mixin 嘗試得不錯
* base 裡面的 .con 系列不宜寫在那裡，比較適合放在 util 組成或 component
* 不建議用 $red-1，以 bootstrap、tailwind 來設計紅色由淺至深的設定，可以用 $red-100~700
* _index.scss 的 .h2、.h3 比較適合放在 base
* 不建議寫 .banner .container，.container 通常都是單一容器共用化，盡量不要讓他依賴在前面有語意，但如果 .banner 裡面有容器需求，且很客製化，可以叫做 .banner .banner-container
* [這裡](https://github.com/JessieMosbi/glasses-website/blob/master/app/assets/style/page/_index.scss#L182-L183)可以嘗試用 util 來取代

## [Sz](https://github.com/Szyln/slicing.w4.glasses)
1. 不建議叫做 import 資料夾名稱，會建議拉出來在第一層上，import 這名稱比較像是外部套件，若是載入外部套件 SCSS，會使用 vendor 的名稱
2. 變數嘗試得不錯，如果[這裡](https://github.com/Szyln/slicing.w4.glasses/blob/main/app/assets/style/import/abstract/_variables.scss#L3-L4)使用率不高，建議可不用成變成變數
3. mixin 嘗試得不錯
4. base 資料夾不適合放進 reset.scss
5. _length.scss 比較合適叫做 _sizing.scss，可以觀看此[區](https://bootstrap5.hexschool.com/docs/5.0/utilities/sizing/)
6. 如果有用到 BEM，.feedback-card，請叫做 .feedbackCard
7. 以前會推崇有 theme.scss，但自從有了 util 概念後，其實你 theme 資料夾裡面都可稱為是 util 設計

## [Fred Chang](https://github.com/fred8196/webLayout-week3/tree/main/app/assets/style)

1. all.scss 建議統一格式，不要有些載入有下底線，有些沒有
2. 變數嘗試得很棒 :+1:
3. _mixin.scss ，pad 請改成 992、mobile 改為 767px
4. base.scss，就我來看比較像是 工具類 class(mb-1)、全站樣式、容器的混合，mb-1~6 請用 _util.scss 拆開，容器 .container 請放到 layout~

## [Jerry Yen](https://github.com/jerry160726/Week-3---QA/tree/main/sass)

1. 這個版型的 container 寬度是 1110，請不要寫 max-width:75%，因為每個載具的寬度都不一樣，寫 75% 會導致觀看的樣子都不一樣
2. 網頁的 h1、2、3 安排都蠻好的，如果 h1 要放內頁，那麼就得看下其它頁面都要留意 h1 的位置
3. all.scss 請不要在裡面寫 scss，all.scss 都只能拿來 @import 其它 scss 用，可以獨立一個 base.scss 放 11~27 行內容
4. grid.scss，768px 請改為 992px，375px，請改為 767px，原因是我用 iPhone Plus 414px 觀看時，你的介面並沒有轉成手機版，只有寫 375 以下，就表示你在 767~376 是完全捨棄掉的，所以 767 以下都變成手機版會比較乾脆
5. mixin.scss 是個蠻好的嘗試，但是有種作法是，直接寫 class .pl-5，然後在 HTML tag 加上 `<h2 class=“pl-5”>` 也是提升複用性作法，好處是你沒必要讓你的 CSS 肥大，只要寫一個 class，直接套用在 HTML 上就搞定，不過 hover mixin 嘗試得很棒
6. 你在 qa.scss 改 .container 斷點設計這樣不好，因為 container 算是容器，你把他歸類在 qa 的單獨頁面上，這樣之後修改會很難找，建議把他放在 reset.scss 或 base.scss 會比較合適
7. 你不需要在 header 與 footer.scss ，都寫上 .pl-5、.pr-8 設定，只要寫在一處就好，你可以自己觀察你編譯出來的 css 結果，會編譯出多個
8. 變數不要在各個 scss 上，應統一在一個 variable.scss 來統一管理，原因一樣，你散佈在各個 scss 上會難找

## [Mikan](https://github.com/ElaineSung/glasses-web/tree/master/app/assets/style)

1. @import “_variable.scss”; 可寫成 @import “variables”;
2. base 全站設定正確，但要留意如果各個 h2 樣式不一樣時，則不能寫死在 HTML 標籤上
3. font-size 嘗試得不錯，剛好此規則有應用在網頁上，你才會想這樣嘗試吧？
4. $spacing-lv1 可以改為 $spacing-1 就好~
5. grey 變數，請用 100~700 從淺至深來調整，不要用編號 1~2，這設定在 BS5、tailwind 框架也有類似概念
6. 想不到你直接把格線拉出來用，蠻棒的嘗試 :+1:
7. .container--form 這類 class 不宜這樣設定，他算是容器設定，應是以容器 size 來命名，而非單純用 form 名稱限縮範圍
8. 斷點部分，可以觀看老師的 mixin+content SCSS 影片來優化
9. modules 建議拆出來為 _button.scss，不宜叫做 _modules.scss，因為 modules 與 components 為相同意思，component 裡面應該就放各個元件名稱才是
10. util 不宜放在 compontent 資料夾裡，他們兩者概念不同

## [Lina Chen](https://github.com/Lina-SHU/GlassesImage/tree/main/scss)

1. .container 不宜放在 util，他算是容器
2. 有用到 @mixin+@content 統一管理斷點很棒 :+1:
3. component 裡面的 card.scss ，打開裡面卻是 .location 系列設計，這裡說明 components 元件都是以外觀來命名，例如外表像是卡片，那就叫做 .card、.card-body，如果你叫做 .location，那這個元件用在 購物車頁面上，命名就會衝突
4. 像是你的 pagination 分頁元件設計，就完全正確，像是 .pagination 名稱，不管換到其他頁面上，語意都不會衝突

## [Gillian](https://github.com/GillianY1/GlassesStore/tree/main/app/assets/style)

1. base 這名稱是來自於 smacss，他適合放全站樣式，所以你叫 base 資料夾，把 reset、變數都放在這裡會有點突兀，如果我是你，會把 base 資料夾叫做 config 之類的
2. basic.scss，你把 base、util 都混在一起，建議可以拆開
3. mixin 看到有用到 rwd+@content 很棒哦~
4. 變數嘗試的不錯 ，$font-size-s 可以改寫成 $font-s 會比較短
5. components/module 若沒用到的話可以移除~
6. 可以嘗試將常見的 margin 、padding 推擠寫成 util 工具類 class，例如 .mb-1~6，這樣可以有效減少 pages 裡面的 scss
7. index 這裡的 code，請移動到 base 資料夾

## [Vivian Yeh](https://github.com/vivian1223/glasses-store)

1. 建議 抽出 SCSS 資料夾獨立放 SCSS 檔案
2. scss 可以將同類型的用資料夾來歸類，例如 util 資料夾可以放 display.scss、font.scss、images
3. _spacing.scss 之後第六周到第八週，可以嘗試用 Sass Map+each 來批次產生，有機會可以試試看
4. components.scss 當模組變多時，就可以拆出 component 資料夾咧面個別放 button.scss、_card.scss
5. mixin.scss 可以嘗試將 pad 變成 992、mobile 的 414px 改成 767px

## [肉鬆](https://github.com/recall131477/week4-work/tree/main/app/assets/style)

1. 建議第六週作業嘗試導入 grid system，可以參考 BS5 的格線系統拉出來做，可以用 tailwind 來產生格線，或者用 將 BS5 的格線系統 SCSS 整到你的 SCSS 來做，這樣你的 code 可以更簡潔
2. 承 1，像是首頁的 recommend__list，你直接用 margin-left: -1.875rem; 這樣處理不大合適，這裡解法還是得用格線系統來處理各個區塊間的 gutter 留白，給個課題是開始研究格線系統
3. 你有用 tailwind 來設置 config，有個想法你聽聽看，你要就是放掉 tailwind config，只單用 variable.scss 來產生常見變數，要得話就是都用 tailwind 來產生，SCSS 只做一些 pages 沒辦法客製化的部分，例如 background-images，你兩邊都有變數，日後會變得非常非常非常難管理，所以一般不會用兩份
4. 也附上一梯次學姐做第八週的 tailwind SCSS 給你參考，他 SCSS 沒有寫變數，而是在 SCSS 裡面使用 tailwind 語法來沿用 config 設定

最後給的課題就是
1. 開始瞭解格線系統
2. 嘗試把變數統一放在 config，不要有兩份變數表~

## [沈依蓉](https://github.com/lily-oa/Lession3-glassesStore/tree/master/app/assets/style) - 適合新手檢視

1. all.scss 的 @import “setting/_variable.scss”; 改成 @import “setting/variable” 也可以
2. setting 資料夾你這樣安排裡面的檔案我覺得很棒 :+1::+1::+1:
3. base.scss 的 .container 建議放到其他處，像是以容器設定來說，.container 放在 grid.scss 會比較合適
4. 這裡建議寫 .write，然後 HTML 標籤就寫 <h2 class=“h2 color-write”>標題</h2>，透過樣式組合，模組彼此間會更靈活
5. element 這資料夾名稱，比較合適放元素，layout.scss 不合適放在該命名上，建議還是放回根目錄~
6. variable 裡面只適合放變數，下面的工具類 clsss，可以叫做 _util.scss 來放~

## [Gill](https://github.com/gill74123/week3/tree/main/app/assets/style)

1. var.scss 建議叫做 variable.scss
2. _base.scss 裡面的 d-flex 不適合放那裡，請拉出一個叫做 _util.scss 來放。container 也是，他比較合適 放在 容器上，例如 grid.scss
3. 有用到 @mixin+@layout 很不錯呢~
4. 像是你檔案變多時，可以嘗試拆資料夾來分類，例如 pages 資料夾放 index、optical、location 等等

## [黃士桓](https://github.com/huan5678/week3-glassesStore/tree/master/app/assets/style)

1. @import “Mixin/breakpoint”,，大寫請改成小寫 mixin，在命名的大小寫也是有差異的，像是有些程式語法的開頭大寫是建立 class 類別的意思
2. _fontSet.scss 名稱可以叫做 _typography.scss
3. 有蠻多是 utilities 通用類別，可以新增資料夾，叫做 utilities，像是 colors、fontset、border 都適合放進去
4. 呈上，可嘗試用這個來產生全部
5. base 資料夾嘗試不錯
7. 可以思考這段 code 如何客製化 util，取代成 <div class=“pt-2 pb-2 white bg-primary”></div>，藉此減少 pages 的 code 量

## [咖哩](https://github.com/hungcurry/week03/tree/main/app/assets/style)

1. all.scss @import ，@import “./helpers/_reset.scss”;，可以改為 @import “helpers/reset”
2. 不宜這樣命名變數，應以載具名稱或 size 來設定變數，例如 mqPad、mq-XL，但其他變數命名我覺得棒
3. mixin 嘗試得不錯
4. base 設定得棒，不過 main.productsMain、main.blogMain、.Roboto 不算是 base 全站樣式設定，像是 blogMain 比較像是 pages
5. grid 嘗試得棒！
6. module 部分，breadcrumb、pagination、banner、scroollTop 算是元件，但 blogNav、caption 的命名不算是元件，試想看看，如果你 blogNav 這選單，他會出現在產品頁面上，明明是產品頁面，但你 class 命成卻叫做 blogNav，就會造成命名衝突，建議名稱改成 .subNavbar、.navbar、.list-group 來取代，盡量用外觀來命名，而非用頁面名稱來命名哩~
7. _list.scss 這名稱跟裡面內容比較像是 module，util 是最小維度的功能

## [Joey](https://github.com/joyfeel/gh-pages-demo/tree/master/app/assets/style)

1. abstracts 這個比較少見，不建議叫這名字，你是有參考哪個結構建議嗎？
2. .mb-32 算是 util 哦
3. components/_product.scss、store 這個命名不可被稱為元件，元件意思是以外觀來命名，而非以「語意」來命名，思考看看，如果 .store 的 class，並移到購物車頁面時，class 命名就會衝突，而分頁 _pagination.scss，不管這個 class 在哪個頁面出現，都不會突兀，請以此來改進元件命名方式
4. utilities 上，color、font.scss 算是 util 通用類別，但 _text.scss 不算，util 最小單位就只包含一個功能，最多兩個，但你 text.scss 算是複合性樣式，比較偏向 components 或內容設計
5. 如果你有用 BEM，blog-card 請改為 .blogCard__區塊
6. 可以觀看 BS5 設計 util+斷點的 SCSS 設計方式，可以設計類似 .d-md-none ，也就是在 pad 以上是 display:none 來設計，讓 util 搭配斷點可更靈活，你可以開始去研讀 BS5 框架 SCSS

## [kevin嘉軒](https://github.com/Kevin-Chia-Hsuan/gulp-week4-layout-training-2021/tree/main/app/assets/style)

1. components 不要針對頁面名稱來命名，例如 components/glasses_card、components/location_card，叫做 card 即可
2. navbar 在 bs5 是歸類在元件上，不過可以看到你裡面是在寫 .header
3. 通常顏色變數就單一化就好，不需要功能再搭顏色來命名
4. 這裡算 util，不是 base
5. 這裡都不算 util，container 比較算是容器 layout 或 grid、title、subTitle 比較像是 comonents
6. 分頁元件拆得 ok

---