ASong
[網頁設計技能樹] 切版前端:進階小技巧 Day3

在上切版直播課程時老師批改作業時的整理,算是一些比較細節的處理非絕對標準,要實際寫的時候會比較有感覺,先整理起來。


一、RWD 斷點設計

  • IPad 992px、Mobile 767px
  • grid.scss,請改為 992px, 767px,以 767px 以下都變成手機版會比較乾脆
  • 斷點設計不要直接寫在 scss,因為 container 算是容器,歸類在單獨頁面上這樣之後修改會很難找,建議放在 reset.scss 或 base.scss 會比較合適

二、css 模組化概念

  • base
    • base 這名稱是來自於 smacss,他適合放全站樣式,所以你叫 base 資料夾,把 reset、變數都放在這裡會有點突兀,比較好是把 base 資料夾叫做 config 之類的
    • main.productsMain、main.blogMain、.Roboto 不算是 base 全站樣式設定,像是 blogMain 比較像是 pages
    • base 全站設定樣式,但要留意如果各個 h2 樣式不一樣時,則不能寫死在 HTML 標籤上
  • 其他
    • 除了 mixin.scss 外,可以直接寫 class .pl-5,然後在 HTML tag 加上
    • 不需要在 header 與 footer.scss ,都寫上 .pl-5、.pr-8 設定,只要寫在一處然後用 ejs 編譯出 layout
    • _spacing.scss 可以嘗試用 Sass Map+each 來批次產生
    • components/module 若沒用到的話可以移除
    • _fontSet.scss 名稱可以叫做 _typography.scss
    • components/_product.scss、store 這個命名不可被稱為元件,元件意思是以外觀來命名,而非以「語意」來命名,如果 .store 的 class,並移到購物車頁面時,class 命名就會衝突,而分頁 _pagination.scss,不管這個 class 在哪個頁面出現,都不會突兀,請以此來改進元件命名方式
    • 如果你有用 BEM,blog-card 請改為 .blogCard__區塊
    • 可以觀看 BS5 設計 util+斷點的 SCSS 設計方式,可以設計類似 .d-md-none ,也就是在 pad 以上是 display:none 來設計,讓 util 搭配斷點可更靈活,可以開始去研讀 BS5 框架 SCSS

三、css 模組化檔案拆分

  • util
    • mb-1~6 用 _util.scss 拆開
    • .mb-32 算是 util
    • 可以嘗試將常見的 margin 、padding 推擠寫成工具類 clsss,可以叫做 _util.scss 來放,例如 .mb-1~6,這樣可以有效減少 pages 裡面的 scss
    • _base.scss 裡面的 d-flex 不適合放那裡,請拉出一個叫做 _util.scss 來放。
    • util 不宜放在 compontent 資料夾裡,他們兩者概念不同
    •  utilities 通用類別,可以新增資料夾,叫做 utilities,像是 colors、fontset、border 都適合放進去
    • .container 不宜放在 util,他算是容器
    • utilities 上,color、font.scss 算是 util 通用類別,但 _text.scss 不算,util 最小單位就只包含一個功能,最多兩個,但若 text.scss 算是複合性樣式,比較偏向 components 或內容設計
  • layout
    • 容器 .container 放到 layout
    • element 這資料夾名稱,比較合適放元素,layout.scss 不合適放在該命名上,建議還是放回根目錄
  • grid.scss
    • container 比較合適 放在 容器上,例如 grid.scss
    • base.scss 的 .container 建議放到其他處,像是以容器設定來說,.container 放在 grid.scss 會比較合適
  • components
    • components.scss 當模組變多時,就可以拆出 component 資料夾咧面個別放 button.scss、_card.scss
    • modules 建議拆出來為 _button.scss,不宜叫做 _modules.scss,因為 modules 與 components 為相同意思,component 裡面應該就放各個元件名稱
    • components 不要針對頁面名稱來命名,例如 components/glasses_card、components/location_card,叫做 card 即可
    • navbar 在 bs5 是歸類在元件上
  • 其他
    • _list.scss 這名稱跟裡面內容比較像是 module,util 是最小維度的功能
    • 檔案變多時,可以嘗試拆資料夾來分類,例如 pages 資料夾放 index、optical、location 等等
    • scss 可以將同類型的用資料夾來歸類,例如 util 資料夾可以放 display.scss、font.scss、images

