Web前端开发设计规范

Web前端开发设计规范

Web前端开发设计规范

1.0

编写：邬畏畏

时间：201*-12

博客：

目录

一．结构设计...........................................................................................3二．CSS命名设计...................................................................................3三．CSS用的图片信息...........................................................................4四．暂无...................................................................................................4

一．结构设计

使用符合W3C标准的结构标签元素，使得结构和表现能够很好的分离。尽可能采用DIV和语义化的标签结构，使用CSS去表现HTML结构中的样式。

二．CSS命名设计

如果一个web系统比较复杂，我们会写一些比较多的样式而每个样式的命名就显得特别重要，本人（邬畏畏）总结了一下命名特点，希望能给大家有所帮助。

（一）页面的整体框架结构的CSS样式命名使用ID选择器，

命名符合结构布局的含义。

（二）通用功能的页面元素部分，CSS样式要使用类选择器，

方便多次使用。

（三）如果要区分不同的页面CSS样式，可以采用前缀命名法

并使用“_”下划线来链接，如首页的样式可以是#Index_Main，子页面的样式可以是#Sub_Main。如果是本页面的结构是嵌套的可以使用“-”减号来命名样式名如.Index_Main-User，这样就是到这个样式是干什么的了也不容易发生冲突。

（四）除了上面第三条，我们还可以使用后代选择器，如

“#Index_Main.Login”表达了#Index_Main选择器元素内的.Login的选择器样式。

（五）如果CSS样式文件里的样式过多，我们在一个页面中可

能只用一部分样式，那么我们可以按功能把样式写到不能功能的CSS文件中，某个页面需要就可以按照功能引入不同的样式文件。

三．CSS用的图片信息

对于一个大型的web项目我们可能用到很多图片，所以在开发中不同功能的图片要分开存储或按照网站的页面级别或类别，如首页放到一个文件夹里，子页面放到一个文件夹里，通用的图片放到一个文件夹里；这样既保证了图片重名问题，在更换样式也方便。

四．暂无

扩展阅读：WEB前端开发规范

WEB前端开发规范

目录

1、规范目的2、基本准则3、文件规范4、文件规范

5、html书写规范6、css书写规范

7、JavaScript书写规范8、图片规范9、注释规范

10、开发及测试工具约定11、其他规范12、CSSHack1

规范目的

为提高团队协作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,同是为网站有一个更好的前端架构，网站的发展及未来打好一个基础。本文档如有不对或者不合适的地方请提出来,

基本准则

符合web标准,语义化html,结构表现行为分离,兼容性优良.页面性能方面,代码要求简洁明了有序,尽可能的减小服务器负载,保证最快的解析速度.文件规范

3.1、html,css,js,images文件均归档至约定的目录中;

23

3.2、html文件命名:命名以中文命名，依实际模块命名，如果同一模块以_&title&_来组合命名,以方便添加功能时查找对应页面，团结里的相互理解。

例如：我的好股网里的TAB命名

大模块名称_小模块的titile.html我的好股网_关注的微博.html

3.3、css文件命名:英文命名,后缀.css.初始化样式reset.css，其他样式依实际模块页面需求命名，共用样式一般以模块考虑来划分命名,如有改版修改的css文件可以采用&_时间日期

例如：微博改版

版块名称_时间日期.cssnew_blog_1212.css

4.4、Js文件命名:英文命名,后缀.js.共用common.js,其他依实际模块需求命名.5.5、图片命名:4

html书写规范

4.1、文档类型声明及编码:统一用;编码统一为。目的:统一性和网站提高开发合作效率。

4.2、非特殊情况下样式文件必须外链至之间;非特殊情况下JavaScript文件必须外链至页面底部之前;目的:网站的优化。

4.3、所有编码均遵循xhtml标准,标签&属性&属性命名必须由小写字母及下划线数字组成,且所有标签必须闭合,包括br(),hr()等;属性值必须用双引号包括;目的:更加符合web标准(w3c),也有利于seo。4.4、充分利用无兼容性问题的html自身标签,比如span,em,strong,optgroup,label,等等目的：减少代码量

4.5、语义化html,如标题根据重要性用h*(同一页面只能有一个h1),段落标记用p,列表用ul,内联元素中不可嵌套块级元素;目的：减少代码量，也有利于seo

4.5、尽可能减少div嵌套,如4.11、给区块代码及重要功能(比如循环)加上注释,方便后台程序员嵌套模版;

4.12、特殊符号使用:尽可能使用代码替代:比如)&空格()&()等等;4.13、书写页面过程中,请考虑向后扩展性;5

css书写规范

5.1编码统一为utf-8;都用小写

5.2class与id的使用:一般都使用class，特殊除外，因id的优先级比class的高5.3样式命名推荐使用英文避免使用汉语拼音,尽量使用简易的单词组合;命名方式参照《WEB前端开

发CSS命名参考》。命名方式采用驼峰命名法和划线命名法两种，提高可读性。例如：dropMenu、subNavMenu、drop-menu、sub_nav_menu。驼峰命名法用来区别不同的单词。划线命名法表明从属关系。如：“.timeList”和“.time_list”分别表示时间列表和时间部分下的列表。5.4css属性书写顺序,建议遵循布局定位属性>自身属性>文本属性>其他属性.此条可根据

