HTML基本格式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
</body>
</html>
注释：/*header start*/
内容区域
/*header end*/
CSS 书写规范
1、用两个空格代替tab键。
2、不要在自闭合的元素尾部添加斜线。
不要省略可选的结束标签。
3、对于属性的定义，确保全部用双引号，不要用单引号。
4、指定HTML的根元素的lang属性。
5、IE通过<meta>指定edge mode。
通知IE采用其所支持的最新模式。
列：<meta http-eqauiv=”x-UA-Compatible”content=”IE=Edge,chrome=1”>
6、必须声明字符编码，一般采用UTF-8。
7、引入CSS与JS时不指定type属性，因为它们都有默认值。
8、属性顺序：
8.1 class
8.2 Id、name
8.3 data-*
8.4 src、for、type、href
8.5 title、alt
8.6 aria-*、role
9、书写顺序：
9.1 位置属性(position,top,right,z-index,display,float 等)
9.2 大小(width,height,padding,margin)
9.3 文字系列(font,line-height,letter-spacing,color-text-algin 等)
9.4 背景(background,border 等)
9.5 其他(animation,transition等)
10、尽量缩写属性。
11、去掉小数点前的“0”。
12、不建议使用下划线，为了和js区分，IE6中无效而且输入的时候少按shift键。
13、不要随意使用id(应按需要使用,而不能滥用)
14、减少标签数量。
15、尽量避免使用js生成标签。
通过js生成的标签让内容变得不易查找,编辑,并且降低性能.
16、对于从逗号分隔的属性值，每个逗号后面都应该插入一个空格（，box_shadow）。
17、不要在rgb( ),rgba( ),hsl( ),hsla( ) 或rect( )值的内容逗号后插入空名(只要逗号,不加空格)。
18、十六进制全部小写（#fff），尽量简写。
19、为选择器中的属性添加双引号（input[type=”text”]）。
20、避免为0值指定单位。
如margin:0;
21、不要用@import ，会增加额外的请求次数。
应用一下代替：
21.1 使用多个<link>
21.2 通过sass或less将多个css文件编译为一个文件.
21.3 通过Rails,Jekyll或其他系统提供过css文件合并功能.
22、媒体查询应放在尽可能相关规则的附近,不要将他们打包放在一个单一的样式文件中.
23、带前缀的属性,通过缩减方式,让每个属性的值在垂直方向对齐.
列: .div{
-webkit-box-shadow:10px 10px 5px #888;
box-shadow:10px 10px 5px #888;
}
24、对于只包含一条声明语句的样式,建议语句放在同一行.
25、将最近的父class或基本(base)class作为新class的前缀.
26、在文件的结尾添加一个空白行。
27、对为选择器分组时，将单独的选择器单独放在一行。
28、选择器的个数尽量不要超过3个。
29、每一条规则的大括号{前后加空格。
30、如果使用CSS3的属性，如果有必要加入浏览器前缀，则按照webkit- / -moz- / -ms- / -o- / std的顺序进行添加，标准属性写在最后，并且属性名称要对齐。
31、命名中尽量使用小写。
32、命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合。
33、避免class与id重名。
CSS 优先级
1、添加了!important 的属性。
2、Style 属性嵌入。
3、具有一个或多个id选择器。
4、具有一个或多个类，属性或伪类选择器。
5、具有一个或多个元素选择器。
6、通配选择器。
7、优先级由高到低排列的6个位置。
7.1 最高优先级的位置是HTML文档头部的<style>元素。
7.2 style元素中@import语句所导入的样式表。
7.3 <link>元素。
7.4 <link>样式表中的@import语句导入的。
7.5 第五优先级的位置是最终用户附加的样式表。
7.6 最低是浏览器默认样式表。
CSS 文件命名
最新文件仅供参考已改成word文本。
方便更改。