Zving前端开发规范(CSS部分)

  为了保持页面开发规范、避免错误,加快学习和开发效率,下面列出泽元软件前端开发中CSS的一些规范及注意事项,此规范适用于项目的前端页面制作。

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

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

  下划线命名法: 是指函数名中的每一个单词都用一个下划线来隔开。例如: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
主导航:mainNav
子导航:subNav
友情链接:friendLink
版  权:copyright
页 眉:header
页 脚:footer
标 题:title
主导航:mainNav
子菜单:subMenu
注  释:note
面包屑:breadcrumb
容  器:container
内  容:content
搜  索:search
登  陆:Login
当前状态:current
页头:header
标志:logo
侧栏:sidebar
广告:banner
导航:nav
子导航:subnav
菜单:menu
子菜单:submenu
搜索: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:高

 

5.网站布局和样式文件命名

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

  1)  全局布局共用CSS文件:common (包括cssreset(用来清除默认值)、全局性的一些属性值的定义,还有网站布局容器的共用的CSS部分:页眉、页脚、搜索共用CSS);

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

 

5.2 网站布局

  网站采用目前最流行的960宽度布局;布局类型分为3栏和2栏两种方式。分栏宽度参考设计稿,如果没有设计稿就按下面的规则。

  两栏布局:主容器宽度为700px 副容器宽度为240px。

  三栏布局:依次为190px、510px、240px。

 

5.3 网站栏目

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

  1)  全局框架通用样式;

  2)  页眉;

  3)  导航;

  4)  搜索;

  5)  页脚;

  6)  内容列表通用样式;

  7)  图片通用样式;

  8)  表单通用样式。

 

5.4 频道私有CSS文件

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

 

6.XHTML文档结构

6.1 html基本框架结构

 

6.2.HTML5标准的Doctype声明

  第一行必须加文档声明:

  <!doctype html>,

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

 

6.3.编码声明(默认使用UTF-8编码)

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

 

6.4 meta、title等处填写相应的关键词和描述

  <meta http-equiv="X-UA-Compatible" content="IE=8, IE=9, IE=10, chrome=1" />

<meta name="renderer" content="webkit" />即使系统里安装有IE8或更高版本,一些以IE为内核的浏览器(如360浏览器早期版本),仍然采用IE7的内核渲染,使用上面这第一句设置,让IE以最高等级内核渲染页面,减少针对IE7作兼容处理的工作量。第二句使360极速浏览器使用webkit内核。

  <meta name="keywords" content="关键词" />

  <meta name="description" content="页面描述" />

<title>标题</title>

 

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

 

7.Web页面切图和CSS注意事项

7.1Web页面切图

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

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

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

 

7.2 CSS相关事项

  1)  所有的xhtml代码小写;

  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)  文字过长要出现省略号样式如下:

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

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

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

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

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

  显示属性:

 

  自身属性:

 

  文本属性:

 

8.CSS及HTML编写问题

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

  2)  基本的css设定(global.css)可以如下,(仅示例,请视情况修改或扩展)。

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

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

  5)  页使用Dreamweaver CS 以上版本:在页面制作时注意清除浮动、及定义浮动元素宽度,可以让页面在Dreamweaver里的“设计视图”下接近最终浏览效果。

hackIE