##CSS規范 - 最佳實踐
###最佳選擇器寫法(模塊)
~~~
/* 這是某個模塊 */
.m-nav{}/* 模塊容器 */
.m-nav li,.m-nav a{}/* 先共性 優化組合 */
.m-nav li{}/* 后個性 語義化標簽選擇器 */
.m-nav a{}/* 后個性中的共性 按結構順序 */
.m-nav a.a1{}/* 后個性中的個性 */
.m-nav a.a2{}/* 后個性中的個性 */
.m-nav .z-crt a{}/* 交互狀態變化 */
.m-nav .z-crt a.a1{}
.m-nav .z-crt a.a2{}
.m-nav .btn{}/* 典型后代選擇器 */
.m-nav .btn-1{}/* 典型后代選擇器擴展 */
.m-nav .btn-dis{}/* 典型后代選擇器擴展(狀態) */
.m-nav .btn.z-dis{}/* 作用同上,請二選一(如果可以不兼容IE6時使用) */
.m-nav .m-sch{}/* 控制內部其他模塊位置 */
.m-nav .u-sel{}/* 控制內部其他元件位置 */
.m-nav-1{}/* 模塊擴展 */
.m-nav-1 li{}
.m-nav-dis{}/* 模塊擴展(狀態) */
.m-nav.z-dis{}/* 作用同上,請二選一(如果可以不兼容IE6時使用) */
~~~
###統一語義理解和命名
布局(.g-)
|語義| 命名 |簡寫|
|--|--|--|
|文檔| doc |doc|
|頭部| head |hd|
|主體| body |bd|
|尾部| foot |ft|
|主欄| main |mn|
|主欄子容器| mainc |mnc|
|側欄| side |sd|
|側欄子容器| sidec |sdc|
|盒容器| wrap/box wrap/|box|
模塊(.m-)、元件(.u-)
|語義| 命名| 簡寫|
|--|--|--|
|導航| nav| nav|
|子導航| subnav| snav|
|面包屑| crumb| crm|
|菜單| menu| menu|
|選項卡| tab| tab|
|標題區| head/title| hd/tt|
|內容區| body/content| bd/ct|
|列表| list| lst|
|表格| table| tb|
|表單| form| fm|
|熱點| hot| hot|
|排行| top| top|
|登錄| login| log|
|標志| logo| logo|
|廣告| advertise| ad|
|搜索| search| sch|
|幻燈| slide| sld|
|提示| tips| tips|
|幫助| help| help|
|新聞| news| news|
|下載| download| dld|
|注冊| regist| reg|
|投票| vote| vote|
|版權| copyright| cprt|
|結果| result| rst|
|標題| title| tt|
|按鈕| button| btn|
|輸入| input| ipt|
功能(.f-)
|語義| 命名 |簡寫|
|--|--|--|
|浮動清除| clearboth |cb|
|向左浮動| floatleft |fl|
|向右浮動| floatright |fr|
|內聯塊級| inlineblock |ib|
|文本居中| textaligncenter |tac|
|文本居右| textalignright |tar|
|文本居左| textalignleft |tal|
|垂直居中| verticalalignmiddle |vam|
|溢出隱藏| overflowhidden |oh|
|完全消失| displaynone |dn|
|字體大小| fontsize |fs|
|字體粗細| fontweight |fw|
皮膚(.s-)
|語義| 命名| 簡寫|
|--|--|--|
|字體顏色| fontcolor| fc|
|背景| background| bg|
|背景顏色| backgroundcolor| bgc|
|背景圖片| backgroundimage| bgi|
|背景定位| backgroundposition| bgp|
|邊框顏色| bordercolor| bdc|
狀態(.z-)
|語義| 命名| 簡寫|
|--|--|--|
|選中| selected| sel|
|當前| current| crt|
|顯示| show| show|
|隱藏| hide| hide|
|打開| open| open|
|關閉| close| close|
|出錯| error| err|
|不可用| disabled| dis|