1. 文件命名规范
  1. 1.Container
  2. “container“ 就是将页面中的所有元素包在一起的部分，这部分还可以命名为: “wrapper“, “wrap“,
  3. “page“.
  4. 2.Header
  5. “header” 是网站页面的头部区域，一般来讲，它包含网站的logo和一些其他元素。这部分还可以命名为:“page-header” (或 pageHeader).
  7. Navbar
  8. “navbar“等同于横向的导航栏，是最典型的网页元素。这部分还可以命名为:“nav”, “navigation”, “nav-wrapper”.
  10. Menu
  11. “Menu”区域包含一般的链接和菜单，这部分还可以命名为: “subNav “, “links“，“sidebar-main”
  13.  Main
  14. “Main”是网站的主要区域，如果是博客的话它将包含的日志。这部分还可以命名为: “content“,“main-content” (或“mainContent”)。
  16. Sidebar
  17. “Sidebar” 部分可以包含网站的次要内容，比如最近更新内容列表、关于网站的介绍或广告元素等…这部
  18. 分还可以命名为: “subNav “, “side-panel“, “secondary-content“.
  19. Footer
  20. “Footer”包含网站的一些附加信息，这部分还可以命名为: “copyright“.

2. 页面结构

  1. 容器: container          
  2. 页头：header                
  3. 内容：content          
  4. 页面主体：main        
  5. 页尾：footer                  
  6. 导航：nav                
  7. 侧栏：sidebar            
  8. 栏目：column            
  9. 左右中：left right center
  10. 页面外围控制整体布局宽度：wrapper

3. 导航

  1. 导航：nav
  2. 主导航：mainbav
  3. 子导航：subnav
  4. 顶导航：topnav
  5. 边导航：sidebar
  6. 左导航：leftsidebar
  7. 右导航：rightsidebar
  8. 菜单：menu        
  9. 子菜单：submenu      
  10.  标题: title      
  11. 摘要: summary

4.  功能

  1. 标志：logo
  2. 广告：banner
  3. 登陆：login
  4. 登录条：loginbar
  5. 注册：regsiter
  6. 搜索：search
  7. 功能区：shop
  8. 标题：title
  9. 加入：joinus
  10. 状态：status
  11. 按钮：btn
  12. 滚动：scroll
  13. 标签页：tab
  14. 文章列表：list
  15. 提示信息：msg
  16. 当前的: current
  17. 小技巧：tips
  18. 图标: icon
  19. 注释：note
  20. 指南：guild
  21. 服务：service
  22. 热点：hot
  23. 新闻：news
  24. 下载：download
  25. 投票：vote
  26. 合作伙伴：partner
  27. 友情链接：link
  28. 版权：copyright

5. 网站公用相关

  1. Container div #container 容器
  2. Header or banner div #header 页头部分
  3. Main or global navigation div #main-nav 主导航
  4. Menu #menu 菜单
  5. Sub Menu #submenu 子菜单
  6. Left or right side columns #sidebar-a, #sidebar-b 左边栏或右边栏
  7. Main div #main 页面主体
  8. Content div #content 内容部分
  9. The main content area #content-main 主要内容区域
  10. Footer div #footer 页脚部分
  11. Tag #tag 标签
  12. Message #msg #message 提示信息
  13. Tips #tips 小技巧
  14. Vote #vote 投票
  15. Friend Link #friendlink 友情连接
  16. Title #title 标题
  17. Summary #summary 摘要
  18. Sub-navigation list #sub-nav 二级导航
  19. Search input #search-input 搜索输入框
  20. Search output #search-output 搜索输出和搜索结果相似
  21. Search #search 搜索
  22. Search results #search-results 搜索结果
  23. Copyright information #copyright 版权信息
  24. brand #branding 商标
  25. branding-logo #branding-logo  LOGO
  26. Site information #siteinfo 网站信息
  27. Copyright information etc. #siteinfo-legal 法律声明
  28. Designer or other credits #siteinfo-credits 信誉
  29. Join us #joinus 加入我们
  30. Partnership opportunities #partner 合作伙伴
  31. Services #service 服务
  32. Regsiter #regsiter 注册
  33. Status #status 状态