网页标准:HTML&CSS编码规范

作者: 来源: 更新时间:2013-02-01 16:30:42 点击:

总体原则

      符合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.css

Others(其它)

1.23        关于CSS排错

当出现CSS错误时,建议给出错的标签设置背景颜色或边框,以便更快的找出错误并更正。CSS排错方法应首先检查HTML代码中的class属性与CSS代码中的选择器是否一致,避免因漏写字母或错写字母而出错。出现错位时应首先考虑是否掉入了IE6的各种“CSS陷阱”中,例如Double Margin。