为了保持页面规范，避免错误，加快学习和开发效率，以下列出Zving前端开发中CSS的一些规范及注意事项，此规范适用于项目前端页面。（2009年7月31日初稿 2017年03月20日修正）

CSS命名规则

页面制作最重要的就是CSS，定义合理的CSS命名规范，可以大幅提高页面制作的效率和方便开发及相关人员修改编写。关于CSS的命名我们采用中划线命名法或骆驼式命名法，不要使用下划线命名法。

骆驼式命名法： 是指混合使用大小写字母来构成变量和函数的名字,即函数名中的每一个逻辑断点都有一个大写字母来标记。例如：mianNav footNav

下划线命名法： 是指函数名中的每一个单词都用一个下划线来隔开。例如：mian_nav foot_nav

中划线命名法： 是指函数名中的每一个单词都用一个中划线来隔开。例如：mian-nav foot-nav

1.通用命名规则：

1)  所有ID或者class字母和数字之间用“-”连接，如:  #col-left、#col-right

2)  或所有ID或者class两个单词之间的链接采用骆驼式命名法，如:  mianNav、footNav

3)  页面主体框架布局命名：lay-left、lay-center 、lay-right

4)  栏目布局容器命名一律采用: col-left、col-right

5)  栏目标题块命名一律采用title。元素标签采用:<h4> 如：

<div class="title"><h4>标题</h4></div>

6)  页面所有图片区域全部采用：pic-banner、pic-logo

7)  页面文本列表区域全部采用： list-pic、list-item

8)  页面上按钮采用：btn-submit、btn-search

9)  广告区域：ad-left,ad-right,ad-top,ad-bottom

2.主框架命名规则：

1)  #header (页面头部)

2)  #main (页面主体)

3)  #footer (页面尾部)

3.通用命名规则：

主 体：main
外层：wrap
功能条：funcbar
友情链接：friend-link
版 权：copyright
页眉：header
页脚：footer
标题：title
注 释：note
面包屑：breadcrumb
容 器：container
内 容：content
搜 索：search
登 陆：login
当前状态：current
页头：header
标志：logo
侧栏：sidebar
广告：banner
导航：nav
子导航：sub-nav
主导航：main-nav
菜单：menu
子菜单：sub-menu
搜索：search
滚动：scroll
页面主体：main
内容：content
标签页：tab
文章列表：list
信息：msg
提示技巧：tips
栏目标题：title
指南：guide
服务：service
热点：hot
新闻：news
下载：download
注册：reg（register）
状态：status
按钮：btn
投票：vote

4.常用简写命名规则：

bd：body
hd：header
fnt：字体
nav：导航
tb：表格
lnk：链接
ml/mr：margin-left/margin-right
lst：列表
pl / pr / pd：padding-left/-right/padding
col：栏目
frm：表单
con：内容
inf：信息
lg：Logo
inp：Input
ft：footer
btn：button
more：更多
fl /fr float:left/float:right
tit 标题栏
spr 空行
t / d / mid / l / r：上 / 下 / 中 / 左 / 右
bdr：边
w：宽
h：高

网站布局和样式文件命名

1.  网站样式文件命名和样式从属关系

1)  全局布局共用CSS文件：common.css （包括css reset（用来清除默认值）、全局性的一些属性值的定义，还有网站布局容器的共用的CSS部分：页眉、页脚、搜索共用CSS）

2)  频道私有CSS文件：home.css （当前频道或者页面的CSS独有属性值以及为了兼容不同的浏览器的所采用的hack）

2.  网站布局：

设计稿中页面宽度建议为960宽度；网站采用目前最流行的bootstrap3作响应式布局。分栏宽度参考设计稿，如果没有设计稿就使用bootstrap的12列概念：

两栏布局：主容器宽度为9列 副容器宽度为3列。

三栏布局：3列、5列、4列。

3.  网站栏目：

web页面上不同内容的组合方式：图片展示、图文组合、文字列表、标题段落、按钮等几种。所以common样式文件中按照如下规则定义：

