开发工具:
文件大小: 281kb
下载次数: 0
上传时间: 2019-03-03
详细说明：
详细的前端开发规范柠檬学院WEB前端开发规范
在编码思想上,我们可以将页面拆分成不同的层级(布局、模块、元件)。
什么是CSS命名空间?
通过统一的命名规范定义命名的范围,成为 css class&id命名空间
布局:以语义化的单词| ayout作为命名空间,例如主栏布局命名 layout-main,
只改变 layout-命名空间后面的命名, layout始终保留。布局的命名空间为 layout-XXx
模块:灰面是由一个或多个模块组成,模块的英文单词是 module,规范筍写成mod,如新闻模块 mod-news,照片展示模块
mod-photo-show。模块的命名空间为 mod-xxx。
元件:元件是属于模块内部的,也可以说模块是由元件和它内部的自有元素组成。如用户照片信息元件 cell-user-photo。元件的命名空
同为 cell-xXX
23.添加文档样式
1)引用外部文件方式添加样式
2)严禁编写标记内代码,比如就应该写成,然后在样式表中去完成样式
代码编写。
3)严禁在文档中使用< style type="text/css">代码块
4)如果是发布版本,请压缩合并代码,将多个样式文件合并为单个文件,在线css代码压缩工具
http://www.csscompressor.com/
24.属性简写
为了节省字节数及文件大小,以卜属性请使用简写方式:
padding
top right bottom left
marg
top right bottom left
border.
style width color
border-top
style width color
border-right
style width color
border-bottom: style width color
border-left:
style width color
border-color
top right bottom left
top right bottom left
border-width
top right bottom left
background
color url(image) repeat position;
list-style:
type position url(image)
font-weight
400/700;
25.字体
1)仝局定义字体:boy{ont:12 px arial, helvetica,sans- serif; line-height:15;}
2) font-family
)等宽字体组合:Aral, Helvetica, sans-serit;
b)不等宽(宽扁)字体组合: Verdana, Trebuchet ms,sans- serif
中文字体:除非内容文木需要,不推荐强制定义
9
柠檬学院WEB前端开发规范
26.编写兼容的CSS代码
1)页面必须在ie6~8、 firefox、 opera、 safari、 chrome下显示兼容
2)尽量不使用拒E有条件注释方式,对某一版本浏览器编写额外的样式表。针对某一版本浏览器编写额外的样式表,
会对维护和管理照成困难。如出现有显示不兼容现象应首先考虑代码是否有问题(如属性是否对当前浏览器支
持),必须编写与常用浏览尜都兼容的代码;
不推荐的引用方式
:![if IE 6
H[endif]
3)尽量不要使用! important或下划线等招数编写代码
27.CSS通用命名
(1)页面框架命名,一般具有唯一性,推荐用D命名
ID名称
命名
1D名称
命名
头部
heade
主体
main
脚部
footer
容器
wrapper/ container
side-bar
栏目
column
布局
layout
(2模块结构命名
CLASS名称
命名
CLASS名称
命名
模块(如:新闻模块)mod( mod-news)
标题栏
title
内容
content
次级内容
sub-content
(2)导航结构命名
CLASS名称
命名
CLASS名称
命名
导航
nav
主导航
ma lahav
子导航
ub
nav
顶部导航
top-nav
菜单
menu
子菜单
sub-menu
(3)一般元素命名
CLASS名称
命名
CLASS名称
命名
二级
sub
面包屑
breadcrumb
标志
ogo
广告
Bner
4/19
柠檬学院WEB前端开发规范
(禁用 banner或ad)
登陆
login
注册
regsiter/ reg
搜索
search
加入
JoIn
状态
status
按钮
btn
滚动
O11
标签页
tab
文章列表
list
短消息
msg/ message
当前的
current
提示小技巧
tips
图标
注释
note
指南
gui de
服务
service
热点
hot
新闻
news
下载
download
投票
vote
合作伙伴
partner
友情链接
link
版权
copyright
demo
下拉框
select
摘要
summary
翻页
pages
主题风格
themes
设置
set
成功
按钮
文本
颜色
color/
背景
边框
border/bor
居中
center
上
o/t
bottom/b
左
left/l
右
ht/r
add
删除
e
间隔
sp
段落
p
弹出层
pop
公共
global/gb
操作
密码
pwd
透明
tran
info
重点
hit
顶览
pVw
单行输入框
nput
首页
index
日志
blog
相册
photo
留言板
guestbook
用户
user
confirm
取消
cancel
报错
error
3.图片部分
1)背景图片:bg001,bg002,b8003.
2)一股图片:imgo01mg0o2,img003
3)特定图片:如 banner,logo按照具体情况命名
4)按钮图片:btn- submit,btn- cancel.
5/19
柠檬学院WEB前端开发规范
5)运用 css sprite技术集中小的背景图或图标,减小页面htte请求,但注意,请务必在对应的 sprite psd源图中划参
考线,并保存至 images目录下
6)图片格式仅限于 gif png jpg
刁)在保证视觉效果的情况下选择最小的图片格式与图片质量,以减少加载吋间
4. JavaScript部分
4,1.Js命名规范:
1)」s文件命名:英文命名,后缀Js.共用 wichung-common j,其他依实际模块需求命名
42.在文档中引用js
1)使用外部文件方式引用js:
2)将引用js的代码集中放置在一起,可放置在之前或之前,严禁在boy间分散放置;
3)使DOM结构和js代码分离,禁止写在标记内部
4)如果是发布版本,请将多个稳定版本的j文件压缩、归类放置到单个文件内,压缩和最小化j文件,在线 packer
压缩工具:http://dean.edwards.name/packer/
5)引入J5斥文件,文件名须包含库名称及版本号及是否为压缩版,比如 jquery-1.4.1 min. s;引入插件,文件名格式
为库名称+插件名称,比如 jQuery. cookie. js;
4.3.优化 jQuery代码,提高性能:
1.原则上仅引入 jQuery库,若需引入第三方库,须与团队其他人员讨论决定;
2. jQuery变量命名: Sname,普通变量命名:name;
3.选择器从最近的D开始继承或直接使用1D选择器:S(# id tag");
4.选择器在使用cass前加上标签名:S('span.span1")
5.尽量使用1D选择器代替cas
6.要获取子元素请使用子选择器,而不要使用后代选择器:S("d>span");
7.缓存 jQuery对象,不要在代码中重复山现相同的选择器: var btη=S("#id");
8.使用data(存储临时变量;
9.避免使用lve0方法绑定事件
10.在父级元素监听事件,对目标元素进行操作
S(#id"). click(function(e)var input=S(e. target): 1
11.推迟加载拖放、动画、视觉特效等代码,把可能会影响页面加载速度的代码绑定到S( window)Joad事件中。
下面是一些关于 jQuery优化方面的建议
1,总是从D选择器开始继承
在 jQuery中最快的选择器是ID选择器,因为它直接来自于 JavaScript的 get element Byld0方法。
例如有一段HTML代码:
6/19
柠檬学院WEB前端开发规范
如果采用下面的选择器,那么效率是低效的
var traffic-button=S(#content. button");
因为 button已经有1D了,我们可以直接使用ID选择器。如卜所示:
var traffic-button = S(#traffic-button"
当然这只是对于单一的元素来讲。如果你需要选择多个元素,这必然会涉及到DoM遍历和循环,
为了提高性能,建议从最近的ID开始继承。
如下所示:
yar traffic- lights= S(#traffic-light input!")
2,在cass前使用tag(标签名)
在 jQuery中第快的选择器是tag(标签)选择器(比如:S("head"))
眼ID选择器累时,因为它来自原生的 getElements By TagName()方法。
继续看刚才那段HTML代码:
交通信号灯
