常見class關鍵詞：

• 佈局類：header, footer, container, main, content, aside, page, section
• 包裹類：wrap, inner
• 區塊類：region, block, box
• 結構類：hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span
• 列表類：list, item, field
• 主次類：primary, secondary, sub, minor
• 大小類：s, m, l, xl, large, small
• 狀態類：active, current, checked, hover, fail, success, warn, error, on, off
• 導航類：nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last(

1. 導航：nav
2. 主導航：mainbav
3. 子導航：subnav
4. 頂導航：topnav
5. 邊導航：sidebar
6. 左導航：leftsidebar
7. 右導航：rightsidebar
8. 選單：menu
9. 子選單：submenu
10. 標題: title
11. 摘要: summary)

• 互動類：tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay,
• 星級類：rate, star
• 分割類：group, seperate, divider
• 等分類：full, half, third, quarter
• 表格類：table, tr, td, cell, row
• 圖片類：img, thumbnail, original, album, gallery
• 語言類：cn, en
• 論壇類：forum, bbs, topic, post
• 方向類：up, down, left, right
• 功能

1. - 標誌：logo
2. - 廣告：banner
3. - 登陸：login
4. - 登入條：loginbar
5. - 註冊：regsiter
6. - 搜尋：search
7. - 功能區：shop
8. - 標題：title
9. - 加入：joinus
10. - 狀態：status
11. - 按鈕：btn
12. - 滾動：scroll
13. - 標籤頁：tab
14. - 文章列表：list
15. - 提示資訊：msg
16. - 當前的: current
17. - 小技巧：tips
18. - 圖示: icon
19. - 註釋：note
20. - 指南：guild
21. - 服務：service
22. - 熱點：hot
23. - 新聞：news
24. - 下載：download
25. - 投票：vote
26. - 合作伙伴：partner
27. - 友情連結：link
28. - 版權：copyright

• 其他語義類：btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading...

• 例如：text改為txt、delete改為del，這裡針對單個單詞組合命名，對片語單詞的組合建議不使用縮寫或簡寫。

塊（Block）的命名規範

1. 塊的名稱是唯一的
2. 塊的名稱和塊的功能一致
3. 如：選單應該命名為menu
4. 塊只能用Class選擇器，不能用ID選擇器，因為同一個塊可能出現在頁面的多個地方
5. 塊的內部是可以在包含多個子塊的
6. 塊名稱用小寫命名

元素（Element）的命名規範

1. 元素的命名使用塊名+元素名的組合方式，之間以中劃線(-)隔開。
2. 如：塊名-元素名
3. 元素的命名只能用於Class選擇器
4. 如：選單項的元素命名為menu-item
5. 使用小寫命名

制定簡單規則：

• 以中劃線連線，如.item-img
• 使用兩個中劃線表示特殊化，如.item-img.item-img--small表示在.item-img的基礎上特殊化
• 狀態類直接使用單詞，參考上面的關鍵詞，如.active, .checked
• 圖示以icon-為字首（字型圖示採用.icon-font.i-name方式命名）。
• 模組採用關鍵詞命名，如.slide, .modal, .tips, .tabs，特殊化採用上面兩個中劃線表示，如.imgslide--full, .modal--pay, .tips--up, .tabs--simple
• js操作的類統一加上js-字首
• 不要超過四個class組合使用，如.a.b.c.d

修飾關鍵詞

• 以header為例，我們可以新增字首表示不同的header，如區塊頭部.block-hd(hd為header簡寫)，modal頭部.modal-hd，文章頭部.article-hd。
• 同樣標題也可以分為，頁面標題.page-tt(title的簡寫)，區塊標題.block-tt等

• 樣式修飾符：塊或元素命名加上樣式修飾符，之間用中劃線(-)隔開

  例：塊或元素-樣式修飾符

• 樣式修飾符的命名只能用於Class選擇器

• 使用小寫命名

  如：某個按鈕的寬度加寬，則該按鈕的樣式修飾符名為long，全名就為：ui-btn-long

  型別	修飾符名	型別	修飾符名
  無上邊框	nobt	無右邊框	nobr
  無下邊框	nobb	無左邊框	nobl
  無上（內）邊框	nopt	無右（內）邊框	nopr
  無下（內）邊框	nopb	無左（內）邊框	nopl
  無上（內）外框	nomt	無右（內）外框	nomr
  無下（內）外框	nomb	無左（內）外框	noml
  （內）上邊框	pt-10（畫素）	（內）右邊框	pr-10（畫素）
  （內）下邊框	pb-10（畫素）	（內）左邊框	pb-10（畫素）
  （外）上邊框	mt-10（畫素）	（外）右邊框	mr-10（畫素）
  （外）下邊框	mb-10（畫素）	（外）左邊框	mb-10（畫素）
  字型顏色	fc-red（顏色）	字型型別	fm-arial（型別）
  字型大小	fs-12（大小）	背景顏色	bg-red（顏色）
  字型加粗	fw-bold	正常字型	fw-normal
  文字下劃線	txt-underline	文字中劃線	txt-through
  文字居左	txt-l	文字居右	txt-r
  文字垂直居上	txt-t	文字垂直居下	txt-b
  文字居中	txt-c	文字垂直居中	txt-m
  絕對定位	pos-abs	相對定位	pos-rel
  寬度	w-10（畫素）	高度	h-10（畫素）
  行高	lh-12（畫素）	文字縮排	txt-in
  邊框寬度	bw-2（畫素）	上邊框寬度	btw-2（畫素）
  下邊框寬度	bbw-2（畫素）	左邊框寬度	blw-2（畫素）
  右邊框寬度	brw-2（畫素）
  減短	-short	加長	-long
  變大	-big	縮小	-small
  向上	-up	向下	-down
  向左	-left	向右	-right
  向前，上一個	-prev	向後，下一個	-next
  低階	level-low	中級	level-middle
  高階	level-high

行為修飾符

• 塊名或元素名加上行為修飾符，之間用中劃線(-)隔開。
• 塊或元素名-行為修飾符
• 行為修飾符的命名只能用Class選擇器
• 使用小寫命名

如：修飾按鈕在滑鼠經過的事件，滑鼠經過行為修飾符用-hover，所以全名為：ui-btn-hover