# 第八週｜課程直播｜切版班 by Sz
###### tags: `Sz` `第八週` `直播筆記` `2021夏季切版班`

[【總】小組任務｜2021夏季切版班 Team13](/GrA9x5TMQoGuIhR8xF7eyg)
[第八週講義](https://hackmd.io/@hexschool/Hky7SSslY)

## 課程
下禮拜會有彩蛋課
我今天到70%ㄌ
心得牆可以到80%
再拼一份作業就90%了！

## 建置流程
[建置流程](https://cacoo.com/diagrams/VbC7q11GWcnik5BV/16E53)

### 命名
#### progress, timeline
::: success
以功能性、外觀來命名
:::

// 通用性不夠
.orderProgress {}
.registerProgress {}
// 在不同場景都可以用
.progress {}

#### banner
banner 的別名 hero

## 結構設計等級
* Level 1：頁面(page)， 有一頁就新增一頁
* Level 2：佈局(Layout)， 會額外拉出來處理
- 到這階段才適合與後端合作
* Level 3：工具(helper、util)，會將常用的 class 拉出來獨立使用
* Level 4：格線(grid) 會有自己的格線系統
* Level 5：模組(component) 會將常用的內容拉出來模組化

## momo
不是響應式，但會不同載具去轉址
主要還是為了圖像做調整

## 設計模式
## SMACSS

[SMACSS](https://docs.google.com/presentation/d/12EBuvos1SIwUWzIsl8KCp9W96J6jbwXjKuGMKtG5PQc/edit#slide=id.p197)
### state(狀態)
用is- 來設定全域狀態：is-error、is-hidden
子模組設定：.is-tab-active

### Minimizing the Depth(最小化深度)
將模組下共通樣式使用單一class進行合併

// 未設定子元件
.aaa ul { color: brown; }
.aaa li { color: brown; }

// 設定子元件做合併
.aaa-text {
  color: brown;
}

## SMACSS 結構建議

## 7+1
[範例](https://gist.github.com/rveitch/84cea9650092119527bc)