四、@import 讓 css 模組化

  • 路徑可簡寫
    • @import “_variable.scss”; 可寫成 @import “variables”;
    • all.scss 的 @import “setting/_variable.scss”; 改成 @import “setting/variable” 也可以
    • all.scss @import ,@import “./helpers/_reset.scss”;,可以改為 @import “helpers/reset”
  • 其他
    • @import “Mixin/breakpoint”,,大寫請改成小寫 mixin,在命名的大小寫也是有差異的,像是有些程式語法的開頭大寫是建立 class 類別的意思
    • 也是提升複用性作法,好處是你沒必要讓 CSS 肥大,只要寫一個 class,直接套用在 HTML 上就搞定。 不要在裡面寫 scss,all.scss 只拿來 @import 其它 scss 用,獨立一個 base.scss 來寫 scss

五、Scss 變數管理

  • 變數不要在各個 scss 上,統一在一個 variable.scss 來統一管理,散佈在各個 scss 上會很難找
  • variable 裡面只適合放變數
  • var.scss 建議叫做 variable.scss
  • $spacing-lv1 可以改為 $spacing-1
  • grey 變數,請用 100~700 從淺至深來調整,不要用編號 1~2,這設定在 BS5、tailwind 框架也有類似概念
  • $font-size-s 可以改寫成 $font-s 會比較短
  • tailwind 來設置 config,有個想法你聽聽看,你要就是放掉 tailwind config,只單用 variable.scss 來產生常見變數,要得話就是都用 tailwind 來產生,SCSS 只做一些 pages 沒辦法客製化的部分,例如 background-images,你兩邊都有變數,日後會變得非常非常非常難管理,所以一般不會用兩份

六、類別命名

  • .container–form 這類 class 不宜這樣設定,他算是容器設定應是以容器 size 來命名,而非單純用 form 名稱限縮範圍
  • component 裡面的 card.scss ,打開裡面卻是 .location 系列設計,這裡說明 components 元件都是以外觀來命名,例如外表像是卡片,那就叫做 .card、.card-body,如果你叫做 .location,那這個元件用在 購物車頁面上,命名就會衝突
  • breadcrumb、pagination、banner、scroollTop 算是元件,但 blogNav、caption 的命名不算是元件,如果 blogNav 這選單,他會出現在產品頁面上,明明是產品頁面,但 class 命成卻叫做 blogNav,就會造成命名衝突,建議名稱改成 .subNavbar、.navbar、.list-group 來取代,盡量用外觀來命名,而非用頁面名稱來命名

七、格線系統

  • 導入 grid system,可以參考 BS5 的格線系統拉出來做,可以用 tailwind 來產生格線,或者用 將 BS5 的格線系統 SCSS 整到你的 SCSS 來做,這樣 code 可以更簡潔
  • 像是首頁的 recommend__list,直接用 margin-left: -1.875rem; 這樣處理不大合適,這裡解法還是得用格線系統來處理各個區塊間的 gutter 留白,給個課題是開始研究格線系統

參考同學作業撰寫

  1. Fred Chang
  2. Mikan
  3. Lina Chen
  4. Gillian
  5. Vivian Yeh
  6. 肉鬆
  7. 黃士桓
  8. Joey
  9. kevin嘉軒

base code 可參考

  1. Gill
  2. 沈依蓉
  3. 咖哩
  4. Jerry Yen
  5. Joseph Tang

筆記原始整理 by Gui Ting Liu in 洧杰老師批改眼鏡官網 SCSS 評論 – HackMD


作者介紹 - ASong

ASong

ASong, 現在是一位前端工程師;業餘的閱讀愛好者、講師、寫作者;任何討論或合作可寄送至 dragoncres@gmail.com。

發表迴響