今天要來介紹 Sass/Css 設計模式啦~~
首先我們先認識 最好入門的 Smacss
官網: http://smacss.com/

Smacss Base

首先我們可以先利用 Base打好地基
也就是 全站設定
若寫好全站設定
就可以滿足90%的樣式
剩下5~10% 必須客製化的樣式
就蓋掉就好啦~~
這樣就不用連那 90% 的樣式通通要寫一遍
超麻煩!!
Smacss官網 Base介紹: http://smacss.com/book/type-base

當然
我們也可以把 base拆開來單獨做一支 scss檔

這裡看一個例子
Pure.css: https://purecss.io/
會發現裡面也有 base
https://unpkg.com/purecss@1.0.1/build/base.css
有興趣的 可以看一下它的 base檔案 是如何撰寫的

Smacss Layout(佈局管理)

有時候我們瀏覽網頁
會發現網頁的某些地方在其他分頁還是會存在
以 Bootstrap4 為例子
Bootstrap4:https://getbootstrap.com/
會發現它的 header 都會存在
這時候我們就可以把它拆出來
單獨做一支 layout的scss

這裡在舉一個 Layout 的例子
在之前我們都習慣把命名語意化
但 Smacss這裡建議
若有許多共同樣式的css
可以抽象化出來
EX:

.bookList{
  color:red;
  width: 100px;
}
.dvdList{
  color:red;
  width: 100px;
}
.cdList{
  color:red;
  width: 100px;
}

會發現他們其實樣式都一樣
但為了語意化而產生許多的css
我們這時候就可以把這些共同樣式改成

// l --> layout(前綴詞)
.l-list{
  color:red;
  width: 100px;
}

那今天的介紹就到這裡啦
明天將介紹 Smacss 的模組化(module)
若有任何問題 或 內容有誤
請不吝色的跟我說唷