标签：
在Web开发中，后端跟前端配合很容易出现问题，这时我们就需要一些规则来约束前端随意的编写。
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很容易就可以让人想到导航
而如果意思是：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% "微软雅黑"}
注：选择器和大括号｛空一格；属性和属性之间空一格；写满后换一行，以｛对齐开始
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, 结构层次清楚，表现行为分离,兼容性优良. 页面性能方面,代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度。
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
有时候我们需要吐槽
因为真的很难受
标签：
原文地址：http://blog.csdn.net/qivan/article/details/44489995
