在web前端开发中遇到不知道给元素或变量起什么名字的问题，中文拼音太俗气，随便敲几个字母又影响代码的查读性。于是总结这些命名规范。
页面的命名规则
-
统一用翻译的英文命名（推荐）
-
统一用拼音命名（拼音的简化也可）
-
如果文件名过长，企业要提前约定一份缩写的规范，如pro—product
-
首页—index
-
产品列表—prolist产品详细页面—prodetail
-
新闻列表—newslist新闻详细页面—newsdetail
-
发展历史—history
-
关于我们—aboutus
-
联系我们—linkus，contactus
-
信息反馈—feedback留言—leavewords
图片命名规范
-
banner：放置在页面顶部的广告，装饰图案等长方形的图片
-
logo：标志性的图片
-
button：在页面上位置不固定，并且带有链接的小图片
-
menu：在页面中某一位置连续出现，性质相同的链接栏目的图片
-
pic：装饰用的图片
-
banner_sohu.gif, banner_sina.gif
-
menu_aboutus.gif,menu_job.gif
-
title_news.gif
-
logo_police.gif
-
pic_people.gif
CSS样式命名
DIV+CSS命名参考表：
|
CSS样式命名
|
说明
|
|---|
|
网页公共命名
|
|---|
|
#wrapper
|
页面外围控制整体布局宽度
|
|
#container或#content
|
容器,用于最外层
|
|
#layout
|
布局
|
|
#head, #header
|
页头部分
|
|
#foot, #footer
|
页脚部分
|
|
#nav
|
主导航
|
|
#subnav
|
二级导航
|
|
#menu
|
菜单
|
|
#submenu
|
子菜单
|
|
#sideBar
|
侧栏
|
|
#sidebar_a, #sidebar_b
|
左边栏或右边栏
|
|
#main
|
页面主体
|
|
#tag
|
标签
|
|
#msg #message
|
提示信息
|
|
#tips
|
小技巧
|
|
#vote
|
投票
|
|
#friendlink
|
友情连接
|
|
#title
|
标题
|
|
#summary
|
摘要
|
|
#loginbar
|
登录条
|
|
#searchInput
|
搜索输入框
|
|
#hot
|
热门热点
|
|
#search
|
搜索
|
|
#search_output
|
搜索输出和搜索结果相似
|
|
#searchBar
|
搜索条
|
|
#search_results
|
搜索结果
|
|
#copyright
|
版权信息
|
|
#branding
|
商标
|
|
#logo
|
网站LOGO标志
|
|
#siteinfo
|
网站信息
|
|
#siteinfoLegal
|
法律声明
|
|
#siteinfoCredits
|
信誉
|
|
#joinus
|
加入我们
|
|
#partner
|
合作伙伴
|
|
#service
|
服务
|
|
#regsiter
|
注册
|
|
arr/arrow
|
箭头
|
|
#guild
|
指南
|
|
#sitemap
|
网站地图
|
|
#list
|
列表
|
|
#homepage
|
首页
|
|
#subpage
|
二级页面子页面
|
|
#tool, #toolbar
|
工具条
|
|
#drop
|
下拉
|
|
#dorpmenu
|
下拉菜单
|
|
#status
|
状态
|
|
#scroll
|
滚动
|
|
.tab
|
标签页
|
|
.left .right .center
|
居左、中、右
|
|
.news
|
新闻
|
|
.download
|
下载
|
|
.banner
|
广告条(顶部广告条)
|
|
电子贸易相关
|
|---|
|
.products
|
产品
|
|
.products_prices
|
产品价格
|
|
.products_description
|
产品描述
|
|
.products_review
|
产品评论
|
|
.editor_review
|
编辑评论
|
|
.news_release
|
最新产品
|
|
.publisher
|
生产商
|
|
.screenshot
|
缩略图
|
|
.faqs
|
常见问题
|
|
.keyword
|
关键词
|
|
.blog
|
博客
|
|
.forum
|
论坛
|
|
CSS文件命名
|
说明
|
|---|
|
master.css,style.css
|
主要的
|
|
module.css
|
模块
|
|
base.css
|
基本共用
|
|
layout.css
|
布局，版面
|
|
themes.css
|
主题
|
|
columns.css
|
专栏
|
|
font.css
|
文字、字体
|
|
forms.css
|
表单
|
|
mend.css
|
补丁
|
|
print.css
|
打印
|
js函数命名规范
get 获取/set 设置, add 增加/remove 删除
create 创建/destory 移除 start 启动/stop 停止
open 打开/close 关闭, read 读取/write 写入
load 载入/save 保存, create 创建/destroy 销毁
begin 开始/end 结束, backup 备份/restore 恢复
import 导入/export 导出, split 分割/merge 合并
inject 注入/extract 提取, attach 附着/detach 脱离
bind 绑定/separate 分离, view 查看/browse 浏览
edit 编辑/modify 修改, select 选取/mark 标记
copy 复制/paste 粘贴, undo 撤销/redo 重做
insert 插入/delete 移除, add 加入/append 添加
clean 清理/clear 清除, index 索引/sort 排序
find 查找/search 搜索, increase 增加/decrease 减少
play 播放/pause 暂停, launch 启动/run 运行
compile 编译/execute 执行, debug 调试/trace 跟踪
observe 观察/listen 监听, build 构建/publish 发布
input 输入/output 输出, encode 编码/decode 解码
encrypt 加密/decrypt 解密, compress 压缩/decompress 解压缩
pack 打包/unpack 解包, parse 解析/emit 生成
connect 连接/disconnect 断开, send 发送/receive 接收
download 下载/upload 上传, refresh 刷新/synchronize 同步
update 更新/revert 复原, lock 锁定/unlock 解锁
check out 签出/check in 签入, submit 提交/commit 交付
push 推/pull 拉, expand 展开/collapse 折叠
begin 起始/end 结束, start 开始/finish 完成
enter 进入/exit 退出, abort 放弃/quit 离开
obsolete 废弃/depreciate 废旧, collect 收集/aggregate 聚集
常用的文件命名
服务热线 19970861797