1)  全局框架通用样式

2)  页眉

3)  导航

4)  搜索

5)  页脚

6)  内容列表通用样式

7)  图片通用样式

8)  表单通用样式

4.   频道私有CSS文件：针对网站频道不同风格所以各部分需要独自私有定义，但是通用布局不需要再重新设置，只需要设置私有部分。 

HTML文档结构

1.html基本框架结构


<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9, IE=10, IE=11, chrome=1" />
<meta name="renderer" content="webkit" />
<title> 标题 </title>
<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="css/home.css" />
</head> 
<body>
<!—start 页头-->
<div id="header" class="page-width header"> …… </div>
<!—end页头-->

<!—start 主体-->
<div id="main" class="page-width main"> …… </div>
<!--end主体-->

<!—start 页脚-->
<div id="footer" class="page-width footer"> …… </div>
<!—end页脚-->
<script src="js/jquery.js" type="text/javascript"></script>
</body> 
</html>

2.HTML5标准的Doctype声明。

第一行必须加文档声明

<!doctype html>

不同的文档声明影响页面元素的渲染效果，上例中我们使用HTML 5。以保证在IE6.0以上及非IE的现代浏览器里采用一致的“盒模型”。

3.编码声明。默认使用UTF-8编码。

web文件的“换行符类型”为“windows换行符-CR/LF”；编码为“UTF-8”或“GBK”（在GBK版本里，或在需要与支持GBK的其他系统/控件交互的情况下，使用“GBK”编码）

4. meta，title等处填写相应的关键词和描述。

<meta http-equiv="X-UA-Compatible" content="IE=8, IE=9, IE=10, chrome=1" /> <meta name="renderer" content="webkit" />也是必须的，这第一句是让IE8及以上版本以最高级内核渲染页面，即使系统里安装有IE8或更高版本，一些以IE为内核的浏览器（如360浏览器早期版本），仍然采用IE7的内核渲染，使用上面这一句设置，让IE以最高等级内核渲染页面，减少针对IE7作兼容处理的工作量。


<meta name="keywords" content="关键词" />
<meta name="description" content="页面描述" />
<title>标题</title>

5.基本结构(考虑到页头页脚将会制作成包含文件，所以<body>区的内容至少要分散到三个独立div内。)

div#header

div.global-nav

a img.logo

div#login-bar

div#main-nav

div#search

div#main

div#lay-left: (布局容器1)

div.col (内容块1)

div.col (内容块2)

div#lay-right: (布局容器2)

div.col (内容块3)

div.col (内容块4)

div#footer:

div.link

div.copyright

Web页面切图和CSS注意事项

1.  Web页面切图

1)  Web页面的切图类型可以归纳为背景（bg）、列表项目的符号（li）、内容中插入的图片（pic）、按钮（btn）、图标等几种形式（ico）。

2)  建议把用CSS背景加载的图片拼合成一张图片。这样可减少对服务器的请求。从而提升页面加载速度。

3)  除页面头部大图保存格式为jpg外，其他图片一律采用gif格式

2.  CSS相关事项：

1)  所有的html代码小写

2)  每个标签都要有开始和结束，且要有正确的层次,没有结束标签的，标签后加上"/"。 如：<img />、<br />

3)  所有的属性必须用引号""括起来

4)  文档类型必须声明，禁止文档类型乱用

5)  所有<和&特殊符号用编码表示

6)  必须正确使用代码缩进，缩进时使用tab(键盘中的TAB键)，禁止无缩进、乱缩进，禁止使用空格缩进

7)  CSS加载的背景图片要预定义宽度和高度，路径采用绝对路径可以直接从访问者计算机缓存中加载，提高页面加载速度。

8)  要尽可能做到表现与结构完全分离，代码中不涉及到表现元素，如style、font、bgColor、border。

9)  <h1>到<h6>的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。采用继承方式，否则个性定义就会失效。

10)  Font的缩写为：样式粗细大小行高字体（font:italic bold 12px/30px “simsun”）

