# 學習Sass#3 Sass/CSS 設計模式 SMACSS
###### tags: `Sass`

## SMACSS

CSS 模組化的方式之一

## SMACSS 核心架構

* Base
* Layout
* Module
* State
* Theme

## Base

網頁的基本樣式，好比常用的 [CSS RESET](https://meyerweb.com/eric/tools/css/reset/)，就是屬於 BASE 的其中一種

有時候除了用到 CSS RESET 以外，我們可能依照需求再另外撰寫特定的基本樣式，而我們將這 Base 相關設定獨立撰寫成一個叫做 `_base.scss` ， 將這個 `_base.scss` 放在 CSS RESET 獨立檔案的下面


---

## Layout

主要用在<font color='red'>共用的頁面</font>，例如網頁上常用到的 navbar 、 header 、 footer 等等每個頁面都會出現的部分，我們會將這部分的 CSS 寫在這個檔案中，並將這個檔案檔名叫做 `_layout.scss`


### 統一名稱 - 新增前綴詞

layout 還有一個觀念就是通常放在 layout 的樣式 className 都會加上一個 `l-` ， `l-` 意思是在 layout 的樣式，目的是在於 layout 專門放重複的樣式，但是 HTML 區塊樣式相同但是代表的東西可能不同當然 className 也可能不會相同因為這樣管理並不容易，這時如果特別為不同 className 設立相同的 CSS ，並不會達到簡化程式碼的目的，


從這個範例可以看到 `carTwocard` 跟 `carcard` 都是同一個樣式，就只是因為 html 的 className 不同就多寫了，這樣很麻煩於是乎我們可以把這兩個區塊的 className 改成 1-card ，這樣 l- 可以知道這些標籤再 layout 並且可以減少撰寫的內容並套用同樣內容

---

## Module

假如有三個按鈕， 這三個按鈕的 padding 、 margin 都相同，但是只有顏色不同，我們勢必 CSS 會為這個顏色多寫三個 class ， 不過 padding 跟 margin 都是相同的，所以也是多寫了不少同樣的樣式，於是我們可以為這些同樣的樣式設立一個 className ， 再直接將 className 套用就好了

### 實際案例


在使用 bootstrap5 的按鈕，你可以看到 className 不同的樣式有多個不同的 className ， `btn` 為一個 bootstrap 基本按鈕 `btn-secondary` 為基本按鈕再套用綠色還有 padding 、 margin 等相關設定，所以我們只要將想要的寫成 className 設定檔案並且直接在 html 套用 class 就好了，就不用多寫了 CSS 寫重複的屬性，關鍵在於抽出基本樣式，新增的 class 就是為需求客製化

### 操作

#### 撰寫 module


#### 套用


---

## State

專門放一些按鈕可能會有狀態的切換或是訊息提示，跟 Module 差不多意思，通常會加入 `is-` 當作前綴詞


## 參考
[CSS 的模組化方法：OOCSS、SMACSS、BEM、CSS Modules、CSS in JS](https://cythilya.github.io/2018/06/05/css-methodologies/)
[淺談 CSS 設計模式-SMACSS 篇](https://israynotarray.com/css/20200516/2341336904/)