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