A-A+

Web前端 工作注意事项整理

2018年08月30日 日志 暂无评论 阅读 170 次

1、Web前端规范 3

1.1 文件规范    3
1.1.1所有文件放在static目录下    3
1.1.2 文件引入  3
1.1.3 文件名、文件编码  3
1.2 注释规范    3
1.2.1 样式文件注释    3
1.2.2 页面文件注释    3
1.3 命名规范    4
1.3.1使用有意义的或通用的ID和class命名   4
1.3.2 避免同时使用标签、ID和class作为定位一个元素选择器  4
1.3.3 命名时需要注意的事项    4
1.3.4 常用class名  4
1.4 书写规范    5
1.4.1 排版规范  5
1.4.2 属性编写顺序    6
1.4.3 代码性能优化    6
3、我们的约定 7

1、Web前端规范

1.1 文件规范

1.1.1所有文件放在static目录下

  • 样式文件:static/css/main.css
  • 图片文件:static/images/
  • 整站js文件:static/js/jquery.js、mian.js
  • 插件css和js文件:static/lib/swiper/swiper.css、swiper.js
  • 测试图片:static/data/

1.1.2 文件引入

link和style标签都应该放入head中,原则上,不允许在html上直接写样式。

1.1.3 文件名、文件编码

  • 静态模板中页面文件名采用psd文件名,便于程序查找套用;
  • 文件必须用UTF-8编码,使用UTF-8(非BOM)。

1.2 注释规范

1.2.1 样式文件注释

  • 添加作者注释:/author:张三/
  • 添加模块注释:/basic/、/head/、/foot/...
  • 添加特殊功能注释:/xxx弹框/、/鼠标悬浮样式/...

1.2.2 页面文件注释

  • 添加页面框架布局注释:...
  • 添加特殊功能注释:...
  • 添加标签结束注释:...

1.3 命名规范

1.3.1使用有意义的或通用的ID和class命名

如:#login {}.video {}.aux {}.alt {}...

1.3.2 避免同时使用标签、ID和class作为定位一个元素选择器

如:ul#example {}div.error {}...

1.3.3 命名时需要注意的事项:

  • 规则命名中,一律采用小写加中划线的方式,不允许使用大写字母或_
  • 避免class和id名重复
  • 尽可能提高代码模块的复用,样式尽量用组合的方式
  • 尽量避免通过1、2、3等序号进行命名

1.3.4 常用class名

  • a、颜色:使用颜色的名称或者16进制代码
    如:.red { color: red; }、.f60 { color: #f60; }...
  • b、字体大小,直接使用”font+字体大小”作为名称
    如:.font12px { font-size:12px;}...
  • c、对齐样式,使用对齐目标的英文名称
    如:.left { float:left;}...
  • d、根据结构、功能命名,如:
    • 导航:nav
    • 主导航:mainbav
    • 子导航:subnav
    • 顶导航:topnav
    • 边导航:sidebar
    • 左导航:leftsidebar
    • 右导航:rightsidebar
    • 菜单:menu
    • 子菜单:submenu
    • 标题: title
    • 摘要: summary
    • 标志:logo
    • 广告:banner
    • 登陆:login
    • 登录条:loginbar
    • 注册:regsiter
    • 搜索:search
    • 功能区:shop
    • 加入:joinus
    • 状态:status
    • 按钮:btn
    • 滚动:scroll
    • 标签页:tab
    • 文章列表:list
    • 提示信息:msg
    • 当前的: current
    • 小技巧:tips
    • 图标: icon
    • 注释:note
    • 指南:guild
    • 服务:service
    • 热点:hot
    • 新闻:news
    • 下载:download
    • 投票:vote
    • 合作伙伴:partner
    • 友情链接:link
    • 版权:copyright

1.4 书写规范

1.4.1 排版规范

  • a、使用4个空格,而不使用tab或者混用空格+tab作为缩进
  • b、每一条规则的大括号 { }前后加空格
  • c、每一个属性值后必须添加分号; 并且分号后空格

1.4.2 属性编写顺序

  • a、显示属性:display/list-style/position/float/clear …
  • b、自身属性(盒模型):width/height/margin/padding/border
  • c、背景:background
  • d、行高:line-height
  • e、文本属性:color/font/text-decoration/text-align/text-indent
    /vertical-align/white-space/content…
  • f、其他:cursor/z-index/zoom/overflow
  • g、CSS3属性:transform/transition/animation/box-shadow/border-radius
  • h、如果使用CSS3的属性,如果有必要加入浏览器前缀,则按照 -webkit- / -moz- / -ms- / -o- / std的顺序进行添加,标准属性写在最后。
  • i、链接的样式请严格按照如下顺序添加: a:link -> a:visited -> a:hover -> a:active

1.4.3 代码性能优化

  • 合并margin、padding、border的设置,尽量使用短名称;
  • 选择器应该在满足功能的基础上尽量简短,减少选择器嵌套,查询消耗。但是一定要避免覆盖全局样式设置;
  • 除非必须,否则,一般有class或id的,不需要再写上元素对应的tag;
  • 0后面不需要单位,比如0px可以省略成0,0.8px可以省略成.8px;
  • 如果可以,颜色尽量用三位字符表示,例如#AABBCC写成#ABC;
  • 如果没有边框时,不要写成border:0,应该写成border:none;
  • 在保持代码解耦的前提下,尽量合并重复的样式;
  • background、font等可以缩写的属性,尽量使用缩写形式;
  • i、为了防止文件合并及编码转换时造成问题,建议将样式中文字体名字改成对应的英文名字,如:黑体- (SimHei) 宋体(SimSun) 微软雅黑 (Microsoft Yahei,几个单词中间有空格组成的必须加引号);
  • j、font-size必须以px或pt为单位,推荐用px(注:pt为打印版字体大小设置),不允许使用xx-small/x-small/small/medium/large/x-large/xx-large等值;
  • k、背景图片请尽可能使用sprite技术, 减小http请求。

2、我们的约定

  • a、 主样式文件统一命名main.css,整站js文件统一命名mian.js;
  • b、input 一般需有padding值,建议padding:5px 10px;
  • c、标题超出时使用css属性控制加省略号并隐藏多余部分;
  • d、隐藏部分需添加title属性,使用户可以看到被隐藏内容;
  • e、提交按钮一律采用模拟效果;
  • f、页面套完程序后前端需要测试检查,完善、优化细节样式,特别是用户中心,需要注册账号,按照流程一步一步检查每一个页面;
  • g、用户中心无内容页面,建议左右两边高度保持一致;
  • h、按钮、鼠标悬浮有变化等元素块需要将鼠标形状改为手型。
  • i、radio、checkbox、select等浏览器有默认样式的需要使用模拟效果实现。

3、其他:

切图样式存放路径规定:
1. 分为三个项目:商城、投资、会员,切图分开存放。每个项目文件下分为以下文件夹:
2. date文件夹存放数据文件,后期维护变化的图片。
3. static文件夹下面分为以下几个文件夹:按文件的性质分别存放在相应的文件夹下。

03Web前端工作注意事项## 目录

给我留言

Copyright © web前端技术开发个人博客 保留所有权利.   Theme  Ality

用户登录