前端开发规范
-资料整理 宜信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
1967
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
