1.布局相關
語義 命名 簡寫
盒容器 wrap wrap
盒子 box box
容器 container container
主欄 main main
側欄 sidebar / aside sidebar / aside
文檔 doc doc
頭部 head hd
主體 body bd
底部 foot ft
2.模塊相關
語義 命名 簡寫
導航 navigation nav
面包屑 crumb crumb
菜單 menu menu
選項卡 tab tab
標題 title title
內容 content content
列表 list list
表格 table table
排行榜 rank rank
登陸 login login
表單 form form
品牌標識 logo logo
廣告 advertise ad
搜索 search search
切換 slide slide
提示 tips tips
版權 copyright copyright
按鈕 button btn
輸入 input ipt
結果 result result
下載 download dowload
新聞 news news
注冊 register reg
熱點 hot hot
展開 collapse collapse
警告 alert alert
提示 tooltip tooltip
下拉 dropdown dropdown
3.狀態相關
語義 命名 簡寫
語義 命名 簡寫
選中 selected selected
當前 current current
激活 active active
顯示 show show
隱藏 hidden hide
打開 open open
關閉 close close
出錯 error err
禁用 disabled disabled
擴展 extend extend
4.命名規則
4.1駝峰命名
<p class="navWrap"></p>
4.2 劃線命名
<p class="nav-wrap"></p>
或
<p class="nav_wrap"></p>
