UI Team前端规范.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/divdiv id=header div class=”menu wraper”/div/divdiv id=main /divdiv id=footer/div三、页面结构注意编写html时，思想里需要有一个分块的概念，在写之前要已经把内容分成了一个个单独的小块，html代码编写要考虑标签的语义化，seo以及页面的性能，要有模块化的概念，要考虑通用性，要注意给程序嵌套页面提供方便，能尽量少用层级结构时不要增加不必要的标签（但对于区分模块而使用的外层标签不能省），要注意代码的排版，js文件注意放在页面的底部。 分块的概念：在写html之前，自己头脑里就应该把它划分成了两个区块：标题块跟列表块（图一）四、代码的书写 标签的语义化：语义化，就是让写出来的标签要符合他本身的语义，如H系列标签表示标题，P标签表示段落，OL标签表示有序列表等等。标签的语义化让html有了感情色彩，有了生命力，也给后续的开发和维护带来方便。上面的设计稿中，标题块可以用H标签去写，列表块可以用OL列表去写。 模块的通用性：考虑到模块的通用性，应该从两方面去注意问题：HTML代码的书写 和 CSS的组织。Html代码的书写四、代码的书写Html代码的书写就例如上面的设计图，这种模块通用性很强，可能会在很多页面上都需要显示他。拿通用性模块使用要有“拎”的感觉，就是抓住一个点就能把整块提起，模块的代码不能太松散。例如上面的设计图不能只写成：h3用户体验最好的电子商务网站？/h3ol li a href=””新蛋网 span class=”votes”239票/span s1/s/a /li li…/li li…/li …/ol四、代码的书写Html代码的书写而应在外面嵌套一个标识层：div class=”questionnaire”h3用户体验最好的电子商务网站？/h3ol 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{…}这样别人一看就知道这是哪个模块的CSS，要有其他项目也用这模块，就很容易的可以复制过去使用，而且这样也便于维护。四、代码的书写CSS的组织另外一个css书写要注意的问题是，层级结构不要写太多，如:.questionnaire li a {…}.questionnaire a {…}就不要写成后面这种写法不仅不便于阅读、增加了文件大小，而且还影响页面的渲染速度。对于通用性CSS的书写，还有一个要注意的问题是，就例如上面的设计稿，可能这个页面下需要这种风格的色彩搭配，到另外一个页面下可能需要换一套颜色，这个时候不能直接copy这模块的整段CSS