设为首页收藏本站订阅更新

无忧脚本

 找回密码
 加入无忧

QQ登录

只需一步,快速开始

搜索
查看: 4388|回复: 3

[推荐] 网页标准:HTML&CSS编码规范

[复制链接]
发表于 2013-7-2 15:07:44 | 显示全部楼层 |阅读模式
总体原则
      符合w3c通用网页标准。
      结构清晰,嵌套正确,嵌套深度适当。
      代码精炼。
      注释清晰,代码可读性高。
      风格统一。
      (抄至 517网络)
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。
发表于 2013-7-2 16:20:12 | 显示全部楼层
良好的CSS代码习惯有助于后期维护时能快速分析样式表。
发表于 2015-11-18 13:24:50 | 显示全部楼层
属性应用一个TAB缩进
发表于 2016-5-31 15:27:36 | 显示全部楼层
这个应该有自己的习惯.后期维护起来方便.
您需要登录后才可以回帖 登录 | 加入无忧

本版积分规则

小黑屋|手机版|Archiver|无忧脚本 ( 苏ICP备05080427号 )|值班电话:027-62300445   鄂公网安备 42011102000433号

GMT+8, 2017-8-19 09:36 , Processed in 0.096265 second(s), 7 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表