為了建立團隊彼此的默契，並定要制定一些規範來約束，使彼的溝通時間減少，默契增加。

coding style

• 使用 soft tab，2 space 來縮排。
• 大括號 { 前面要有空白。
  • 正確 .classname { 
  • 錯誤 .classname{
• 冒號 : 後面要有空白。
  • 正確 color: #333;
  • 錯誤 color:#333;
• 統一使用 - 符號做命名連接。
• 使用 // 做註解，不會被 compile 出來。
• 最外層的層級結束時，加上 // class-name end（如果有N行，底下有繼承的 class name）

// Good example.classname {  .subclassname {    padding: 8px 10px;    color: #333;    background: rgba(0, 0, 0, .4);  }} // classname end

coding order

mixin ＆ extend 看類型放在相對應位置，自定義的樣式 mixin 跟 extend 放在最前面。

1. include mixin ＆ extend
2. Position
3. Box model
4. Typographic
5. Style
6. other

comment（取自 MVCSS）

// *************************************
//
//   LEVEL 1
//   -> DESCRIPTION
//
// *************************************
　
// -------------------------------------
//   LEVEL 2
// -------------------------------------
　
// ----- LEVEL 3 ----- //
　
// LEVEL 4

命名說明

把常用到的命名名稱，直接定規則下來。

前綴詞部分

• ap - application 使用於 layout。
• fn - function 表示功能。

layout

• wrap - 最外包裝，定義於 body 之下，包覆全體內容。
• header - 標頭。
• nav - 導覽列。
• sub-nav - 次要導航。
• menu - 菜單有別於 nav，偏向有下拉的選單使用。
• side - 側邊欄。
• main - 用來裝主要內容。
• article - 文章部分。
• container - 容器、集結箱之意，主要包覆內容外框。
• box - 外容器，對某個內容加上外容器使用，用定義裡面變化。
• inner - 內包裝，外包裝反之定義。
• footer - 註腳。

元件部分

• btn - 按鈕。
• tab - 分頁。
• fields - input, checkbox, radiobox …等。
• icon - 圖示
• notify - 提示窗

工具部分

• toolbar - 工具列。
• tool-tip - 提示。

搜尋

• search - 搜尋。
• search-input - 搜尋輸入。
• search-result - 搜尋結果。

廣告

• banner - 廣告。

版權資訊

• copyright - 版權所屬。

命名風格

每個人命名的方式，往往會造成合作上的困難，所以制定一套規則，會讓事情簡單很多。

開頭縮寫表示

用英文縮寫來更簡潔的描述 class 的命名，以及分類。

// -------------------------------------
//   layout setting
// -------------------------------------
 .ap-header { … }.ap-main { … }.ap-side { … }.ap-footer { … }  
// -------------------------------------
//   function setting
// -------------------------------------
 .fn-head { … }.fn-tool { … }.fn-title { … }

以及常用的命名縮寫 button, column, grid…等。

.btn-xxx { … }.col-xxx { … }.g-xxx { … }

結尾縮寫表示

我們會對尺寸做縮寫，並用一個 - 做連結。

// size setting-xs (extra small)-s  (small)-m  (medium)-l  (large)-xl (extra large)

狀態

動詞命名，由 js 觸發的動作，使用 is-接動詞。

.is-active.is-show.is-hide

如果要定義不同狀態的 is-xxx 就把要變更狀態的 class 後面加上 is-xxx。

.btn-primary.is-active { … }.tab-item.is-active { … }

出現跟消失用 show 跟 hide 不要用 in 跟 out，以免照成語意上的混淆。

圖像

圖像命名的方式

把縮寫至於後方

• xxx-bg 用於背景
• xxx-logo 用於 logo
• xxx-img 用於內容圖像

但是 icon 是例外，icon 的命名如下。

• picon-xxx 用於 icon