11)  class和id选择器，尽量使用class选择器，id只能在同一页面中不能重复适用

12)  给页面的布局和重要的区块加上注释,如：<!—header -->

13)  给图片加上alt标签，利于搜索引擎的查询。

14)  所有的标签必须进行合理的嵌套。

15)  页面的实现过程中出现的问题是有规律的几种：3个像素的bug、双倍浮动空白边距、文字溢出bug。尽可能采用合理布局可以避免不同浏览器下所产生的问题。css的hack应该尽量避免采用。

16)  尽可能的合理的去用继承，好处是代码结构清晰，方便其他修改人员辨认页面结构、减少css的代码的重复定义。

17)  网站上经常会出现用户输入一大段字符和字母以至于文字无法正常折行，把版式破坏，这样我们就要参考以下样式：word-wrap:break-word; overflow:hidden; 当然必须得有宽度属性值。

18)  文字过长要出现省略号样式如下：
white-space: nowrap; text-overflow:ellipsis; overflow:hidden;

19)  一个完整的表单应该包括：


<fieldset>
<legend></legend>
<label></label>
<input />
</fieldset>

20)  页面上的列表元素除了ul ol外，我们还可以采用dl dt dd组合。

21)  合理采用多重样式定义可以有效的增加样式的重用性。

22)  我们要清楚哪些标签是块状元素和内联元素。一般我们可以把css元素分为block（块状）和inline（内联）。熟悉这些元素属性有利于我们深入理解css。

23)  按照推荐css属性书写顺序：

显示属性：
display || visibility
list-style : list-style-type || list-style-position || list-style-image
position
top || right || bottom || left
z-index
clear
float

自身属性：
width
max-width || min-width
height
max-height || min-height
overflow || clip
margin : margin-top || margin-right || margin-bottom || margin-left
padding : padding-top || padding-right || padding-bottom || padding-left
outline : outline-color || outline-style || outline-width
border
background : background-color || background-image || background-repeat || background-attachment || background-position

文本属性：
color
font : font-style || font-variant || font-weight || font-size || line-height || font-family
font : caption | icon | menu | message-box | small-caption | status-bar
text-overflow
text-align
text-indent
line-height
white-space
vertical-align
cursor

3.  CSS及HTML编写问题：

1）  考虑到cms内的文章编辑器内编辑文章时会对正文字体进行大小设置，所以建议前端页面的样式定义里不要对 body,textarea,select,button,之外的标签重新设置字体大小；并且建议不要对body,textarea,td之外的标签重设行高。

2）  基本的css设定（global.css）可以如下，（仅示例，请视情况修改或扩展）


/* reset.css */
body {background-color:#fff;color: #222;}
a { color: #06a; text-decoration: none; }
a:hover { color: #f90; text-decoration: underline; }
body,q,iframe,form,
ul,li,dl,dt,dd{ margin: 0; padding: 0;}
img,fieldset{border: none 0;}
body,td,textarea{word-break: break-all; line-height:1.5;}
body,input,textarea,select,button{margin: 0; font-size: 12px;font-family: Tahoma, SimSun, sans-serif;}
div,p,table,th,td{ font-size:1em; font-family:inherit; line-height:inherit;}

/*--float txtAlign--*/
.tc { text-align:center; }
.tr { text-align:right; }
.tl { text-align:left; }
.fl{ float:left; }
.fr{ float:right; }

/*-- link --*/
a{text-decoration:none;}
a:hover{text-decoration:underline;}

3) 允许使用css hack，以提高制作效率，如 


.fl{ float:left; _display:inline;}
.fr{ float:right; _display:inline;}

4)  页面布局，编写html时尽量不要对元素进行ID命名，亦即尽量少使用css中的ID选择器，对元素ID命名可以在编写js交互脚本时进行

5)  建议使用VSCode或Atom为前端开发编辑器，如果使用Dreamweaver建议使用Dreamweaver CS 以上版本：在页面制作时注意清除浮动、及定义浮动元素宽度，可以让页面在Dreamweaver里的“设计视图”下接近最终浏览效果