UI命名规范

UI命名规范二〇二二年三月

目录

1 文档的目录结构 (4)

1.1门户型网站的目录结构 (4)

1.2产品线系统的目录结构 (5)

2 DEMO布局方式 (6)

2.1封装在一个WRAP层里： (6)

2.2头部、主体、底部各自独立 (6)

3 CSS样式命名 (7)

3.1CSS文件命名 (7)

3.1.1 CSS文件命名 (7)

3.2CSS类名、ID命名 (10)

3.2.1 CSS类名、ID命名 (10)

4 图片的命名规则 (17)

4.1图片文件夹命名规则 (17)

4.1.1 门户型网站图片文件夹命名规则： (17)

4.1.2 产品线系统的图片文件夹命名规则 (17)

4.2图片命名规则 (18)

5 注释的规则 (19)

5.1H TML 注释 (19)

5.2CSS样式注释 (19)

5.3需要大量注释说明则建议采用： (20)

5.4JS的注释 (20)

6 JS命名规则 (21)

6.1JS文件目录规则 (21)

6.2JS文件命名规则 (21)

6.3JS函数命名规则 (22)

1文档的目录结构1.1 门户型网站的目录结构

1.2 产品线系统的目录结构

2DEMO布局方式

2.1 封装在一个WRAP层里：

一般适用于门户型网站，对层的操作比较少的情况下2.2 头部、主体、底部各自独立

一般适用于公司产品线系统

头部主体内容

底部

3CSS样式命名

3.1 CSS 文件命名

3.1.1CSS文件命名

●CSS文件命名全部采用小写；

●不要使用拼音作为文件的名称；

●门户型网站的CSS文件命名按照现有的命名方式即可；

●产品线系统的CSS命名：除了公用的common.css 、framework.css、reset.css 等通用的样式以外，其他的样式文件以控件命名；

3.1.1.1门户型网站样式命名

在\nresources\common\css目录下

●common.css：通用的样式，包括一些样式的重定义，链接的样式，表单的样式，字体的样式，通用分页的样式，通用的树样式等等；

●layout.css ：主要布局样式，网站主框架的布局，每个模块页面的布局样式等

●dtree.css：网站通用树的样式

●fenye.css：网站通用分页的样式

在\ nresources \ yellow \ css 或者\ nresources \ blue \ css 目录下

●yellow.css 或者blue.css：相对于布局样式的外观样式，yellow.css是以黄色或橘黄色为主色系的样式、blus.css是以蓝色为主色系的样式

注：yellow.css与blue.css对比：两者的主要区别在于风格的不同，大部分类的名称相同。

3.1.1.2产品线系统结构样式命名

在\nresources\default\css目录下

●common.css ：通用的样式，包括，链接的样式，表单的样式，字体的样式，通用分页的样式，通用的树样式，通用表格样式等等；

注：如果在common.css下重定义了通用标签，就不需要reset.css文件了

在\nresources\ default目录下

注：在\ nresources \ default目录下建立的样式文件都是导入的样式，那个模块用到哪个样式就调用哪个即可

3.2 CSS 类名、ID命名

3.2.1CSS类名、ID命名

●结构样式命名方式：采用该版块的英文单词或组合命名，方位+(作用)+类型描述，例如：网站头部的容器：.head-area{} 、左侧列：.left-col{}；

●样式名全部采用小写，用“-”号链接单词，例如：.head-area{}、.add-tab-panel{}；

●新版网站、新增类名采用类名方法书写，不采用ID书写，例如：class=”top-panel”，以便与ID区分，ID可以用于JS中；

●类名的英文单词尽量不缩写，使用缩写时必须要有约定，避免其他人看不懂；

●在样式命名时从大类往小类命名，例如tab ,横向命名为.tab-horizontal ，纵向命名为.tab-vertical

●在产品线系统总CSS文件（import多个样式）里书写个性化的样式

3.2.1.1门户型网站结构样式命名

●主框架：.main-frame、wrap

●头部区域：. head-panel

最顶部登陆退出区.top-menu、top

logo区域：.logo或者.logo-panel

地市导航：.city-nav

菜单导航区域：.nav-area、nav、nav-panel 或者.menu- panel、menu ●内容区域：.content-panel （页面主体）

根据具体的布局结构命名，

比如：三列.left-col（左侧列）.center-col (中侧列) .right-col（右侧列）

两列.left-col (左侧列) .right-col（右侧列）

left-col左侧列通常包括：登录区login-area、子导航sub-nav

center-col中列通常包括：flash轮播区flash-area、帮助区help-panel 客户品牌专区brand-panel、新闻动态news-panel、推荐专区recommend-panel ●底部区域：. foot-panel

主要包括：

.footlink（底部链接区域）

.copyright（版权区域）

.friendlink（友情链接）