规范目的：
- 使开发流程规范化，代码简洁、美观。
文件规范：
- 文件名用英文单词，多个单词用驼峰命名法。
- 一些浏览器会将含有这些词的作为广告拦截，文件命名、ID、CLASS等所有命名避免以上词汇。
ad、ads、adv、banner、sponsor、gg、guangg、guanggao等
HTML书写规范：
- 为每个HTML页面的第一行添加标准模式（standard
mode）的声明，确保在每个浏览器中拥有一致的展现。
<!DOCTYPE html>
文档类型声明统一为HTML5声明类型，编码统一为UTF-8。
<meta charset="UTF-8">
HTML属性应当按照以下给出的顺序依次排列，来确保代码的易读性。
class
id 、 name
data-*
src、for、 type、 href
title、alt
aria-*、 role
- 编码均遵循XHTML标准,
标签、属性、属性命名由小写英文、数字和_组成，且所有标签必须闭合，属性值必须用双引号"",
避免使用中文拼音尽量简易并要求语义化。
CLASS --> nHeadTitle --> CLASS遵循小驼峰命名法（little camel-case）
ID --> n_head_title --> ID遵循名称+_
NAME --> N_Head_Title --> NAME属性命名遵循首个字母大写+_
<div class="nHeadTitle" id="n_head_title" name="N_Head_Title"></div>
- 语义化
HTML。- 尽可能减少
<DIV>嵌套。
-HTML中对于属性的定义，确保全部使用双引号，绝不要使用单引号
CSS书写规范：
- 导入css样式
<!-- 放置所有浏览器样式-->
<link rel="stylesheet" type="text/css" href="">
<!-- 只放置IE必须，而不能通过w3c的-->
<!--[if IE]
<link rel="stylesheet" href="">
<![endif]-->
- CSS样式新建或修改尽量遵循以下原则。
根据新建样式的适用范围分为三级：全站级、产品级、页面级。
尽量通过继承和层叠重用已有样式。
不要轻易改动全站级CSS。改动后，要经过全面测试。
- CSS书写顺序。
.header {
/* 显示属性 */
display || visibility
list-style
position top || right || bottom || left
z-index
clear
float
/* 自身属性 */
width max-width || min-width
height max-height || min-height
overflow || clip
margin
padding
outline
border
background
/* 文本属性 */
color
font
text-overflow
text-align
text-indent
line-height
white-space
vertical-align
cursor
content
};
- 兼容多个浏览器时，将标准属性写在底部。
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari和Chrome */
border-radius: 15px; /* Opera 10.5+, 及使用了IE-CSS3的IE浏览器 *//标准属性
- 使用选择器时，命名比较短的词汇或者缩写的不允许直接定义样式。
.hd,.bd,.td{};//如这些命名
- 多选择器规则之间换行，即当样式针对多个选择器时每个选择器占一行。
button.btn,
input.btn,
input[type="button"] {…};
- 优化CSS选择器。
#header a { color: #444; };/*CSS选择器是从右边到左边进行匹配*/
- 避免使用低效的选择器。
body > * {…};
ul > li > a {…};
#footer > h3 {…};
ul#top_blue_nav {…};
#searbar span.submit a { … }; /* 反面示例 */
- 六个不要三个避免一个使用。
不要在标签上直接写样式
不要在CSS中使用expression
不要在CSS中使用@import
不要在CSS中使用!important
不要在CSS中使用“*”选择符
不要将CSS样式写为单行
避免使用filter
避免使用行内（inline）样式
避免使用“*”设置{margin: 0; padding: 0;}
使用after或overflow的方式清浮动
- 减少使用影响性能的属性。
position:absolute;
float:left;//如这些定位或浮动属性
网友评论