2024年1月12日发(作者：)

UI命名规范

二〇二二年三月

软件需求说明书 第 1 页 共 22 页

目 录

1 文档的目录结构 .............................................................................................................................. 4

1.1

门户型网站的目录结构 ........................................................................................................... 4

1.2

产品线系统的目录结构 ........................................................................................................... 5

2 DEMO布局方式 ............................................................................................................................... 6

2.1

封装在一个WRAP层里： ....................................................................................................... 6

2.2

头部、主体、底部各自独立 ................................................................................................... 6

3 CSS样式命名 .................................................................................................................................... 7

3.1

CSS

文件命名 ........................................................................................................................... 7

3.1.1 CSS文件命名 ..................................................................................................................... 7

3.2

CSS

类名、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.1

HTML

注释 .............................................................................................................................. 19

5.2

CSS

样式注释 ......................................................................................................................... 19

5.3

需要大量注释说明则建议采用： ........................................................................................ 20

5.4

JS的注释 .................................................................................................................................. 20

6 JS命名规则 ..................................................................................................................................... 21

6.1

JS文件目录规则 ...................................................................................................................... 21

6.2

JS文件命名规则 ...................................................................................................................... 21

6.3

JS函数命名规则 ...................................................................................................................... 22

UI命名规范 第 2 页 共 22 页

UI命名规范 第 3 页 共 22 页

1 文档的目录结构

1.1 门户型网站的目录结构

DEMO根目录

npages njs nresources

ui si blue common yellow

picture

css images css icon images css

images

UI命名规范 第 4 页 共 22 页

1.2 产品线系统的目录结构

DEMO根目录

npagenjs nresources

uisi default skin1/或其他名字

基于控件或模块的导入样式.css

css images

css

images

……

以控件命名的样式.css

icon图标文件夹

login

portal

validator

tree

其他通用图片

UI命名规范 第 5 页 共 22 页

2 DEMO布局方式

2.1 封装在一个WRAP层里：

头部

主体内容

封装在一个层里

底部

一般适用于门户型网站，对层的操作比较少的情况下

2.2 头部、主体、底部各自独立

头部

主体内容

底部

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

UI命名规范 第 6 页 共 22 页

3 CSS样式命名

3.1 CSS 文件命名

3.1.1 CSS文件命名

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

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

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

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

3.1.1.1 门户型网站样式命名

在nresourcescommoncss目录下

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

 ：主要布局样式，网站主框架的布局，每个模块页面的布局样式等等；

.head-panel{}

……

.menu-panel{}

……

.content-panel{}

.content-panel .left-col{}

.content-panel .center-col{}

.content-panel .right-col{}

……

.search-panel{}

.location{}

UI命名规范 第 7 页 共 22 页

.foot-panel{}

.foot-panel .footlink{}

.foot-panel .copyright{}

.foot-panel .friendlink{}

……

 ：网站通用树的样式

 ：网站通用分页的样式

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

 或者 ： 相对于布局样式的外观样式，是以黄色或橘黄色为主色系的样式、是以蓝色为主色系的样式

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

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

在nresourcesdefaultcss目录下

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

html{……}

body{……}

h1, h2, h3, h4, h5, h6{……}

table{}

th{}

td{}

a:link{}

a:visited{}

a:hover{}

a:active{}

通用的表单元素样式

其他通用的样式，例如：

.loading{}

.more-link{}

.menu{}

UI命名规范 第 8 页 共 22 页

……

 ：系统主框架样式

.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{}

……

 ：一些通用标签样式的重定义，例如：

body, h1, div, li, ul, img, span, p ,h1,h2,h3,h4,h5,h6{

}

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

 其他功能模块样式.css：按功能模块页面命名的样式，例如：

portal模块的样式

margin: 0;

padding: 0;

登录的样式

mercury.模块的样式

……

……

xxxxx组件的样式

在nresources default目录下

 调用 nresources default css目录下的主要样式，代码如下：

UI命名规范 第 9 页 共 22 页

@import url('css/');

@import url('css/');

@import url('css/');

@import url('css/');

针对本项目的样式

.类名1{}

.类名2{}

….

 调用 nresources default css目录下portal模块所用到的样式

@import url('css/');

@import url('css/');

@import url('css/');

针对本项目的样式

.类名1{}

.类名2{}

….

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

3.2 CSS 类名、ID命名

3.2.1 CSS类名、ID命名

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

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

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

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

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

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

UI命名规范 第 10 页 共 22 页

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（友情链接）

UI命名规范 第 11 页 共 22 页

head-area

logo top-menu city-nav

content-area三列

left-col

center-col right-col

content-area两列

left-col right-col

foot-area

friendlink footlink

copyright

注：具体布局视情况而定

UI命名规范 第 12 页 共 22 页

3.2.1.2 产品线系统主要结构样式命名

 主框架：.main-frame

 主框架头部区：.top-panel

 主框架菜单与布局切换区： .menu-panel

 主框架内容区： .content-panel

 主框架左侧导航区：.nav-panel

 主框架右侧工作区：.work-panel

 主框架底部区：（如果需要添加）.foot-panel

 主框架布局切换区：.layerout

 主框架菜单区如果有下一级菜单：. sub-menu

 主框架workPanel查询区域：.add-tab-panel

