总体原则
符合w3c通用网页标准。
结构清晰，嵌套正确，嵌套深度适当。
代码精炼。
注释清晰，代码可读性高。
风格统一。
1.1 基本命名风格
本文档的命名规范会仅使用以下命名风格。
Camel风格这种风格除了第一个单词的首字母,其他单词都应大写首字母。Ex: backColor
1.2 大小写敏感
不要出现两个只用大小写区分的Class。不要出现两个只用大小写区分的ID。Naming Conventions and Style（命名规范和代码风格）
1.3 所有的Class及ID均采用 Pascal 风格
<!-- Good Example -->
<p class=”sidebar”></p>
<div id=”container”></div>
<!--Not Good Example -->
<p class=”boxA”></p>
<div id=”boxB”></p>
1.5 所有的样式控制尽量使用Class，ID用于Javascript对DOM结构的控制
可以防止因优先级的问题导致CSS代码量加大同一个Class可应用于多个标签，但同一个ID只能用于一个标签1.6 所有CSS代码尽量单独封装在独立的CSS文件中，文件命名应用有意义的名字，例如layout.css编写页面布局方面的CSS代码。
尽量不要出现直接在HTML标签中书写CSS代码的情况。在<head>标签中可使用<style></style>针对本页面中特定元素的样式控制代码1.7 CSS代码每行一个属性
每行一个属性的代码风格更利于维护，注释更方便在使用Hack进行浏览器兼容性处理时更清晰/* Example */
.mainNav {
width: 200px;
height: 200px;
background: #f00 url(bg.jpg) no-repeat left top; /* 背景颜色及背景图片 */
}
1.8 CSS代码中应遵循从外到内，从上到下，从左到右的原则
先写外围框架的，再写内部元素的。先写网页中视觉上出现在页面上面的元素CSS代码，再写下面的。先写网页中视觉上出现在页面左边的元素CSS代码，再写右边的。<!-- Example -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<style>
.header {
}
.container {
}
.container .sidebar {
}
.container .main {
}
.footer {
}
</style>
</head>
<body>
<div class=”header”>头部</header>
<div class=”container”>
<div class=”sidebar”>侧边栏</div>
<div class=”main”>主体区域</div>
</div>
<div class=”footer”>底部</div>
</body>
</html>
1.9 代码缩写
对于padding，margin，border等属性应采用缩写方式
1.10 所有CSS代码尽量单独封装在独立的CSS文件中，文件命名应用有意义的名字，例如layout.css编写页面布局方面的CSS代码。
在文件开始处给出适当的注释/* -------
文件名：layout.css
作用：页面主体布局
创建者：
创建日期：
最后更新：
最后更新时间：
------- */
/* Good Example */
/* Header */
.header {
width: 200px;
min-height: 100px; /* 针对IE7中设置最小高度 */
}
1.13 选择器与开始大括号({)之间应保持而且仅有一个空格
1.14 结束大括号(｝)应该放在单独的一行。
1.15 用一到两个空行来分割不同的页面模块CSS代码段
/* Good Example */
.header {
width: 200px;
height: 100px;
}
.header .mainNav {
margin: 5px 2px;
}
.container {
}
.container .sidebar {
}
.container .main{
}
.footer {
}
/* Not Good Example */
.header {
width: 200px;
height: 100px;
}
.header .mainNav {
margin: 5px 2px;
}
.container {
}
.container .sidebar {
}
.container .main{
}
.footer {
}
/* Good Example */
/* 主导航条 */
.mainNav {
}
/* 侧边栏菜单 */
.sideMenu {
}
/* Not Good Example */
.Menu1 {
}
.Menu2 {
}
1.18 选择正确的标签
不要一味的追求和使用DIV标签不要完全抛弃Table标签，在需要对数据进行排列显示时，Table是首选要在恰当的地方正确使用<dl>标签，而不要用冗繁的div、p等代替合理安排<h1>到<h6>标签，有利于SEO，一个网页中不要出现超过2个<h1>尽量不再使用<font>标签1.19 同一标签嵌套深度尽量不要超过三层
比较常见的错误时使用嵌套超过三层的DIV标签，应用其他可代替的标签进行编写1.20 不要使用多余的代码
在保证达到效果的同时，代码应越少越好。/* Good Example */
span {
float: left;
}
/* Not Good Example */
span {
float: left;
display: block;
}
/* 虽然span本身为inline元素，但经过float:left后已经自动转为了block元素，所以无需添加display:block */
1.21 及时清除浮动并注意方法
在对元素进行浮动后，应及时清除浮动。如果采用空标签清除浮动法，空标签应紧跟浮动元素之后，而不是浮动元素的父元素之后。1.22 将常用的class放在一个单独的文件中
将常用的浮动、清除浮动、字体颜色等class单独写在一个公用文件中，可取名common.cssOthers（其它）
1.23 关于CSS排错
当出现CSS错误时，建议给出错的标签设置背景颜色或边框，以便更快的找出错误并更正。CSS排错方法应首先检查HTML代码中的class属性与CSS代码中的选择器是否一致，避免因漏写字母或错写字母而出错。出现错位时应首先考虑是否掉入了IE6的各种“CSS陷阱”中，例如Double Margin。新闻热点
疑难解答
