# CodeStyling
{%hackmd theme-dark %}
###### tags: `工程師手冊`, `code style`

## 前端

- ### **components naming**

使用 camaleCase
header 使用 `<c-header />`
footer 使用 `<c-footer />`
(c stand for component)

- ### **class name**
自訂的 class name 使用 snake_case 目的是為了與 vuetify 的 helper class 做區隔（ vuetify 使用 kebab-case ）
並盡可能的遵照 [BEM](https://chupainotebook.blogspot.com/2019/05/bemcss.html) (非強制)。

- ### **element attributes & props**
在元素中具有動態屬性的往前擺，反之為靜態屬性的向後擺；
若 class 包含自定義 class_name 必為第一
例外的是：
若有 ref 的屬性必為第一
v-if, v-else 等條件式渲染屬性也擺為第一但後於 ref
再者為 v-for 或其他的 directives。
有 value 的 attributes 先於無 value

如下:

- ### scss
變數使用 snake_case

- ### Vuex
- state
- getters
- mutaions
- actions

## 後端

## Flutter

- ### **Classes Naming**

使用 CapitalCamelCase
ex. `MyAwesomeComponent.dart`