css選擇器常用命名推薦

admin發表於2017-04-07

為了程式碼的可閱讀性和可維護性,通常對於選擇器的命名要具有語義化效果。

也就是看到選擇器的名稱,也就能大體知道此選擇器所扮演的角色。

下面就是幾個推薦的命名,感興趣的可以做一下參考。

一.與頁面結構相關:

header  footer  content  main  nav  subnav  navItem  contBody  w  menu submenu  container  bot  wrapper bread-crumb  column 

topNav   panel  sidebar  index  sep。

二.與模組內容相關的:

summary  shop  detail info  service guide copyright friendlink  search regist login  title   comment summary  tips 

item vote hot news list partner joinus  aboutus  banner  msg  brand。

三.與功能相關的:

download  op  link  reject agree  fun add  del  remove hover   clearF   pay  file。

四.與頁面元素相關的:

msg btn btnBlock  dataLabel  dataType dataValue  txt  defaultImg  icon logo  dataInput  dropdown。

五.與元件大小相關:

lg sm md xs xl。

六.與元件狀態有關:

primary  danger succ status current disabled failure。