UI命名规范(10.01.24).docVIP

UI部门命名规范 北京神州数码思特奇信息技术股份有限公司 二〇一〇年一月 目 录 1 文档的目录结构 5 1.1 门户型网站的目录结构 5 1.2 产品线系统的目录结构 6 2 DEMO布局方式 7 2.1 封装在一个WRAP层里： 7 2.2 头部、主体、底部各自独立 7 3 CSS样式命名 8 3.1 CSS 文件命名 8 3.1.1 CSS文件命名 8 3.2 CSS 类名、ID命名 11 3.2.1 CSS类名、ID命名 11 4 图片的命名规则 18 4.1 图片文件夹命名规则 18 4.1.1 门户型网站图片文件夹命名规则： 18 4.1.2 产品线系统的图片文件夹命名规则 18 4.2 图片命名规则 19 5 注释的规则 20 5.1 Html 注释 20 5.2 CSS 样式注释 20 5.3 需要大量注释说明则建议采用： 21 5.4 JS的注释 21 6 JS命名规则 22 6.1 JS文件目录规则 22 6.2 JS文件命名规则 22 6.3 JS函数命名规则 23 文档的目录结构 门户型网站的目录结构 产品线系统的目录结构 DEMO布局方式 封装在一个WRAP层里： 一般适用于门户型网站，对层的操作比较少的情况下 头部、主体、底部各自独立 一般适用于公司产品线系统 CSS样式命名 CSS 文件命名 CSS文件命名 CSS文件命名全部采用小写； 不要使用拼音作为文件的名称； 门户型网站的CSS文件命名按照现有的命名方式即可； 产品线系统的CSS命名：除了公用的common.css 、 framework.css、reset.css等通用的样式以外，其他的样式文件以控件命名； 门户型网站样式命名 在\nresources\common\css目录下 common.css ：通用的样式，包括一些样式的重定义，链接的样式，表单的样式，字体的样式，通用分页的样式，通用的树样式等等； layout.css ：主要布局样式，网站主框架的布局，每个模块页面的布局样式等等； layout.css .head-panel{} …… .menu-panel{} …… .content-panel{} .content-panel .left-col{} .content-panel .center-col{} .content-panel .right-col{} …… .search-panel{} .location{} .foot-panel{} .foot-panel .footlink{} .foot-panel .copyright{} .foot-panel .friendlink{} …… dtree.css：网站通用树的样式 fenye.css：网站通用分页的样式 在\ nresources \ yellow \ css 或者 \ nresources \ blue \ css 目录下 yellow.css 或者 blue.css： 相对于布局样式的外观样式，yellow.css是以黄色或橘黄色为主色系的样式、blus.css是以蓝色为主色系的样式 注：yellow.css与blue.css对比?：两者的主要区别在于风格的不同，大部分类的名称相同。 产品线系统结构样式命名 在\nresources\default\css目录下 common.css ：通用的样式，包括，链接的样式，表单的样式，字体的样式，通用分页的样式，通用的树样式，通用表格样式等等； common.css html{……} body{……} h1, h2, h3, h4, h5, h6{……} table{} th{} td{} a:link{} a:visited{} a:hover{} a:active{} 通用的表单元素样式 其他通用的样式，例如： .loading{} .more-link{} .menu{} …… framework.css ：系统主框架样式 framework.css .top-panel{} .top-panel .menu-panel {} .top-panel .menu-panel .tabs-nav{} …… .toolbar-panel{} …… . content-panel{} . content-panel .nav-panel{} . content-panel .work-panel{} . content-panel .work-panel .tabs-panel{} …… reset.css：一些通用标签样式的重定义，例如： reset.css body, h1, div, li, ul, img, span, p ,h1,h2,h3,h4,h5,h6