命名规范 | 青衣墨客

一、导航类

导航：nav 主导航：mainbav 子导航：subnav 顶导航：topnav

边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar 菜单：menu

子菜单：submenu 标题：title 摘要：summary

二、页面结构

容器：container 页头：header 内容：content/container 页面主体：main

页尾：footer 导航：nav 侧栏：sidebar 栏目：column

页面外围控制整体布局宽度：wrapper 左右中：left right center

三、功能

标志：logo 滚动：scroll 广告：banner 标签页：tab

功能区：shop 图标：icon 标题：title 注释：note

加入：joinus 指南：guild 状态：status 服务：service

按钮：btn 热点：hot 合作伙伴：partner 新闻：news

友情链接：friendlink 下载：download 版权：copyright 投票：vote

四、div英文释译

标题 title 字体 font 身体 body 大小 size

列表 list 文本 text 样式 style 对齐 align

图像 image 修饰 decoration 资源 source 线 line

宽度 width 穿过 through 高度 height 缩进 indent

行 line 斜体 italic 链接 link 加粗 bold

斜体 italic 加重 weight 加粗 bold 宽 width

输入 input 高 height 下面的 under 背景 background

顶部 top 主体 main

五、css英文释译

重复 repeat 填充 padding 位置 position 正常 normal

显示类型 display 父级 parent 显示可见 visibility 子级 children

隐藏 hidden 顶部导航topnav显示 visible 溢出 overflow

列表 list 样式 style 边框 border 导航 nav

广告图片 banner 行高line-height边界 margin 页眉 header

六、样式文件命名

主要的master.css 模块module.css 基本共用base.css 布局，版面layout.css

主题themes.css 专栏columns.css 文字font.css 表单forms.css

补丁mend.css 打印print.css

七、颜色释译

绿 green 红 red 蓝 blue 黑 black

灰 gray 黄 yellowa 紫 purple 白 white

棕 brown 卡其色 khaki

六、命名参考

登录条loginBar 标志：logo 侧边栏：sideBar 广告：banner

导航：nav 子导航：navBar 菜单：menu 子菜单：subMenu

搜索：search 滚动：scroll 页面主体：main 内容：content

标签页：tab 文章列表：list 提示信息：msg 小技巧：tips

栏目标题：title 加入：joins 指南：guild 服务：service

热点：hot 新闻：news 按钮：btn 投票：vote

状态：status 合作伙伴：partner 外套：wrap 商标：label

顶导航：topnav 左导航：leftSideBar 右导航：rightSideBar菜单内容：menuContent

菜单容器：menuContainer注释：note 边导航图标：sidebarIcon版权：copyright

友情链接：friendLink容器：container 页脚：footer 当前：current

激活：active 购物车：shop 登录：login 注册：regsiter

下载：download 面包屑：breadCrumb

其它

1）文件编码统一使用 UTF-8 编码；
2）命名时以符合语义为主要参考指标，CSS属性书写规范，采用统一风格及命名方法；
3）结构清晰，层级关系明朗，以不超过三级为标准；
4）同一表现形式的样式要求可重复利用，模块组件类的样式要求可整体外部移植；
5）编写 CSS 的时候，应当避免使用CSS Hack，能不用则不用。
6）所有页面默认都针对Firefox 等最接近标准的浏览器进行设计，然后使用 IE 特有条件注释功能进行针对性修正。
7）请使用英文进行命名，尽量避免使用拼音。命名要求具有可读性，尽量避免使用缩写。命名虽然允许数字，但应尽量避免使用数字命名。
2、命名方法要求采用统一的命名方法。常用命名方法有：
1）连写式命名法，如：helloworld
2）中线命名法，如：hello-world（目前采用此方法的较多，建议采用）
3）下划线命名法，如：hello_world
4）骆驼命名法，如：helloWorld
5）帕斯卡命名法，如：HelloWorld
6）其他方法。
3、样式文件命名规范如：
全局的：global.css；
主要的：master.css；
布局、版面：layout.css；
专栏：columns.css；
文字：font.css；
打印样式：print.css；
主题：themes.css；
补丁：pacth.css；
格式化浏览器：base.css等。
4、ID及Class命名常用名称
页头：header
登录条：login-bar
标志：logo
侧栏：side-bar
广告：banner
导航：nav
子导航：sub-nav
菜单：menu
子菜单：sub-menu
搜索：search
滚动：scroll
页面主体：main
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
热点：hot
新闻：news
下载：download
注册：regsiter
状态：status
按钮：btn
投票：vote
合作伙伴：partner
友情链接：friendlink
版权：copyright
外套：wrap
页脚：footer
标题：title
顶导航：top-nav（mini-nav）