团队合作的代码规范

基本准则

• 代码缩进严格统一，要么都是2空格，要么都是4空格，禁止一切空格交叉使用导致代码不对齐，看着头痛的情况出现
• 禁止代码断层（完整代码块内出现多余的空行）
• 注释必须写
• 非工程化项目中css禁止在html代码中书写
• 注销无用的代码一律删掉
• 便于开发的代码，例如console.log()或alert()在开发完成后一律删掉

 

• 标签合理使用

 

<!-- 头部 --> <header></header>

<!-- 主内容 --> <main></main>

<!-- 尾部 --> <footer></footer>

<!-- 按钮 --> <button></button>

<!-- 导航 --> <nav></nav>

<!-- 标题 h1-h6 -->

<h3></h3>

 

• 标签class或id命名语义化

 

头部：class="header"

尾部：footer

导航：nav

侧边栏：sidebar

标签页：tab

菜单：menu

 

• 标签属性书写顺序

class

id

data-*

src, type, href, value

title, alt

 

• 项目初始化样式reset.css

 

*{-webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0;} body { color:rgba(51,51,51,0.8); font-size:14px; font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif; } td,th,caption { font-size:14px; } h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; } address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal;} a { color:#555; text-decoration:none; } a:hover { text-decoration: none; } img { border:none; vertical-align: middle} ol,ul,li { list-style:none; } i{font-style: normal;} input, textarea, select, button { font:14px "Arial","Microsoft YaHei","黑体","宋体",sans-serif;} input,button{border: none; outline: none;} input[type=checkbox], input[type=radio]{margin: 0;} table { border-collapse:collapse; } html {overflow-y: scroll;} p{margin: 0;} .clearfix:after {content: "."; display: block; height:0; clear:both; visibility: hidden;} .clearfix { *zoom:1; }/*公共类*/