前端开发命名规范(html+css+js)
文件夹及文件命名
- 所有的命名最好都小写。
- 文件夹命名,尽量采取单个英语单词描述,如login,index。
- html文件名称,当需要多个英语单词描述时用”_”(下划线)连接多个单词分隔,如:user_add.html,动词放在后面,便于相同业务模块文件放在一起。
- css,image,js文件名称,当需要多个英语单词描述时用”-“(分隔线)连接多个单词分隔,如:font-awesome.css,login-user.jpg,login-pwd.jpg。 当基于某种类型从属关系划分文件时,以.(点)作为单词分隔,如:jquery.min.js,common.left-sliding.js
js变量命名
建议采取系统匈牙利命名法,因为js语言是一弱类型语言,声明变量时,在名称上标识其数据类型,以提高代码的的可读性。
变量名=数据类型+对象描述
s: 表示字符串String
n:表示数字
i: 表示整型Int(它是Number中的整数类型)
fl: 表示浮点Float(它是Number中的小数类型)
b: 表示布尔Boolean
a: 表示数组Array
o: 表示对象Object
fn: 表示函数Function例如
var aPerson = []; // Array数组
var oBtn = document.getElementById(‘btn’); //Object对象
var fnName = function () {}; // function函数
var sName = “w3cplus”; // string字符串
js函数命名
函数命名:统一使用动词或者动词+名词形式 —- fnInit()
对象方法命名使用fn+对象类名+动词+名词形式 fnAnimateDoRun()
某事件响应函数命名方式为fn+触发事件对象名+事件名或者模块名 fnDivClick()
附常用的动词列表
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 聚集
CSS自定义样式命名
- 所有的命名最好都小写
- 当需要多个英语单词描述时用”-“(分隔线)连接多个单词分隔
- 主要的、重要的、最外层的盒子用“#”(井号)选择符号开头命名,其它都用“.”(小写句号)选择符号开头命名。
例如定义左滑样式及层级结构样式
/*最外层列表样式*/
.line-wrapper {
width: 100%;
height: 5em;
overflow: hidden;
font-size: 1em;
background-color: #FFFFFF;
border-bottom: 1px solid #aaa;
}
/*滚动列表样式*/
.line-scroll-wrapper {
white-space: normal;
height: 5em;
clear: both;
}
/*显示内容区样式*/
.line-normal-wrapper {
display: inline-block;
line-height: 3.5em;
float: left;
padding-top: 0.35em;
padding-bottom: 0.35em;
height: 4.5em;
padding-left: 0.5em;
padding-right: 0.5em;
}
/*删除按钮样式*/
.line-btn-delete {
float: left;
width: 5em;
height: 5em;
}
更多相关文章
- Vue绑定内联样式问题
- weiyi通讯录(三)仿微信下拉列表和android样式
- 简单的DatePicker样式设置
- [置顶] Android系统的样式style
- Android 修改spinner 字体颜色 样式的方法
- java中excel导出包括合并单元格和单元格样式