前端命名规范

页面命名规范

如：

  首页：index/home

  关于我们：about_us

  联系我们：contact_us

  产品中心：product

  产品详情页：pro_center

  新闻中心：news

  新闻详情页：news_center

  服务中心：service

  登陆页：login

  注册页：reg

  订单页：order

  订单提交成功页：order_success

  订单提交失败页：order_error

  提交页面：submit

  修改密码：update

  我的购物车：shop_cart

  确认订单：confirm_order

  支付页：pay

  支付成功页：pay_success

  支付失败页：pay_error

  会员中心：member

  地址列表：address

  新增地址：add_address

  个人资料修改：update_data

  购买记录页：pur_history

  点评页：comments

  搜索页：search

  地图页：map

id与class命名

如：

  地图：map

  头部：header

  中部：middle

  底部：footer

  内容：content

  导航：nav

  二级导航：childNav

  菜单：ment

  更多：move

  列表：list

  图片：pic

 缩略图：thumb-pic

  分页：page

  轮播图：slider

  广告图：banner

  新闻列表：newsList

  产品列表：proList

  搜索栏：search

  Logo图：logo

  中部内容左边：mid-left

  中部内容右边：mid-right

  中部内容上边：mid-top

  中部内容下边：mid-bot

  按钮：btn

  提交按钮：sub

  表格：tab

资源文件夹命名：

如：

CSS 文件夹：style

Javascript 文件夹：js

图片资源文件夹：images

字体资源文件夹：fonts

常用的css命名规则

头：header

内容：content/container

尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper

左右中：left right center

登录条：loginbar

标志：logo

广告：banner

页面主体：main

热点：hot

新闻：news

下载：download

子导航：subnav

菜单：menu

子菜单：submenu

搜索：search

友情链接：friendlink

页脚：footer

版权：copyright

滚动：scroll

内容：content

标签页：tab

文章列表：list

提示信息：msg

小技巧：tips

栏目标题：title

加入：joinus

指南：guild

服务：service

注册：regsiter

状态：status

投票：vote

合作伙伴：partner

(二)注释的写法:

/* Footer */

内容区

/* End Footer */

(三)id的命名:

(1)页面结构

容器: container

页头：header

内容：content/container

页面主体：main

页尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper

左右中：left right center

(2)导航

导航：nav

主导航：mainbav

子导航：subnav

顶导航：topnav

边导航：sidebar

左导航：leftsidebar

右导航：rightsidebar

菜单：menu

子菜单：submenu

标题: title

摘要: summary

(3)功能

标志：logo

广告：banner

登陆：login

登录条：loginbar

注册：regsiter

搜索：search

功能区：shop

标题：title

加入：joinus

状态：status

按钮：btn

滚动：scroll

标签页：tab

文章列表：list

提示信息：msg

当前的: current

小技巧：tips

图标: icon

注释：note

指南：guild

服务：service

热点：hot

新闻：news

下载：download

投票：vote

合作伙伴：partner

友情链接：link

版权：copyright

(四)class的命名:

(1)颜色:使用颜色的名称或者16进制代码,如

.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

（2）字体大小,直接使用”font+字体大小”作为名称,如

.font12px { font-size: 12px; }

.font9pt {font-size: 9pt; }

(3)对齐样式,使用对齐目标的英文名称,如

.left { float:left; }

.bottom { float:bottom; }

(4)标题栏样式,使用”类别+功能”的方式命名,如

.barnews { }

.barproduct { }

注意事项::

1.一律小写;

2.尽量用英文;

3.不加中杠和下划线;

4.尽量不缩写，除非一看就明白的单词.

主要的 master.css

模块 module.css

基本共用 base.css

布局，版面 layout.css

主题 themes.css

专栏 columns.css

文字 font.css

表单 forms.css

补丁 mend.css

打印 print.css

---

商城页面命名

index 主页

footprints 我的足迹

collect 我的收藏

about_us 关于我们

shop_cart 购物车

personal 个人中心

comments 评论

search 搜索

nearby 附近

order 订单

activities 活动

detail 店铺详情

detail_temp 生活超市

sort_list 分类

all_order 增加订单

pay 支付

success 支付成功

submit 提交

address 地址

add_address 添加地址

two_code 我的二维码

experience 体验师

supermarkets 生活超市

命名规则如下：

1.如果是模块，可以这样前缀：

弹出：pop                    公共：global（缩写：gb）

标题：title,tit                提示：hint 

菜单：menu                 信息：info 

预览：pvw                   导航：nav

2.类型： 

按钮：btn                    文本：txt

段落：p                       图标：icon 

颜色：color（缩写：c）  背景：bg 

边框：bor

3.作用：

设置：set                    添加：add 

删除：del                    操作：op 

密码：pw                    导入：inc

4.状态：

成功：suc                  失败：lost                透明：tran

基本上常用的就这么多，大家可以一起来补充

5.下面我列的几个小例子：

文本输入框： .input_txt

段落文本颜色： .tx_c_p

密码输入框： .input_pw

相册弹出的设置层： .pop_set_photo

登录密码输入框： .input_pw_login

日志设置成功提示： .hint_suc_blogset

公共提示： .hint_gb

......

6.常用的块命名

页头： header            登录条： loginBar

标志： logo                侧栏： sideBar

广告： Banner            导航： nav

子导航： subNav         菜单： menu

子菜单： subMenu       搜索： search

滚动： scroll               页面主体：main

内容： content           标签页： tab

文章列表：list             提示信息：msg

小技巧： tips              栏目标题：title

加入： joinus             指南： guild

服务： service            热点： hot

新闻： news              下载： download

注册： regsiter           状态： status

投票： vote               友情链接：friendLink

页脚： footer             版权： copyRight