前端规范
- 命名规则
- 头 : header
- 内容 : content/container
- 尾部 : footer
- 导航 : nav
- 侧栏 : sidebar
- 栏目 : column
- 外围盒子控制整体布局 : wrapper
- 左 右 中 : left / center / right
- 登录条 : 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
- 注释的写法
1 | /*Footer Start*/ |
id的命名
3.1 页面结果
- 容器 : container
- 页头 : header
- 内容 : content / container
- 页面主体 : main
- 页尾 : footer
- 导航 : nav
- 侧栏 : sidebar
- 栏目 : column
- 页面外围控制整体布局宽度 : wrapper
- 左右中 : left / right / center
3.2 导航
- 导航 : nav
- 主导航 : mainbav
- 子导航 : subnav
- 顶导航 : topnav
- 边导航 : sidebar
- 左导航 : leftsidebar
- 右导航 : rightsidebar
- 菜单 : menu
- 子菜单 : submenu
- 标题 : title
- 摘要 : summary
3.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
css样式
4.1 重置默认样式
4.2 添加自定义全局样式
4.3 抽取文件定义单页面全局样式
4.3 样式定义规则 : 重定义 > 伪类 > 自定义 (便于阅读)
javascript 书写规范
5.1 书写过程 :每行代码结束结构统一(有无分号->有的话,每行代码都应该有-> eslint 设置规则,遵守即可)。防止代码冗余 | 与不小心造成与远程代码造成冲突
5.2 库的引入 :根据项目需求,尽量的少引入。引入的时候,尽量使用按需引入,节省资源
5.3 变量命名规则 :驼峰式命名法
5.4 类命名 : 首字母大写, 驼峰式命名
5.5 函数命名: 首字母小写驼峰式命名
5.6 命名语义化, 尽可能利用英文单词或其缩写
5.7 尽量避免使用存在兼容性及消耗资源的方法或属性, 比如eval() &; innerText
5.8 后期优化中, JavaScript非注释类中文字符须转换成unicode编码使用, 以避免编码错误时乱码显示;
5.9 代码结构明了, 加适量注释. 提高函数重用率
5.10 注重 样式 结构 行为 相分离
图片规范
6.1 所有页面元素类图片均放入img文件夹
6.2 图片格式仅限于gif || png || jpg
6.3 命名全部用小写英文字母 || 数字 || _ 的组合,其中不得包含汉字 || 空格 || 特殊字符;尽量用易懂的词汇, 便于团队其他成员理解; 另, 命名分头尾两部分, 用下划线隔开, 比如ad_left01.gif || btn_submit.gif
6.4 在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间
6.5 尽量避免使用半透明的png图片(若使用, 请参考css规范相关说明)
6.6 运用css sprite技术集中小的背景图或图标, 减小页面http请求, 但注意, 请务必在对应的sprite psd源图中划参考线, 并保存至img目录下
注释规范
7.1 html注释: 注释格式< !–这儿是注释–>, ‘–’只能在注释的始末位置,不可置入注释文字区域
7.2 css注释: 注释格式 /*这儿是注释*/
7.3 JavaScript注释, 单行注释使用’//这儿是单行注释’ ,多行注释使用 /* 这儿有多行注释 */
结束语
如果能够帮助到你,是小编最大的荣幸
当然 有 不好的地方 请大家帮忙指出 学习永无止境
小编一直认为 人外有人 天外有天 一起学习 共同进步
让我们共同加油吧!!!