前端开发规范
-资料整理 宜信web- 杨亚坤
1,html 规范
- 表现、内容和行为的分离
- 标记应该是结构良好、语义正确 以及 普遍合法 。
4,在HTML5规范里并没有严格要求属性值两边加引号。但考虑到一些属性可以接受空白值,为了保持一致性,我们要求所有属性值必须加上引号。对于属性的定义,确保全部使用双引号,绝不要使用单引号。
5,尽最大能力标签语意化
- 要给 h1-h6 标题 -- 包括作为链接的标题 -- 定义缺省样式。在你的CSS文档顶部定义它们,在必要时修改它们以保持整个站点的一致性。
- 标题必须有层次,能表明从大到小不同级别的重要性,h1具有最大的字体大小。
- SEO:要大致地了解页面的层次组织和阅读效果,在开发者工具里关闭CSS效果,你会看到一个基于文字的视图,包括所有的 h1-h6 , strong, em 等标签。
6,适当使用实体
以实体代替与HTML语法相同的字符,避免浏览解析错误。
常用HTML字符实体(建议使用实体):
字符 | 名称 | 实体名 | 实体数 |
" | 双引号 | " | " |
& | &符 | & | & |
< | 左尖括号(小于号) | < | < |
> | 右尖括号(大于号) | > | > |
| 空格 | |   |
| 中文全角空格 |
|   |
常用特殊字符实体(不建议使用实体):
字符 | 名称 | 实体名 | 实体数 |
¥ | 元 | ¥ | ¥ |
¦ | 断竖线 | ¦ | ¦ |
© | 版权 | © | © |
® | 注册商标R | ® | ® |
™ | 商标TM | ™ | ™ |
· | 间隔符 | · | · |
« | 左双尖括号 | « | « |
» | 右双尖括号 | » | » |
° | 度 | ° | ° |
× | 乘 | × | × |
÷ | 除 | ÷ | ÷ |
‰ | 千分比 | ‰ | ‰ |
7.标记的总体原则
下面是编写HTML标记的总体原则。提醒大家一点,在创建的HTML文档里总是要使用能够代表内容语义的标记。
- 段落分隔符要使用实际对应的<p>元素,而不是用多个<br>标签。
- 在合适的条件下,充分利用<dl> (定义列表)和<blockquote> 标签。
- 列表中的条目必须总是放置于<ul>、<ol>或<dl> 中,永远不要用一组 <div>或<p> 来表示。
- 给每个表单里的字段加上 <label> 标签,其中的 for 属性必须和对应的输入字段对应,这样用户就可以点击标签。同理,给标签加上 cursor:pointer; 样式也是明智的做法。
- 不用使用输入字段中的 size 属性。该属性是和输入字段里文本的 font-size 相关的。应该使用CSS宽度。
- 在某些闭合的 </div> 标签旁边加上一段html注释,说明这里闭合的是什么元素。这在有大量嵌套和缩进的情况下会很有用。
- 不要把表格用于页面布局。
- 在合适的条件下,利用 <thead>、<tbody>和<th>标签 (以及Scope属性)。
6,元素嵌套合法化
禁止 出现
<ul>
<div></div>
<li></li>
<li></li>
</ul>
Ul子元素只能是 li 不可是其他
9.属性顺序
HTML 属性应当按照以下给出的顺序依次排列,确保代码的易读性。
- class
- id, name
- data-*
- src, for, type, href, value
- title, alt
- role, aria-*
class 用于标识高度可复用组件,因此应该排在首位。id 用于标识具体组件,应当谨慎使用(例如,页面内的书签),因此排在第二位
10,
2css 书写规范
1.尽量使用英文命名原则,严格禁止拼音、数字
2.尽量不加缩写,除非已约定的缩写方式,如:nav
3.id和class全部小写,采用该版块的英文单词或组合命名,以中杠“-”分割,如:nav-tabs(导航标签/nav+tabs)
必须使用Tab进行代码缩进,建议设置Tab为4个空格的宽度,而不是4个空格;
属性与“{}”之间,属性名和值之间必须有空格,属性必须换行,“{}”必须换行显示(即使只有一个属性),如:
.nav-tabs {
border-bottom: 1px solid #ddd;
}
属性值后面必须加分号“;”,即使只有一个;
RGB颜色值有字母的必须采用小写,可缩写的尽量使用缩写,如:#ffcccc缩写为#fcc;
针对特殊浏览器的属性,应写在标准属性之前,左侧对齐,如:
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
按照元素模型由外及内,由整体到细节的书写顺序,属性值大致分为五组:
- 位置:position,top,right,bottom,left,float
- 盒模型属性:display,margin,padding,width,height
- 边框与背景:border,background
- 段落与文本:line-height,text-indent,font,color,text-decoration,text-align…
- 其他属性:overflow,cursor,visibility,…
媒体查询(Media query)的位置
将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了,将来只会被大家遗忘。下面给出一个典型的实例
5.多选择器规则之间(必须)换行
/* 推荐的写法 */
a.btn,
input.btn,
input[type="button"] {
......
}
6. (禁止)将样式写为单行, 如
.hotel-content {margin: 10px; background-color: #efefef;}
7. (禁止)向 0 后添加单位, 如:
.obj {
left: 0px;
}
8. (禁止)使用css原生import
使用css原生import有很多弊端,比如会增加请求数等…
10. 小图片(必须)sprite 合并
11. (推荐)当编写针对特定html结构的样式时,使用元素名 + 类名
/* 所有的nav都是针对ul编写的 */
ul.nav {
......
}
12. (禁止)使用行内(inline)样式
13. 链接的样式,(务必)按照这个顺序来书写
a:link -> a:visited -> a:hover -> a:active
14.CSS 必须放在文档的 <head> 部分, Javascript 必须正好放在 </body> 标签的前面。
14,对于通用元素使用 class ,这样利于渲染性能的优化。
- 对于经常出现的组件,避免使用属性选择器(例如,[class^="..."])。浏览器的性能会受到这些因素的影响。
- 选择器要尽可能短,并且尽量限制组成选择器的元素个数,建议不要超过 3 。
- 只有在必要的时候才将 class 限制在最近的父元素内(也就是后代选择器)(例如,不使用带前缀的 class 时 -- 前缀类似于命名空间)。
15.代码组织
- 以组件为单位组织代码段。
- 制定一致的注释规范。
- 使用一致的空白符将代码分隔成块,这样利于扫描较大的文档。
- 如果使用了多个 CSS 文件,将其按照组件而非页面的形式分拆,因为页面会被重组,而组件只会被移动。
参考:
https://codeguide.bootcss.com/#css-single-declarations
参考 :
https://www.25xt.com/html5css3/15586.html
注释规范
文件头部注释主要用来阐述此文件的名称,版本,作者。按照以下形式书写:
其中版本号的格式为:yyyyMMDDHH
行内注释
行内注释主要说明本段代码所在的模块;
简写形式的属性声明
在需要显示地设置所有值的情况下,应当尽量限制使用简写形式的属性声明。常见的滥用简写属性声明的情况如下:
- padding
- margin
- font
- background
- border
- border-radius
大部分情况下,我们不需要为简写形式的属性声明指定所有值。例如,HTML 的 heading 元素只需要设置上、下边距(margin)的值,因此,在必要的时候,只需覆盖这两个值就可以。过度使用简写形式的属性声明会导致代码混乱,并且会对属性值带来不必要的覆盖从而引起意外的副作用。
Js 规范
1. 句尾分号;和留空;
总的来说,使用留空应该遵循源远流长的英语阅读惯例。 例如,每个逗号和冒号(以及适用的分号)后面要空一格,但在括号内部的左侧和右侧都不要加空格。另外,大括号应该总是和他们前面的参数出现在同一行。
来看看下面的 JavaScript for循环的例子...
正确
for (var i = 0, j = arr.length; i < j; i++) {
// Do something.
}
不正确
for ( var i = 0, j = arr.length; i < j; i++ )
{
// Do something.
}
也不正确
for(var i=0,j=arr.length;i<j;i++){
// Do something.
}
2. 变量命名合规格(参考见javascript高级程序设计指南);
一般情况下
1) 变量:必须采用骆驼峰的命名且首字母小写
// 正确的命名
var isHotel,
isHotelBeijing,
isHotelBeijingHandian;
2) 常量:必须采用全大写的命名,且单词以_分割,常量通常用于ajax请求url,和一些不会改变的数据
// 正确的命名
var HOTEL_GET_URL = 'http://map.baidu.com/detail',
PLACE_TYPE = ‘hotel’;
(3)类:必须采用骆驼峰的命名且首字母大写,如:
var FooAndToo = function(name) {
this.name = name;
}
3,禁止 if 缩写,禁止使用 eval;
5. 变量未定义;尽量减少全局变量和空的 变量中转
6,禁止超长函数,做到业务分化,函数精短
7,使用函数式编程,对象式编程;倡导声明式编程,避免命令式编程;
// 命令式
var makes = [];
for (var i = 0; i < cars.length; i++) {
makes.push(cars[i].make);
}
// 声明式
var makes = cars.map(function(car){ return car.make; });
8,善于使用高阶函数,闭包,函数柯里化,递归,等进行编程;提高代码的可读性,可维护性,减少内存开销;
9. 块内函数必须用局部变量声明
// 错误的写法
var call = function(name) {
if (name == "hotel") {
function foo() {
console.log("hotel foo");
}
}
foo && foo();
}
// 推荐的写法
var call = function(name) {
var foo;
if (name == "hotel") {
foo = function() {
console.log("hotel foo");
}
}
foo && foo();
}
引起的bug:第一种写法foo的声明被提前了; 调用call时:第一种写法会调用foo函数,第二种写法不会调用foo函数
10, (禁止)使用eval,采取$.parseJSON
三个原因:
- 有注入风险,尤其是ajax返回数据
- 不方便debug
- 效率低,eval是一个执行效率很低的函数
建议:
使用new Function来代替eval的使用,最好就别用。
11,iframe;
Iframe 是能添加到指定页面的各种元素中上开销最大的一个。它们会阻塞页面让它无法触发onload事件,直到它们加载完成。有时候它们被其他机构用来处理追踪脚本。例如 Doubleclick floodlight 标签就是一个 iframe,管理员可以从他们的管理面板向里面增加追踪像素。在加入iFrame的任何情况下,它应该在window的onload事件被触发之后再动态加入到DOM中
13,不要在HTML中写内联脚本 <script> 块。 它们会阻塞页面渲染操作,对页面加载时间带来破坏性的影响。
14,条件表达式例如 if 语句通过抽象方法 ToBoolean 强制计算它们的表达式并且总是遵守下面的规则:
- 对象 被计算为 true
- Undefined 被计算为 false
- Null 被计算为 false
- 布尔值 被计算为 布尔的值
- 数字 如果是 +0、-0、或 NaN 被计算为 false, 否则为 true
- 字符串 如果是空字符串 '' 被计算为 false,否则为 true
if ([0]) {
// true
// An array is an object, objects evaluate to true
}
条件表达式例如 if 语句通过抽象方法 ToBoolean 强制计算它们的表达式并且总是遵守下面的规则:
- 对象 被计算为 true
- Undefined 被计算为 false
- Null 被计算为 false
- 布尔值 被计算为 布尔的值
- 数字 如果是 +0、-0、或 NaN 被计算为 false, 否则为 true
- 字符串 如果是空字符串 '' 被计算为 false,否则为 true
if ([0]) {
// true
// An array is an object, objects evaluate to true
}
15.使用 $ 作为存储 jQuery 对象的变量名前缀。
// bad
const sidebar = $('.sidebar');
// good
const $sidebar = $('.sidebar');
*********其他一些 优化
优化 JavaScript 的特征◊
- 编写可维护的代码
- 单变量模式
- Hoisting:把所有变量声明统一放到函数的起始位置 (在后部声明的变量也会被JS视为在头部定义,由此会产生问题)
- 不要扩充内置原型(虽然给Object(), Function()之类的内置原型增加属性和方法很巧妙,但是会破坏可维护性)
- 不要用隐含的类型转换
- 不要用 eval()
- 用 parseInt() 进行数字转换
- (规范)左大括号的位置
- 构造器首字母大写
- 写注释
- 不要用 void
- 不要用 with 语句
- 不要用 continue 语句
- 尽量不要用位运算
附件: 常用css命令名
常用的css命名规则:
- 头: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
- 指南:guide
- 服务:service
- 注册:register
- 状态:status
- 投票:vote
- 合作伙伴:partner
注释的写法:
/* Footer */
内容区
/* End Footer */
id的命名:
(1)页面结构
- 容器: container
- 页头:header
- 内容:content/container
- 页面主体:main
- 页尾:footer
- 导航:nav
- 侧栏:sidebar
- 栏目:column
- 页面外围控制整体布局宽度:wrapper
- 左右中:left right center
(2)导航
- 导航:nav
- 主导航:mainnav
- 子导航:subnav
- 顶导航:topnav
- 边导航:sidebar
- 左导航:leftsidebar
- 右导航:rightsidebar
- 菜单:menu
- 子菜单:submenu
- 标题: title
- 摘要: summary
(3)功能
- 标志:logo
- 广告:banner
- 登陆:login
- 登录条:loginbar
- 注册:regsiter
- 搜索:search
- 功能区:shop
- 标题:title
- 加入:joinus
- 状态:status
- 按钮:btn
- 滚动:scroll
- 标签页:tab
- 文章列表:list
- 提示信息:msg
- 当前的: current
- 小技巧:tips
- 图标: icon
- 注释:note
- 指南:guide
- 服务:service
- 热点:hot
- 新闻:news
- 下载:download
- 投票:vote
- 合作伙伴:partner
- 友情链接:link
- 版权:copyright
class的命名:
(1)颜色:使用颜色的名称或者16进制代码,如
- .red { color: red; }
- .f60 { color: #f60; }
- .ff8600 { color: #ff8600; }
(2)字体大小,直接使用”font+字体大小”作为名称,如
- .font12px { font-size: 12px; }
- .font9pt {font-size: 9pt; }
(3)对齐样式,使用对齐目标的英文名称,如
- .left { float:left; }
- .bottom { float:bottom; }
(4)标题栏样式,使用”类别+功能”的方式命名,如
- .barnews { }
- .barproduct { }
注意事项::
- 一律小写;
- 尽量用英文;
- 不加中杠和下划线;
- 尽量不缩写,除非一看就明白的单词.
- 主要的 master.css
- 模块 module.css
- 基本共用 base.css
- 布局,版面 layout.css
- 主题 themes.css
- 专栏 columns.css
- 文字 font.css
- 表单 forms.css
- 补丁 mend.css
- 打印 print.css