UITeam前端规范.pptx

新蛋UI Team 前端规范 版本号 V1.0 执行日期：2011-07-02 一、文件组织 |--themes |--default |--css |--ele_css |--js |--Nest |--img |--temp 文件夹结构 二、文件夹管理规范 文件夹结构 1、CSS文件夹下放的是全局global.css和各个页面的CSS文件，注意相同类型的页面使用同一个CSS文件。 比如一二三级类页面，都使用category.css，账户中心的所有页面都引用account.css等； 2、ele_css是公用模块的CSS，需要用到哪个模块则在相应页面的CSS文件中通过@import引入（打包发布时再移除import） 3、具体页面调用的JS文件，文件名以“pg_”开头，前端具体功能性组件以“ui.”开头，前端通用的方法定义在UI命名空间下； 4、图片文件，每类页面用到的图标都整合在该系列页面的sprite上，sprite图片以“***_sprite.png”形式命名，整站通用的 icon命名为“icon_sprite.png”,整站通用的非图标类图片命名为“global_sprite.png”,temp文件夹里存放的是一些上线 后需要删除的图片。 三、页面结构 页面主体结构用id命名，其他元素用class命名： div id=topbar div class=”topbar wraper”/div /div div id=header div class=”menu wraper”/div /div div id=main /div div id=footer/div 四、代码的书写 注意编写html时，思想里需要有一个分块的概念，在写之前要已经把内容分成了一个个单独的小块，html代码编写要考虑 标签的语义化，seo以及页面的性能，要有模块化的概念，要考虑通用性，要注意给程序嵌套页面提供方便，能尽量少用层级 结构时不要增加不必要的标签（但对于区分模块而使用的外层标签不能省），要注意代码的排版，js文件注意放在页面的底部。 分块的概念： 在写html之前，自己头脑里就应该把它划分成了两个区块：标题块跟列表块 （图一） 四、代码的书写 标签的语义化： 语义化，就是让写出来的标签要符合他本身的语义，如H系列标签表示标题，P标签表示段落，OL标签表示有序列表等等。 标签的语义化让html有了感情色彩，有了生命力，也给后续的开发和维护带来方便。 上面的设计稿中，标题块可以用H标签去写，列表块可以用OL列表去写。 模块的通用性： 考虑到模块的通用性，应该从两方面去注意问题：HTML代码的书写 和 CSS的组织。 Html代码的书写 四、代码的书写 Html代码的书写 h3用户体验最好的电子商务网站？/h3 ol li a href=””新蛋网 span class=”votes”239票/span s1/s/a /li li…/li li…/li … /ol 就例如上面的设计图，这种模块通用性很强，可能会在很多页面上都需要显示他。拿通用性模块使用要有“拎”的感觉， 就是抓住一个点就能把整块提起，模块的代码不能太松散。例如上面的设计图不能只写成： 四、代码的书写 Html代码的书写 div class=”questionnaire” h3用户体验最好的电子商务网站？/h3 ol li a href=””新蛋网 span class=”votes”239票/span s1/s/a /li li…/li li…/li … /ol /div 而应在外面嵌套一个标识层： 这样人家一看到quitionnaire这个层就知道这里开始是问卷调查 模块，要copy到其他页面使用的话直接copy这个层的内容就行 了，而不需要人家去查找从哪到哪是这个模块的代码。 四、代码的书写 CSS的组织 .questionnaire{…} .questionnaire h3{…} .questionnaire li{…} .questionnaire a{…} .questionnaire .votes{…} .questionnaire s{…} 一个模块的样式应该以这个模块名开头去定义。 例