HTML&CSS编码规范
General Summary（总体概述）
总体原则
符合w3c通用网页标准。
结构清晰，嵌套正确，嵌套深度适当。
代码精炼。
注释清晰，代码可读性高。
风格统一。
1.1 基本命名风格
本文档的命名规范会仅使用以下命名风格。
- Camel风格
这种风格除了第一个单词的首字母,其他单词都应大写首字母。Ex: backColor
1.2 大小写敏感
- 不要出现两个只用大小写区分的Class。
- 不要出现两个只用大小写区分的ID。
Naming Conventions and Style（命名规范和代码风格）
1.3 所有的Class及ID均采用 Pascal 风格
|
<ul class=”mainNav”></ul> <div id=”footerLink”></div> |
1.4 使用有意义的Class及ID
|
<!-- 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; /* 背景颜色及背景图片 */ } |
|
|
- 不建议采用下面的代码形式，哪怕是只有一条属性
|
/* 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等属性应采用缩写方式
|
/* Good Example */ margin: 10px 5px 15px; padding: 1px 2px; border-width: 1px;
/* Not Good Example */ margin: 10px 5px 15px 5px; padding: 1px 2px 1px 2px; border-width: 1px 1px 1px 1px; |
|
|
1.10 所有CSS代码尽量单独封装在独立的CSS文件中，文件命名应用有意义的名字，例如layout.css编写页面布局方面的CSS代码。
- 在文件开始处给出适当的注释
|
/* ------- 文件名：layout.css 作用：页面主体布局 创建日期： 最后更新： 最后更新时间： ------- */ |
|
|
Indentation and Spacing(缩进和空格)
1.11 使用TAB缩进，不要使用Spaces. 定义TAB值为4
1.12 注释和代码要在同一列，使用同样的缩进格式
- 对于某一属性的单独注释，直接写在同一行内。
|
/* 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 Programming practices（编码最佳实践）
1.16 CSS书写顺序应大体遵循以下原则（从上到下依次编写）
- 布局类clear、float、position、display
- 容器控制 width、height、padding、margin、border
- 背景 background
- 文字控制 font、color、text-align、vertical-align
- 其他属性
1.17 选择器名称应该可以直接体现元素意义。不要使用无意义的名字。
|
/* 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.css
Others（其它）
1.23 关于CSS排错
- 当出现CSS错误时，建议给出错的标签设置背景颜色或边框，以便更快的找出错误并更正。
- CSS排错方法应首先检查HTML代码中的class属性与CSS代码中的选择器是否一致，避免因漏写字母或错写字母而出错。
- 出现错位时应首先考虑是否掉入了IE6的各种“CSS陷阱”中，例如Double Margin。
Resource 资源
1.24 http://www.w3.org/
- W3C官方网站
