web前端代码规范

一、统一要求

1.1.基本规范

1. 所有类名、id名、方法名等涉及到名称的，统一使用驼峰命名，命名要具有业务意义，语义化，简洁明了
2. 代码中不得出现警告
3. 代码中不得出现数字（插件除外）
4. 结构（html），表现(css)，行为(js)代码需分离

1.2.基本原则

1. 代码力求简洁，不要写大量重复的逻辑代码（公共方法需封装，公共样式提取到公共样式中）
2. 代码要有可读性，函数和元素命名要具有业务意义，关键业务要有详细的注释
3. 代码要有扩展性，要尽可能适应未来的业务变化，不得生搬硬套现有业务逻辑
4. 代码要有通用性，一个方法只专注于该方法需要做的事情（对外暴露相应的参数），一个模块只专注于该模块范围内的事情（对外暴露相应的接口）

二、html规范

2.1.Charst字符集合

1. 一般情况下统一使用UTF-8。尽量统一写成标准的 “UTF-8”，不要写成 “utf-8” 或 “utf8” 或 “UTF8”。根据 IETF对UTF-8的定义，其编码标准的写法是 “UTF-8”；

2.2.书写风格

1. Html代码大小写

• HTML标签名、类名、标签属性和大部分属性值统一用小写

  推荐：<div class="demo"></div>

 

2.元素属性

• 属性值使用双引号语法

  例：<link rel="stylesheet" href="" > 

3.特殊字符引用

• 不得使用‘>’和‘<’特殊字符，浏览器会将它们作为标签解析，若要正确显示，在 HTML 源代码中使用字符实体

推荐：<a href="#">more>></a>

 

4.代码嵌套

• 每个块级元素独占一行，内联元素可选
• html中禁止行内元素里面嵌套块级元素、span标签搭配for属性使用、div加disabled属性等不规范用法，<a>里不可以嵌套交互式元素<a>、<button>、<select>等;<p>里不可以嵌套块级元素<div>、<h1>~<h6>、<p>、<ul>/<ol>/<li>、<dl>/<dt>/<dd>、<form>等，可参考WEB标准系列-HTML元素嵌套；
• html结构用统一采用双引号,js 用单引号

5.引用规范

• 将所有页面公共样式（如common.css）、插件样式写入head内的底部；
• 将所有页面公共js、插件js放入body内底部；

*注意：引入的文件全需加注释，表示是什么样式，或者什么插件（备注版本号）

 

 

三、 CSS规范

3.1.代码格式化

1. 样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写
2. 每个属性声明末尾都要加分号；
3. css属性值需要用到引号时，统一使用双引号
4. 尽量不要用固定的宽高，多使用padding 和 margin

• 尽量少用通用选择器*
• 不使用ID选择器
• 不使用无具体语义定义的标签选择器
• 尽量少用！Important

  

3.2.代码可读性

1. 左括号与类名之间一个空格，冒号与属性值之间一个空格
2. 逗号分隔的取值，逗号之后一个空格

•  推荐：box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc; 

3.不要为0指明单位

•  推荐：margin：0 10px;
•  不推荐：margin：0px 10px;

3.3.属性书写顺序

1. 建议遵循以下顺序

• 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
• 自身属性：width / height / margin / padding / border / background
• 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
• 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient 等

2.如果是单个页面需要改公共css或者插件样式，请一定在单个页面的样式中改，坚决不能修改插件源码，js文件同理；

3.当属性存在兼容问题的，兼容多个浏览器时，将标准属性写在底部；

-moz-border-radius: 15px; /* Firefox */

-webkit-border-radius: 15px; /* Safari和Chrome */

-o-border-radius: 15px;

border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE    浏览器 *//标准属性