• 前端分享学习博客,探究前端相关技术,推动天朝前端发展,有任何问题都可以留言一起探究
  • 由于站内自链接问题,部分pre中的代码首字母使用大写以过滤筛选
  • 欢迎友链互换,还有,如果有大神请不要黑我的站点(o´・ェ・`o)
  • 如果你觉得博客还不错,请Ctrl+D收藏( *︾▽︾)

前端开发规范

Html/Css 薛 陈磊 982次浏览 已收录 2个评论 扫描二维码

基本规范

规范目的

  • 规范化开发
  • 统一标准,便于代码审核
  • 前端初始参考文档
  • 前端团队级要求
  • ……

命名规则

全部使用英文小写方式,以下划线分割,有复数结构时,使用复数命名法;示例:
目录命名:scripts,images,data_models
JS文件命名:index.js,common_slider.js
Css/Scss文件命名:product_list.scss,login.css
Html文件命名:index.html,error_msg.html
很多浏览器和爬虫会对一些特殊词作拦截,比如:ad,ads,adv,banner,guagng,gg,guanggao

图片规则

图像质量要求和图像文件大小决定你用什么格式的图片,用较小的图片文件呈现较好的图像质量。
当图片色彩过于丰富且无透明要求时,建议采用jpg格式并保存为较高质量。
当图片色彩过于丰富又有透明或半透明要求或阴影效果时,建议采用png24格式,并对IE6进行png8退化(或在不得已情况下使用滤镜)。
当图片色彩不太丰富时无论有无透明要求,请采用png8格式,大多数情况下建议采用这种格式。
当图片有动画时,只能使用gif格式;
可以使用工具对图片进行再次压缩,前提是不会影响色彩和透明;
小图标尽量合成雪碧图,减少并发请求,为保证多次修改后的图片质量,保留一份PSD原始图,修改和添加都在PSD中进行,最后导出png;

缩进规则

统一使用soft tab(4个空格)

注释规则

Html、Css避免多行注释,多行注释使用换行Ctrl+/(单行注释):

<!--
@name: Drop Down Menu
@description: Style of top bar drop down menu.
@author: jone
--> Html注释 不推荐

/*
@name: Drop Down Menu
@description: Style of top bar drop down menu.
@require: reset.css
@author: jone
*/ Css注释 不推荐

Html注释,标注模块开始,模块之间空一行:

<!-- 文章列表列表模块 -->
<div class="article">
...
</div>

Css注释,标注模块开始结束,模块之间空一行:

/*新版列表项样式 start*/
.css{ width:100%}
/*新版列表项样式 end*/

/*旧版列表项样式 start*/
.box{ width:90%}
/*旧版列表项样式 end*/

优化规则

开发阶段使用原始前端资源,测试阶段使用原始/压缩的前端资源,正式服务器使用压缩前端资源;
图片要进行压缩处理,js要进行混淆处理;
html页面要进行Gzip或其他优化处理,减少请求;
省略外链资源(图片及其它媒体资源)URL 中的 http / https 协议,使 URL 成为相对地址,避免 Mixed Content 问题,减小文件字节数;例:

<script src="//www.a.com/js/gweb/analytics/autotrack.js"></script>

推荐

<script src="http://www.a.com/js/gweb/analytics/autotrack.js"></script>

不推荐
文件内容区域使用小写字母编写;例:

<img src="google.png" alt="Google" />

推荐

<img src="GOOGLE.PNG" alt="Google" />

不推荐


薛陈磊的博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明前端开发规范
喜欢 (1)
[905044086@qq.com]
分享 (0)
作者薛陈磊
关于作者:
非著名前端工程师,关注Html5、Css3、Javascript、Node.js和各种前端框架发展,学习管理技巧和团队建设方法,期待遇到更多前端小伙伴一起学习进步;
说点什么...
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. 感谢博主分享
    加气块设备2017-07-03 14:00 回复 Windows 7 | 搜狗浏览器 2.X
  2. 好几年没用过博客了,支持下!
    直销2017-06-13 22:14 回复 Windows 7 | 搜狗浏览器 2.X