UI命名规范100124.docx
《UI命名规范100124.docx》由会员分享，可在线阅读，更多相关《UI命名规范100124.docx（15页珍藏版）》请在冰豆网上搜索。
UI命名规范100124
UI部门命名规范
北京神州数码思特奇信息技术股份有限公司
二〇一一年八月
1文档的目录结构
1.1门户型网站的目录结构
DEMO根目录
npages
njs
nresources
ui
si
common
yellow
blue
css
images
css
icon
images
css
images
picture
blue.css
common.css
layout.css
dtree.css
fenye.css
yellow.css
1.2产品线系统的目录结构
DEMO根目录
npages
njs
nresources
uiII
si
default
skin1/或其他名字
css
images
css
images
icon图标文件夹
基于控件或模块的导入样式.css
login.css
portal.css
framework.css
common.css
……
以控件命名的样式.css
login
portal
validator
tree
其他通用图片
2DEMO布局方式
2.1封装在一个WRAP层里：
头部
主体内容
底部
封装在一个层里
一般适用于门户型网站，对层的操作比较少的情况下
2.2头部、主体、底部各自独立
头部
主体内容
底部
一般适用于公司产品线系统
3CSS样式命名
3.1CSS文件命名
3.1.1CSS文件命名
●CSS文件命名全部采用小写；
●不要使用拼音作为文件的名称；
●门户型网站的CSS文件命名按照现有的命名方式即可；
●产品线系统的CSS命名：
除了公用的common.css、framework.css、reset.css等通用的样式以外，其他的样式文件以控件命名；
3.1.1.1门户型网站样式命名
在\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对比 ：
两者的主要区别在于风格的不同，大部分类的名称相同。
3.1.1.2产品线系统结构样式命名
在\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{
margin:
0;
padding:
0;
}
注：
如果在common.css下重定义了通用标签，就不需要reset.css文件了
●其他功能模块样式.css：
按功能模块页面命名的样式，例如：
portal.css
login.css
mercury.css
……
xxxxx.css
portal模块的样式
登录的样式
mercury.模块的样式
……
xxxxx组件的样式
在\nresources\default目录下
●main.css调用\nresources\default\css目录下的主要样式，main.css代码如下：
main.css
@importurl（'css/reset.css'）;
@importurl（'css/common.css'）;
@importurl（'css/framework.css'）;
@importurl（'css/tree.css'）;
针对本项目的样式
.类名1{}
.类名2{}
….
●portal.css调用\nresources\default\css目录下portal模块所用到的样式
main.css
@importurl（'css/reset.css'）;
@importurl（'css/common.css'）;
@importurl（'css/portal.css'）;
针对本项目的样式
.类名1{}
.类名2{}
….
注：
在\nresources\default目录下建立的样式文件都是导入的样式，那个模块用到哪个样式就调用哪个即可
3.2CSS类名、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（友情链接）
top-menu
logo
city-nav
head-area
content-area三列
left-col
center-col
right-col
foot-area
friendlink
footlink
copyright
content-area两列
left-col
right-col
注：
具体布局视情况而定
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
foot-panel
top-panel
menu-panel
content-panel
nav-panel
work-panel
sub-menu
layerout
add-tab-panel
3.2.1.3内容样式命名规则
●结构样式和内容样式尽量分开书写
●遇到多个内容样式的时候，先判断其从属关系（以menu为例）
如果是子孙关系，则命名为.menu.style1{}，.menu.style2{}，.menu.style3{}
如果是同级关系，则命名为.menu-style1{}，.menu-style2{}，.menu-style3{}
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
加入:
joinu
升级会员 