# Coding Style

### Vue
- 參照[Vue風格指南](https://cn.vuejs.org/v2/style-guide/)

### JS
- 盡量以FP(Funtional Programing)思想撰寫邏輯，讓一個函數只做一件事
- 引用變數時遵循 Immutable 原則，避免 data 有預期外的變動
- if 後若有 else 的需求，情況允許可換成 switch代替

### CSS
- 不使用 ID 作為選擇器，要就另外再命名一個class
- 不使用 tag 作為選擇器，因瀏覽器在查找選擇器時是由後往前搜索
> ex: .form_title > span // 先找到所有span，再看span中 class 為 form_title的元素
- 專案主要規格如顏色、字體大小等變數集中管理
- 色碼全部大寫 `#FFF`

:::info
**css 檔案統一新增一個與 component 對應的檔案，無論行數多少都要另開再載入**
ex: Menu.vue 對應 Menu.styl

**全域性的樣式則放在 src/assets 資料夾底下**
ex: App.vue 對應 src/assets/App.styl
:::