自身习惯书写,但尽量保证同类属性写在一起.1.定位属性（比如：display,position,float,clear,visibility,table-layout等）2.自身属性（比如：width,height,margin,padding,border等）3.文本属性（比如：font,line-height,text-align,text-indent,vertical-align等）4.其他属性（比如：color,background,opacity,cursor,content,list-style,quotes等）

5.5避免滥用自选择器。#testspan｛｝和#test.span｛｝尽量选择后者。采用继承属性还是新加

class根据不同情况灵活运用。新加class便于扩展维护。继承属性示例：这儿是标题列表201*-09-15样式表：ul.listli{position:relative}ul.listlispan{position:absolute;right:0}即可实现日期居右显示5.6样式表中中文字体名,请务必转码成unicode码,以避免编码错误时乱码;

5.7使用table标签时,请不要用width/height/cellspacing/cellpadding等table属性直接定义

表现,应尽可能的利用table自身私有属性分离结构与表现,如

thead,tr,th,td,tbody,tfoot,colgroup,scope;(cellspaing及cellpadding的css控制方法:table{border:0;margin:0;border-collapse:collapse;}tableth,tabletd{padding:0;},base.css文件中我会初始化表格样式)5.8尽量不使用兼容ie8,和代码*html

写法。

5.9用png图片做图片时,要求图片格式为png-8格式,若png-8实在影响图片质量或其中有半透明效

果,请参考文档《IE6下png透明问题解决的最佳方案》

5.10兼容性属性的使用,比如text-shadow（文字阴影）、css3的相关属性在保证目前主流浏览器使

用正常的情况下可以使用来对页面进行锦上添花式的设计。

5.11减少使用影响性能的属性,比如position:absolute||float;5.12必须为大区块样式添加注释,小区块适量注释;5.13代码缩进与格式:单行书写,统一使用tab进行缩进。;

目的：css书写规范主要提高效率方便面想关人员的修改，提高网站的扩展性(根据网站情况不一样，要灵活应用)6

JavaScript书写规范

6.1文件编码统一为utf-8,书写过程过,每行代码结束必须有分号;要检查网上down下来的代码造

成的代码污染(沉冗冲突，代码注入)等，有的可以firefox的一些扩展插件分析;6.2库引入:原则上仅引入jQuery库,若需引入第三方库,须与团队其他人员讨论决定;6.3命名语义化,尽可能利用英文单词或其缩写;6.4代码结构明了,加适量注释.提高函数重用率;6.5注重与html分离,减小reflow,注重性能.目的：避免带来的问题及冲突，网站的优化。7

图片规范

7.1所有页面元素类图片均放入img文件夹,7.2图片格式仅限于gif||png||jpg;

7.3命名全部用小写英文字母||数字||_的组合，其中不得包含汉字||空格||特殊字符；尽

量用易懂的词汇,便于团队其他成员理解;另,命名分头尾两部分,用下划线隔开,比如ad_left01.gif||btn_submit.gif;

7.4在保证视觉效果的情况下选择最小的图片格式与图片质量,以减少加载时间;7.5尽量避免使用半透明的png图片(若使用,请参考css规范相关说明);

7.6运用csssprite技术集中小的背景图或图标,减小页面http请求,但注意,请务必在对应的

spritepsd源图中划参考线,并保存至img目录下.

8注释规范

8.1html注释:注释格式,“-”只能在注释的始末位置,不可置入注释文字区域;8.2css注释:注释格式/*这儿是注释*/;

8.3JavaScript注释,单行注释使用“//这儿是单行注释”,多行注释使用/*这儿有多行注释*/;

9开发及测试工具约定

9.1编码必须格式化,比如缩进;

9.2测试工具:前期开发仅测试FireFox&IE6&IE7&IE8,后期优化时加入Opera&Chrome;9.3建议测试顺序:FireFox>IE7>IE8>IE6>Opera>Chrome,建议安装firebug及IETab

Plus插件.安装调试利器IETester

10其他规范

10.1开发过程中严格按分工完成页面,以提高css复用率,避免重复开发;10.2减小沉冗代码,书写所有人都可以看的懂的代码.简洁易懂是一种美德.为用户着想,为服务

器着想.11CSSHack

即便是完美的CSS也未必能在目前众多的终端浏览器中呈现一致的效果，所以，CSSHack在很多情况下都是必要的，建议先以对CSS标准支持得比较好的浏览器（比如“Firefox”或者“Chrome”）为主编辑CSS，最后再处理IE的兼容性单独为IE建立一个CSS文件（比如for-ie.css,fuck-ie.css,ie-hack.css等），最后在HTML文件中，通过IE的条件注释按需引用。

友情提示：本文中关于《Web前端开发设计规范》给出的范例仅供您参考拓展思维使用，Web前端开发设计规范：该篇文章建议您自主创作。

来源：网络整理 免责声明：本文仅限学习分享，如产生版权问题，请联系我们及时删除。

《Web前端开发设计规范》由互联网用户整理提供,转载分享请保留原作者信息,谢谢!
链接地址：http://www.bsmz.net/gongwen/585493.html

• 上一篇：WEB前端开发规范
• 下一篇：Java Web开发课程设计