前端 规范

前端规范

1. 文件名称：字母名称小写。统一减号（-）链接
2. 文本缩进：一次缩进两个空格
3. 注释：代码为何要这样写，背后的考量
4. 文件引用加载
   • 样式文件： <link ref="stylesheet" href="style/xxx.css"></link>
   • js脚本文件：<script src="script/xxx.js" ><script>
   • 注：样式表放在顶部，脚本文件放在底部（避免因脚本文件阻塞页面内容的呈现）
5. html引号：建议统一使用双引号
6. 变量声明：防止全局污染
7. 提升声明：把风险降到最低，手动的显示声明变量与方法，所有的变量及方法应当定义在function内的首行，只用一个var关键字声明，多个变量用逗号隔开。
8. if判断：
   • 不推荐if嵌套
   • 尽可能少使用else
   • 优先使用反向判断 if(!xxx) { return }
   • 简短判断建议用 三元表达式 或 或语句||
9. 字符串定义：建议统一使用单引号
10. CSS
    • 使用子迭代器控制更精确范围
      • 不推荐.content .title { font-size: 2rem; }
      • 推荐.content > .title { font-size: 2rem; }
    • 合写减少代码
      • 不推荐padding-bottom： 2em; padding-left: 1em
      • 推荐padding：0 0 1em 2em;
    • 0 和 单位
      • 不推荐padding： 0px
      • 推荐padding：0;
    • 命名遵循BEM规范
    • 结构规范化：样式按一定顺序进行编写
    • 声明结束： 每个样式属性应该用分号结束，且每个样式属性结束换行
    • CSS引号：选择的属性值建议用双引号， url(不含引号)
    • 常用命名
      • 头：header
      • 内容：content
      • 尾： footer
      • 导航： nav
      • 侧栏： sidebar
      • 栏目： column
      • 页面外围控制整体布局宽度： wrapper
      • 左： left
      • 右： right
      • 中： center
      • 登录条： loginbar
      • 标志： logo
      • 广告： banner
      • 页面主体： main
      • 热点： hot
      • 新闻： news
      • 下载： download
      • 子导航： subnav
      • 菜单： menu
      • 子菜单： submenu
      • 搜索： search
      • 友情链接： frendlink
      • 页脚： footer
      • 版权： copyright
      • 滚动： scroll
      • 标签页： tab
      • 文章列表： list
      • 提示信息： msg
      • 小技巧： tips
      • 栏目标题： tiole
      • 加入： joinus
      • 指南： guild
      • 服务： service
      • 注册： regsiter
      • 状态： status
      • 投票： vote
      • 合作伙伴： partner