前端基本开发规范

• 一般规范
• HTML书写规范
• CSS书写规范
• JavaScript书写规范

---

一般规范

• 文件资源命名

资源（图片、js、css）的字母名称必须全为小写，这是因为在某些对大小写字母敏感的操作系统中，当文件通过工具压缩混淆后，或者人为修改过后，大小写不同而导致引用文件不同的错误，很难被发现。
当资源名称过长时，建议使用下划线‘_’来分隔，例如：

my_script.js
my_file.min.css
my_logo.png
my_article.html

• 注释

html注释: 注释格式 , '--'只能在注释的始末位置,不可置入注释文字区域; 
css注释: 注释格式 /*这儿是注释*/;  
JavaScript注释, 单行注释使用'//这儿是单行注释' ,多行注释使用 /* 这儿有多行注释 */

HTML书写规范

• 脚本加载

出于性能考虑，脚本异步加载很关键。一段脚本放置在 内，比如，其加载会一直阻塞 DOM 解析，直至它完全地加载和执行完毕。这会造成页面显示的延迟。特别是一些重量级的脚本，对用户体验来说那真是一个巨大的影响。因此，建议使用如下方式加载脚本：

• 页面元素语义化

语义化使得页面元素可读性更强，例如我们用 header 元素来定义头部标题，p 元素来定义文字段落，用 a 元素来定义链接锚点，等等。

语义化

  
My page title


  

    
Home
    
News
    
About
  
 

  

    

      
All news articles
    
    

      

        
Good article
        Introduction sub-title
      
 
      

        
This is a good example for HTML semantics
      
      

        
I think I'm more on the side and should not receive the main credits
      
      

        
This article was created by David 1 month ago
      
    
    

      
Related sections: Events, Public holidays
    
  


  Copyright 2016

• 链接

  在浏览器里，当我们点击空链接时，它会自动将当前页面重置到首端，从而影响用户正常的阅读内容，我们用代码“javascript:void(null)”代替原来的“#”标记

• 文字和图片提示（alt 和 title）

文字
  
文字   

• id与class的命名

为了避免id与class命名混淆，规定id以‘_’下划线分隔，class以‘-’短横线分隔

 
All news articles
 

通用的命名如下：
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner

CSS书写规范

• 属性书写顺序

css属性书写顺序, 建议遵循 布局定位属性-->自身属性-->文本属性-->其他属性. 此条可根据自身习惯书写, 但尽量保证同类属性写在一起. 属性列举: 布局定位属性主要包括: margin、padding、float（包括clear）、position（相应的 top,right,bottom,left）、display、visibility、overflow等；自身属性主要包括: width & height & background & border; 文本属性主要包括：font、color、text-align、text-decoration、text-indent等；其他属性包括: list-style(列表样式)、vertical-vlign、cursor、z-index(层叠顺序) 、zoom等.我所列出的这些属性只是最常用到的, 并不代表全部;
示例：

.box {
 display: block;
 position: absolute;
 left: 30%;
 right: 30%;
 overflow: hidden;
 margin: 1em;
 padding: 1em;
 background-color: #eee;
  border: 3px solid #ddd;
  font-family: 'Arial', sans-serif;
  font-size: 1.5rem;
  text-transform: uppercase;
}

• CSS注释

css里的注释采用大区块必须注释，小区块部分注释的方式

注释的写法: 
  /* Footer */   
内容区   
/* End Footer */

JavaScript书写规范

待完善