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="…" />
<style>…</style>
<scriptsrc="…"></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>。这样点全选就能够联动复选框
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcWl2YW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
3. 命名任意,不规范, fenlei,proList,ShopCart出现三种命名方式了;html页面命名一般都是小写fenlei,prolist,shopcart
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcWl2YW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
有时候我们须要吐槽
由于真的非常难受
Web前端开发规范收集的更多相关文章
- WEB前端开发规范
WEB前端开发规范 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档.本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改. 基本 ...
- WEB前端开发规范文档(转)
http://codeguide.bootcss.com/ 编写灵活.稳定.高质量的 HTML 和 CSS 代码的规范上面的文档 再结合下面的规范: 无论是从技术角度还是开发视角,对于web前端开发 ...
- 网站开发进阶(三十八)Web前端开发规范文档你需要知道的事
Web前端开发规范文档你需要知道的事 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进 ...
- Web前端开发规范文档你需要知道的事
Web前端开发规范文档你需要知道的事 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进 ...
- WEB前端开发规范文档[转]
为新项目写的一份规范文档, 分享给大家. 我想前端开发过程中, 无论是团队开发, 还是单兵做站, 有一份开发文档做规范, 对开发工作都是很有益的. 本文档由本人编写, 部分意见来源于网络, 以此感谢, ...
- Web 前端开发规范手册
一.规范目的 Web 前端开发规范手册 1.1 概述 ......................................................................... ...
- Web前端开发规范手册
一.规范目的 1.1 概述 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. ...
- Web前端开发规范文档(google规范)
(Xee:其实没什么规范约束,但是养成一种好习惯,何乐而不为?) 区分大小写 xhtml 区分大小写,xhtml要求 标签名 属性名 值都要小写,并且要有双引号和 标签闭合. css 元素名称以及i ...
- Web前端开发规范文档你需要知道的事--HTML、css、js、文档等需要规范内容
规范目的 为提高团队协作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,特制订此文档.本规范文档一经确认,前端开发人员必须按本文档规范进行前台页面开发.本文档如有不对或者不 ...
随机推荐
- import from 相对路径
项目目录 - server - static - src - - stroe - - router - - main.js - app.js src为前端文件,src目录下有main.js代码如下 i ...
- Generator与async/await与Generator的模拟
Generator 函数有多种理解角度.语法上,首先可以把它理解成,Generator 函数是一个状态机,封装了多个内部状态. 执行 Generator 函数会返回一个遍历器对象,也就是说,Gener ...
- UVALive 6319 暴力
思路:直接vector暴力 #include<iostream> #include<vector> #include<cstring> #include<cs ...
- hashcode和equals方法
转自https://www.cnblogs.com/keyi/p/7119825.html 一.equals方法的作用 1.默认情况(没有覆盖equals方法)下equals方法都是调用Object类 ...
- 关于微信小程序并发数不能超过五个的问题
wx.request 的最大请求数为5个,超过的部分就请求不到了 昨天遇到个问题,首页的请求数一共有9个,但是在有appid开发时竟然一直都没出错,直到我切到没appid的版本的时候才发现了这个问题. ...
- hdu 3535 背包综合题
/* 有n组背包,每组都有限制 0.至少选一项 1.最多选一项 2.任意选 */ #include <iostream> #include <cstdio> #include ...
- pat 甲级 1049. Counting Ones (30)
1049. Counting Ones (30) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue The tas ...
- Named Formats!
原文发布时间为:2011-06-26 -- 来源于本人的百度文章 [由搬家工具导入] using System;using System.Text;using System.Web;using Sys ...
- SQL语句效率问题的几点总结
原文发布时间为:2009-10-29 -- 来源于本人的百度文章 [由搬家工具导入] 1. SQL优化的原则是: 将一次操作需要读取的BLOCK数减到最低,即在最短的时间达到最大的数据吞吐量。 调 ...
- 排名次SQL语句【名次可重复时】
原文发布时间为:2008-10-26 -- 来源于本人的百度文章 [由搬家工具导入] 功能实现 名次可重复时,比如第一名有两个。。。 select *,(select count(distin ...