sub-menu layerout

nav-panel work-panel

UI命名规范 第 13 页 共 22 页

3.2.1.3 内容样式命名规则

 结构样式和内容样式尽量分开书写

 遇到多个内容样式的时候，先判断其从属关系(以menu为例)

如果是子孙关系，则命名为.1{}，. 2{}，. 3{}

如果是同级关系，则命名为.menu-style1{}，.menu-style2{}，.menu-style3{}

UI命名规范 第 14 页 共 22 页

3.2.1.4 其他常用样式的命名或简写

 常用模块的类名

面包屑（当前位置区域）：.location

table列表区大体可以分为两种类型：

输入列表区：.import-table

显示查询结果列表区：.result-table

更多：.more-link(多于一种形式可以使用.more-link01,more-link02)。模块需要单独写“更多链接”的样式，则利用子选择关系

.XXXX . more-link{……}

 一些常用模块名的缩写

文本输入框； txt，

标签 ； lab，

图象 img，

图片；pic，

列表框lst，

搜索:search

滚动:scroll

标签页:tab

文章列表:list

提示信息:msg

小技巧:tips

友情链接:friendlink

加入:joinus

指南:guild

服务:service

热点:hot

新闻:news

下载:download

注册:regsiter

状态:status

投票:vote

分页:pagination

具体在使用时建议不要单独使用以上的缩写，最好加上其他标识，比如“业UI命名规范 第 15 页 共 22 页

务受理的指南”，

business-guild

3.2.1.5 表单元素的命名

 表单元素名建议采用缩写

button：btn

checkbox：ckb

file：file

hidden：hdn

image：image

password：pwd

radio：rdo

reset：rst

submit：sbm

text：txt

textarea：txta

select：slt

UI命名规范 第 16 页 共 22 页

4 图片的命名规则

4.1 图片文件夹命名规则

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

 图片文件夹名全部采用小写

 picture存放内容性图片的文件夹，例如： nresourcespicture

 images存放背景图片的文件夹，例如： nresources common images

nresources yellow images nresources blue images

 icon存放图标性的图片，例如： nresources common icon

nresources

picture

common yellow blue

images

icon

images images

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

 图片文件名全部采用小写

 images文件夹存放所有图片， nresources default images

 图片比较少的组件，则将该图片直接存放于 nresources default images下，并且以该组件命名图片

 在images图片文件夹下建立以组件为名称的图片文件夹，如图

UI命名规范 第 17 页 共 22 页

default

images

icon login framework mztree ……

4.2 图片命名规则

 背景和装饰性的图片尽量以其对应的样式命名，例如：tap-panel的背景图片命名为

 picture文件夹下的内容图片，尽量以其作用命名，例如：

 图标文件夹以类型命名，例如：，

 用减号“-”连接复杂的图片名称，例如：

UI命名规范 第 18 页 共 22 页

5 注释的规则

 注释主要针对重要的部分进行注释，方便其他人浏览代码。

 注释要有区块性，有开始和收尾，比如有，就要有

 注释时尽量采用英文注释

5.1 Html 注释

建议采用英文注释主要布局框架的元素和特殊的模块,注释只是在DEMO版本里，在生产环境时尽量减少注释或者去掉注释，例如：

html注释

5.2 CSS 样式注释

模块性的样式建议采用明显标注，区分样式的结构,例如：

CSS注释

/*======header start====== */

.head{……}

/*======header end====== */

模块里的样式采用标准注释即可

CSS注释

/*======header start====== */

/*logoPanel start*/

.header .logoPanel{……}

/*logoPanel end*/

/*nav start*/

.header .nav{……}

UI命名规范 第 19 页 共 22 页

/*nav end*/

/*======header end====== */

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

CSS注释

/*======

…….

======*/

注明：不一定是“=”号，只要能区分模块性的注释即可

5.4 JS的注释

讨论：建议也采用和样式注释一样的方法，有开头就有结束

js注释方法1，单行注释

//XXXX start

function XXXX(…){…}

//XXXX end

js注释方法2，区块注释

/*

注释内容

*/

UI命名规范 第 20 页 共 22 页

6 JS命名规则

6.1 JS文件目录规则

 JS文件夹命名全部采用小写

 将所有UI的JS文件存放于njs ui 目录下

 将基于框架的程序插件放在以框架命名的文件夹里，例如基于jquery的插件放在jquery文件夹里

njs

ui jquery

其他框架

jquery包.js

插件.js

……

6.2 JS文件命名规则

 ui的js文件采用相应控件命名

 文件名全部采用小写

例如：

UI命名规范 第 21 页 共 22 页

6.3 JS函数命名规则

 全部采用小写命名

 使用下划线“_”连接复杂的函数名，例如：function get_json()

 尽量使用常见的英文单词或缩写

 对应的函数名与CSS类名相对应，例如：

html代码

< div class=”accordion” >

js代码

Function accordion(){…}

UI命名规范 第 22 页 共 22 页