HOME/Articles/

前端编码规范

Article Outline

前端编码规范

<!--more-->

##命名技巧

  • 语义化
  1. 语义化标签优先

  2. 基于功能命名,基于内容命名,基于表现命名

  3. 简略,明了,无后患

    • 命名范例 都使用英文小写,用引号包裹,用中横线连接,体现功能,不涉及表现样式
  • 常见命名
  1. wrap/.wrapper
  2. .container/.ct
  3. .header
  4. footer
  5. aside/sidebar
  6. .content
  7. navigation
  8. pagination(分页)
  9. tabs/.tab
  10. breadcrumbs 面包屑,导航列表
  11. dropdown 下拉菜单
  12. thumbnail 小图像,头像
  13. panel 面板
  14. tooltop 鼠标放上去的提示
  15. popup 鼠标点击弹出的提示
  16. subnav 二级导航
  17. message/notice
  18. summary
  19. register
  20. banner 广告条
  21. modal/dialog 弹窗

##css规范

  1. tab用两个空格表示
  2. css的:后加个空格,{前加个空格
  3. 每条声明后都加上分号
  4. 换行,而不是放到一行
  5. 颜色用小写,缩写
  6. 小数不用写前缀,.5s; 0不加单位
  7. 属性尽量缩写
  • 属性的声明顺序
  1. positioning(position)
  2. Box model(margin,padding,border,width,height,display)
  3. Typographic(文字相关)
  4. Visual(视觉相关)