HTML+CSS命名规范总结
1.HTML部分
1.1添加必须的utf-8的字符集，并且使用HTML5的简洁
方式：
<meta charset=”utf-8”>
1.2遵循xhtml1.0规则
1）所有标签必须结束
2）所有标签必须小写
3）标签属性必须使用成对引号（单引号或双引号）
4）标签属性必须有值：
5）所有特殊符号必须转义
1.3标签属性命名规范
Id：连接符命名法“hello-world”
Class：连接符命名法“hello-world”
Name：骆驼式命名法“helloWorld”
1）表单元素的id必须加以下前缀
label： lbl text：txt password：txt textarea：txt file：txt
radio： rad checkbox：chk submit：btn reset：btn
button：btn hidden： hid
2）用于结构布局的元素id命名
主容器： main 页头：header 页脚：foote 内容区域：content
LOGO： logo 主导航：main-nav 二级导航：sub-nav
3）name命名
一般用于表单元素，根据当前元素id属性值命名，去掉id属性值的前缀和所有连接符，使用骆驼式命名法命名，例如：id=“txt-id-card”，那么name=“idCard”。
1.4合理使用标签，语义化结构
1）标签合理嵌套
a ，spam ，strong ，em ，p ，h1-h6等元素不能包含：div、ul、ol、dl、p
2）严禁多div症、多span症、多table症，正确使用标签表现DOM结构，在文档去除css的情况下，任然具有结构和可读性，以下是html标记的使用规范：
p ：文本段落 dl ：定义列表，可包括标题和内容简介的列表
ul ：无序列表 ol ：有序列表 strong/em ：强调文本
h1-h6 ：文章标题、内容区块标题，根据重要性由大到小区分，h1一个页面只出现一次；
img ：图像。必须加上alt属性，当图像无法显示时，可表示图像信息，背景和按钮使用css处理，不使用img元素；
table ：数据网络，规则的分栏布局，尽可能显性的定宽和定高。
3）合理化表单结构
A）使用fieldset元素包裹相同类别的字段。
B）使用legen元素表示 字段类别名称。
C）使用label表示字段文本，添加必要的for属性，以在点击字段文本时，文本框能获得焦点。
D）文本框不使用size属性定义宽度，而使用css的width属性。
E）添加maxlength属性限制输入字符的长度。
4）严禁使用已在xhtml1.0中已移除的标签
s 、i 、b 、font
1.5控制页面默认显示状态
使用js来控制和切换现实的区块、导航、tab，必须先用css处理DOM默认显示状态。
SEE MORE →
2
2.CSS部分
2.1Css命名规则
1）样式类名全部用小写，首字符必须是字母，禁止数字或其他特殊字符。由以字母开头的小写字母（a--z）、数字（0--9）、下划线（_）组成。
2）可以是单个单词，也可以是组合单词，要求能够描述清楚模块和元素的含义，使其具有语义化。避免使用123456...red，blue，left，right之类的（如颜色、字号大小等）矢量命名。
3）尽量用单个单词简单描述class名称。
4）双单词或多单词组合方式：形容词_名词、命名空间_名次、命名空间_形容词_名词。
2.2Class和ID的使用方法
把id留给后台开发和JS使用，除此之外页面的page id（如首页的外层需要一个ID id=“page_index”），页面结构（header main footer）允许用id命名。其他禁止id使用在样式表CSS命名中，一律使用class命名。
2.3命名空间
在编码思想上，我们可以将页面拆分成不同的层级（布局、模块、元件）。
2.4添加文档样式
1）引用外部文件方式添加样式
2）严禁编写标记内代码，比如<div style=”display:none;”>就应该写成<div class=”hide”>,然后在样式表中去完成样式代码编写。
3）严禁在文档中使用<style type=”text/css”></style>代码块
4）分割样式表，降低代码复杂性，方便管理和维护。但不分割的太细碎，应考虑以后的维护和管理。
2.5属性简写
为了节省字节数及文件大小，以下属性请使用简写方式：
padding ：top right bottom left； margin ： top right bottom right；
border ： style width color； border-top ：style width color；
Border-bottom ：style width color； Border-left ：style width color；
Border-color ：top right bottom left； Border-style ：top right bottom left；
Border-width ：top right bottom left； Background ：color url（image）repeat posotion；
List-style ：type position url（image）； Font-weight：400/700；
2.6缩写16进制色值
Color和background-color的属性值如果使用的是16进制色值，当6个数字两两相等时，使用缩写方式编写。如：#996600缩写成#960
2.7字体
1）全局定义字体：body{font：12px arial，helvetica，sans-serif；line-height：1.5；}
2）font-family：
A）等宽字体组合：Arial，Helvetica，sans-serif；
B）不等宽（宽扁）字体组合：Verdana，Trebuchet MS，sans-serif；
C）中文字体：除非内容文本需要，不推荐强制定义
2.8页面采用固定流式布局，使用像素（px）固定元素尺寸。
2.9添加必须的注释
可根据全局、布局、区块、功能等进行分类和添加注释，方便维护和代码搜索。
2.10CSS通用命名
（1）页面框架命名，一般具有唯一性，推荐用ID命名
（2）模块结构命名
（3）导航结构命名
（4）一般元素命名
SEE MORE →
3
3.图片命名
1）背景图片：bg001，bg002，bg003......
2）一般图片：img001，img002，img003......
3）特定图片：如banner，logo按照具体情况命名
4）按钮图片：btn_submit，btn_cancel.....
SEE MORE →
4
4.javascript部分
4.1在文档中引用js
1）使用外部文件方式引用js；
2）将引用js的代码集中放置在一起，可放置在</head>之前或</body>之前，严禁在body间分散放置；
3）使DOM结构和js代码分离，禁止写在标记内部；
4）如果是发布版本，请将多个稳定版本的js文件压缩、归类放置到单个文件内，压缩和最小化js文件。
4.2不直接操作DOM样式，使用已在样式表中定义的class来操作DOM样式
4.3DOM加载
把需要再DOM加载后立即执行的代码封装在同一个函数执行，不要编写多个window.onload事件或jQuery的ready（）事件。
4.4严禁使用多个library库
4.5优化iQuery代码，提高性能：
1）选择器从最近的ID开始继承或直接使用ID选择器：$（“#id tag”）；
2）选择器在使用class前加上标签名：$（“span.span1”）；
3）尽量使用ID选择器代替class；
4）要获取子元素请使用子选择器，而不要使用后代选择器：$（“#id>span”）；
5）缓冲jQuery对象，不要在代码中重复出现相同的选择器：var btn=$（“#id”）；
6）使用data（）存储临时变量；
7）限制直接操作DOM，在更新DOM前应该准备好需要的东西；
8）避免使用live（）方法绑定事件；
9）在父级元素监听事件，对目标元素进行操作；
$（“#id”）.click（function（e）{var input=$(e.target);}）；
10）推迟加载拖放、动画、视觉特效等代码，把可能会影响页面加载速度的代码绑定到$（window）.load（）事件中