應該很多人都說過這個話題，但是都是偏工程師的命名規則為主，再來團隊合作最需要的就是簡單易懂的命名規範。

一，設計師的圖檔命名

看過很多設計師的原始檔有些人的檔案很可怕，所以想先從原始黨開始講起。

製作命明規範的好處

1.方便修改

大部分設計師都會這樣的命名，包括剛開始自己也是會使用這樣的方式，如果當發生突發狀況想要其中一個版本的一個小元件，要找起來也是非常麻煩。

養成良好的命名習慣是很重要的，可以利用版本命名，或者是時間命名都可以更加清楚明白。

2.容易找出檔案

在修改檔案的時候，整齊規範的原始檔是不是在修改圖層的時候更容易找到該圖層

3.方便設計團隊溝通

制定一套規範，讓溝通更加效率。

4.方便程式開發溝通

有些工程師需要設計師切好圖，標註好，命名好給他們，有些工程師只需要你的設計檔，他們自行切圖標注，所以設計時與開發溝通非常重要。但是無論如何，規範的命名是最有效的溝通。

二，命名規範

命名規範並不是一定要照著寫的規則製作，工作上需要的命名也不相同，主要是在與團隊溝通一定要清楚明白。

切圖命名規則 - 需要告訴開發，文件是什麼，在哪裡，第幾頁，什麼狀態。

模組_類別_功能_狀態

頁面_模塊_狀態

三，命名規則

名詞：

• bg（backgrond）：背景
• nav（navbar）：導航選單
• tab（tabbar）：標籤
• btn（button）：按鈕
• img（image）：圖片
• del（delete）：刪除
• msg（message）：訊息
• icon：圖標
• content：內容
• left / center / right：左 / 中 / 右
• logo：商標
• banner：廣告
• link：連結
• user：使用者
• note：註釋
• bar ：進度條
• profile：個人資料
• ranked：排名
• light：亮
• dark：黑暗

操作：

• close：關閉
• back：返回
• edit：編輯
• download：下載
• collect：收藏
• comment：評論
• play：播放
• pause：暫停
• pop (popupup)：彈跳出
• audio：音訊
• video：影片
• login：登入
• register：註冊
• refresh：更新

狀態：

• selected：選中
• disabled：無法點擊
• highlight：點擊時
• default：默認
• normal：一般
• pressed：按下
• slide：滑動
• primary：主要
• success：成功
• warning：警告
• danger：危險
• info：信息
• error：錯誤
• muted：靜音

四，分享

保哥之前有翻譯「CSS筆記，建議與指導方針總整理」
https://github.com/doggy8088/CSS-Guidelines