常見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(
- 導航：nav
- 主導航：mainbav
- 子導航：subnav
- 頂導航：topnav
- 邊導航：sidebar
- 左導航：leftsidebar
- 右導航：rightsidebar
- 菜單：menu
- 子菜單：submenu
- 標題: title
- 摘要: 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
- 功能
- - 標志：logo
- - 廣告：banner
- - 登陸：login
- - 登錄條：loginbar
- - 注冊：regsiter
- - 搜索：search
- - 功能區：shop
- - 標題：title
- - 加入：joinus
- - 狀態：status
- - 按鈕：btn
- - 滾動：scroll
- - 標簽頁：tab
- - 文章列表：list
- - 提示信息：msg
- - 當前的: current
- - 小技巧：tips
- - 圖標: icon
- - 注釋：note
- - 指南：guild
- - 服務：service
- - 熱點：hot
- - 新聞：news
- - 下載：download
- - 投票：vote
- - 合作伙伴：partner
- - 友情鏈接：link
- - 版權：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，這里針對單個單詞組合命名，對詞組單詞的組合建議不使用縮寫或簡寫。
| 單詞 |
縮寫 |
說明 |
| bottom |
btm |
底部 |
| button |
btn |
按鈕 |
| background |
bg |
背景 |
| content |
cont |
內容 |
| check |
chk |
選擇框 |
| current |
curr |
當前的 |
| delete |
del |
刪除 |
| text |
txt |
文本 |
| disabled |
dis |
禁用 |
| foot |
ft |
底部 |
| head |
hd |
頭部 |
| hidden |
hide |
隱藏 |
| input |
inp |
input框 |
| image |
img |
圖片 |
| index |
idx |
索引 |
| message |
msg |
消息 |
| password |
pwd |
密碼 |
| previous |
prev |
前面的、上一面 |
| radio |
rad |
單選 |
| register |
reg |
注冊 |
| select |
sel |
選擇 |
| tbody |
tbd |
表格主體 |
| thead |
thd |
表格頭部 |
| tfoot |
tft |
表格底部 |
| wrap |
wp |
包裝，外層 |
塊（Block）的命名規范
- 塊的名稱是唯一的
- 塊的名稱和塊的功能一致
- 如：菜單應該命名為menu
- 塊只能用Class選擇器，不能用ID選擇器，因為同一個塊可能出現在頁面的多個地方
- 塊的內部是可以在包含多個子塊的
- 塊名稱用小寫命名
| 類型 |
塊名 |
類型 |
塊名 |
| 頂部 |
topbar |
登錄 |
login |
| 快速導航 |
quickmenu |
菜單 |
menu |
| 導航 |
nav |
搜索框 |
searchbox |
| 關鍵字 |
keywords |
左邊欄 |
leftside |
| 右邊欄 |
rightside |
內容 |
content |
| 左、右菜單 |
left/rightmenu |
服務鏈接 |
servicelink |
| 服務 |
service |
底欄 |
footerbar |
| 版權 |
copyright |
注冊 |
register |
| 新聞 |
new |
新聞列表 |
news |
| 列表項 |
item |
列表集合 |
lists |
元素（Element）的命名規范
- 元素的命名使用塊名+元素名的組合方式，之間以中划線(-)隔開。
- 如：塊名-元素名
- 元素的命名只能用於Class選擇器
- 如：菜單項的元素命名為menu-item
- 使用小寫命名
| 類型 |
元素名 |
類型 |
元素名 |
| 元素項 |
-item |
元素頭部 |
-hd |
| 元素標題 |
-title |
元素內容 |
-cont |
| 元素底部 |
-btm |
元素頂部 |
-top |
| 元素中部 |
-middle |
元素右則 |
-right |
| 元素左則 |
-left |
制定簡單規則：
- 以中划線連接，如
.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
| 類型 |
修飾符名 |
類型 |
修飾符名 |
| 鼠標經過 |
-hover |
獲取焦點 |
-focus |
| 失去焦點 |
-blur |
鼠標按下 |
-mousedown |
| 鍵盤按下 |
-keydown |
鼠標拖動 |
-drag |
| 不可用、禁用、只讀 |
-disabled |
可用、啟用 |
-enabled |
| 選中（下拉框） |
-selected |
選中（選擇框） |
-checked |
| 成功 |
-success |
失敗 |
-fail |
| 錯誤 |
-err |
警告 |
-warning |
| 當前狀態 |
-current |
顯示 |
-show |
| 隱藏 |
-hide |
添加 |
-add |
| 刪除 |
-del |
編輯 |
-edit |
| 閱讀、視圖 |
-view |
返回 |
-back |
| 通過 |
-pass |