首页 > 代码库 > Web前端开发规范收集
Web前端开发规范收集
在Web开发中，后端跟前端配合非常easy出现故障。这时我们就须要一些规则来约束前端任意的编写。
CSS编程规范
1. 属性书写基本顺序
a. 先位置属性（position, top, right, z-index, display, float等）
b. 大小（width, height, padding, margin）
c. 文字（font, line-height, letter-spacing, color- text-align等）
d. 背景（background, border等）
e. 其它（animation, transition等）
比方：.example {position: absolute; display: inline-block; width: 100px;font-size: 1.5em; border: 1px solid red;}
2. 选择器属性精简。一般能缩写就用缩写
比方： 能用padding,margin,font属性整合写,就不要用padding-left，padding-right
color:#eebbcc能够用color:#ebc
注：在大站点中，千万级的訪问时；一个字节都是非常宝贵的,每天的流量*365*pv节省下来就非常宝贵。占用带宽少，訪问速度也会加快。所以假设发现CSS中假设多处出现上面的情况，就需精简了。
3. 选择器命名要简单但让人看的懂，即顾名思义
比方：navigation 能够用nav缩写。由于nav非常easy就能够让人想到导航
而假设意思是：author，却简写.atr，这样时间久了就非常难猜出是什么意思了
所以简写要让人知道意思，假设不能让人明确。就全些。
注：一律小写、尽量用英文不要拼写（不懂查字典）、不加中横线和下划线；缩写要让人看的明确，否则不缩写
4. 不要任意使用id, 理解id和class的差别
注：id在JS是唯一的，不能多次使用，而使用class类选择器却能够反复使用，另外id的优先级优先与class，所以id应该按需使用，而不能滥用。
5. 经常使用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
标签：tags
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
增加：joinus
指南：guide
服务：service
注冊：regsiter
状态：status
投票：vote
合作伙伴：partner
注：能够去大站点新浪、淘宝、网易等下载css下来看看了解它们的命名规范
6. 如无必要，不要为id/class选择器加类型选择器进行限定
如：#error {} 前面加 div #error {}
注：如id选择器本身就能够非常精确定位，前面就不须要加限定了。这样性能和维护都会减少
7. 书写CSS时。用例如以下规范：
Body {background-color: #eaeceb; font: normal 100% "微软雅黑"}
注：选择器和大括号｛空一格；属性和属性之间空一格。写满后换一行，以｛对齐開始
HTML编程规范
A.文件规范
1. html,css, js, images文件均归档至对应的文件夹中;
2. html文件命名: 英文命名, 后缀.html;
3. css文件命名: 英文命名, 后缀.css. 共用base.css, 首页index.css, 其它页面依实际模块需求命名.;
4. JS文件命名: 英文命名, 后缀.js. 共用common.js, 其它依实际模块需求命名;
B.html书写规范
1. 文档类型声明及编码: 统一为html5声明类型<!DOCTYPEhtml>; 编码统一为<meta charset="utf-8" />, 书写实现层次分明的缩进;
2. 非特殊情况下样式文件必须外链至<head>…</head>之间;非特殊情况下JavaScript文件必须外链至页面底部, 由于网页渲染是从上到下;
3. 引入样式文件或JavaScript文件时, 须略去默认类型声明, 写法例如以下:
<linkrel="stylesheet" href=http://www.mamicode.com/"…" />
<style>…</style>
<scriptsrc=http://www.mamicode.com/"…"></script>
4. 引入JS库文件, 文件名称须包括库名称及版本及是否为压缩版, 比方jquery-1.4.1.min.js; 引入插件, 文件名称格式为库名称+插件名称, 比方jQuery.cookie.js;
5. 全部编码均遵循xhtml标准, 标签 & 属性 & 属性命名 必须由小写字母及下划线数字组成, 且全部标签必须闭合等; 属性值必须用双引號包含;
6. 充分利用无兼容性问题的html自身标签, 比方span, em,strong, optgroup, label,等等; 须要为html元素加入自己定义属性的时候, 首先要考虑下有没有默认的已有的合适标签去设置, 假设没有, 能够使用须以"data-"为前缀来加入自己定义属性
7. 语义化html, 如 标题依据重要性用h*(同一页面仅仅能有一个h1),段落标记用p, 列表用ul, 内联元素中不可嵌套块级元素;
8. 尽可能降低div嵌套
9. 在页面中尽量避免使用style属性,即style="…"，应写在CSS里面
10. 重要图片必须加上alt属性;
11. 给区块代码及重要功能加上凝视, 方便后台加入功能;
12. 编写页面过程中, 请考虑向后扩展性和匹配项目的合理性;
13. class & id 參见 css书写规范.
14. 书写代码。兼容主流浏览器版本号（谷歌、火狐、IE），一个页面做完，在各个浏览器打开測试下兼容性。
注：符合web标准,语义化html,结构层次清楚，表现行为分离,兼容性优良.页面性能方面,代码要求简洁明了有序,尽可能的减小server负载, 保证最快的解析速度。
JS编程规范
1.变量命名规范
a.变量命名都以类型前缀+有意义的单词组成。单词首字母都须要大写。
比如：sUserName。nCount。
b.变量都须要有一个类型前缀。依照类型能够分为：
s：表示字符串。
比如：sName，sHtml;
n：表示数字。比如：nPage，nTotal;
b：表示逻辑。比如：bChecked，bHasLogin;
a：表示数组。比如：aList。aGroup;
r：表示正則表達式。
比如：rDomain，rEmail;
f：表示函数。
比如：fGetHtml。fInit;
o：表示以上未涉及到的其它对象，比如：oButton，oDate;
g：代表全局，比如：gUserName，gLoginTime。
c.例外情况：
1：作用域不大暂时变量能够简写，比方：str。num，bol，obj，fun，arr。
2：循环变量能够简写，比方：i。j，k等。
注：为什么须要这样强制定义变量前缀?正式由于javascript是弱语言造成的。在定义大量变量的时候，我们须要非常明白的知道当前变量是什么属性，假设仅仅通过普通单词，是非常难区分的。
2.函数命名规范
统一使用动词或者动词[+名词]形式。比如：fGetVersion()。fSubmitForm()，fInit();涉及返回逻辑值的函数能够使用is。has等表示逻辑的词语取代动词。比如：isPay()、hasBoxClass。
一些案例：
1.去结算。id=”foot_right”,这个不能非常直接表达功能作用；命名不单单用来写写css样式，须要考虑到功能编码
2.Html标签详细使用方法错乱，全选应该放在<label>全选</label>。这样点全选就能够联动复选框
3. 命名任意，不规范, fenlei,proList,ShopCart出现三种命名方式了；html页面命名一般都是小写fenlei,prolist,shopcart
有时候我们须要吐槽
由于真的非常难受
Web前端开发规范收集