一、目的
按照一定规范编写页面，一来提高团队的协作效率，便于后台添加功能及前端后期优化维护，输出高质量的文档；二来是页面的加载速度做到最大化
一、文件规范
1.文件夹命名
文件名称统一用小写的英文字母、数字和下划线的组合，其中不得包含汉字、空格和特殊字符；
2. 文件夹管理
文件夹命名以及相对路径
说明：如果对于PC端较少的页面可以*_html, images文件夹可去掉第3层；
“*”代表的名称依项目的功能模块而定，只需符合文件名称统一用小写的英文字母、数字和下划线的组合，其中不得包含汉字、空格和特殊字符
3.HTML页面
引入文件（原则减少http请求）
作为稍微有常识的前端开发者，一定是引入外部的css和js文件，这里说一下位置问题
css文件的位置：引入的css文件放置在head标签里，也是所有外部引入文件的最前边，原因很简单，当加载页面时就开 始渲染页面这样页面不会出现空白；
js文件的位置： 在</body>标签结束之前引入；原因当浏览器遇到js时便暂停其它所有的加载活动，加载js，在js中调用DOM元素，就会对页面中的匹配的DOM元素进行查找，若果放在<head>标签里则需要对未加载的页面进行轮寻，查找匹配的。而放在</body>结束之前则对应匹配的元素已准备就绪。能达到优化目的，加快页面的加载速度，绝对是一件开发者所喜欢的。
4.css命名规范
css常用命名：
| 头 | header | 内容 | content | 尾 | footer | 导航 | nav |
| 子导航 | subnav | 栏目 | column | 主体 | main | 新闻 | news |
| 版权 | copyright | 文章列表 | list | 加入 | joinus | 合作伙伴 | partner |
| 标志 | logo | 侧栏 | sidebar | 横幅 | banner | 状态 | status |
| 菜单 | menu | 子菜单 | submenu | 滚动 | scroll | 搜索 | search |
| 标签页 | tab | 提示信息 | msg | 小技巧 | tips | 标题 | title |
| 指南 | guild | 服务 | service | 热点 | hot | 下载 | download |
| 注册 | regsiter | 登录条 | loginbar | 按钮 | btn | 投票 | vote |
| 注释 | note | 友情链接 | friend-link | 外套 | wrap | 面包屑 | bread-crumb |
| 当前的 | current | 购物车 | shop | 图标 | icon | 文本 | txt |
选择器的命名，选择器应该在满足功能的基础上尽量简短，减少选择器嵌套，查询消耗。但是一定要避免覆盖全局样式设置。
如果可以，颜色尽量用三位字符表示，例如#AABBCC写成#ABC
如果没有边框时，不要写成border:0，应该写成border:none；
css中的注释，以何种方式添加注释，我就不做说明，因个人而异，只是我想说一下注释与其上面的内容最好空两行，这样易于阅读查找。
5.js说明
由于本人现在对于js这块也是一个缺角，学艺不精，也不想班门弄斧，只是想再次提一下引入js的位置，</body>结束之前。
三、图片
图片的处理，特别是在移动端来，对于前端来说是一个挑战性问题。图片大小影响页面加载速度重要因素之一。我就对对于HTML移动页面的图片进行略微的说明
html移动页图片说明：
（1） 宽度为全屏的内容图片的实际宽度为640px
为什么是640px?
在手机移动端，符合不同设备不同分辨率情况下， 响应式区间为【0 - 640px】，平板响应式区间【641px - 1024px】，故而移动端HTML页面
图片实际宽度设置为640px; 然后设置图片宽度相对于其父元素100%，如此适应不同分辨率的图片。
（2）对图片进行压缩
首先在拿到设计稿时编写页面时使用photoshop进行首次压缩（shift+Ctrl+alt+S快捷键）,后来进行优化时，为了提高页面加载速度，各种想办法，但是得保证图片质量不变的情况下，使用一个软件工具对图片里的属性进行压缩，还需提到这个软件只能在苹果电脑安装。
如果没有动画，也没有半透明效果，则保存成png-8
如果有半透明效果，则保存成png-24
PS: 记性太差，做过的、体会到的，不记录下来就会风而去，哈哈是时间，再者在以后的开发中有了这些就不会盲目不需要重头开始。由于技术有限，有考虑不周的欢迎纠正。
———— 一个安静、不粗暴前端领域的手艺人
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
