您的位置：首页 > Web前端

前端开发的一些实践规范

2017-07-23 22:31 239 查看

一、HTML实践

使用标准的

HTML5

简化的定义的方式

定义文档类型

<!DOCTYPE
html>

定义页面的编码

<meata
charset="UTF-8">

样式和页脚的引用，不需要写

type

类型，如

link

script

停止使用不标准的标签和属性，如

mqrquee

不推荐在

HTML

标签中添加样式属性，如

img

标签中添加宽高
不要使用

@import

，此方式最大的缺点是引用

css

文件不能同时并行下载
增加

JavaScript

禁用的提示信息，最常用的方式是使用

<noscript>

添加必要的

meta

标签
使用频率较高的语义化标签

ul

dl

em

strong

table

site

blockquote

nav

header

footer

article

section

aside

hground

样式和结构的分离：把

HTML

中用于表达外观的部分从HTML中删除，并用css实现。如

<span>|</span>

中的

用css的伪类实现即可
如果图片作为页面内容的一部分，应该使用

img

标签，如果图片仅仅是装饰作用，应该使用背景图片方式
提高表单易用性的手段

使用

label

标签，并设置

label

标签的

for

属性
给输入控件设置合理的

placehoder

如有必要，给输入控件设置

tab

顺序，

tabindex

用来设置输入控件的切换顺序

<input
type="text" tabindex="2">

使用

HTML5

中引入的表单控件

url
email date search

精简

HTML

代码
删除多余的容器
装饰性的元素使用

css

实现
避免使用

table

布局

二、CSS实践

推荐的

css

类的命名规则和元素的

id

命名规则相似，只是组成类名的关键字的连接符为中划线

.reder-content-title

为了避免

class

命名的重复，命名时取父元素的

class

作为前缀

使用

css
reset

统一浏览器的显示效果
给

css

样式定义排序，最佳是按类型分组排序

显示与浮动、定位、尺寸、边框相关属性、字体样式、背景、其他样式

合理利用

css

的权重，提高代码的重用性

css

样式中尽量不要使用

ID

选择器，最佳实践尽可能使用较低权重的选择器作为基础样式
减少自选择器的层级
使用组合的

css

选择器

em

px

w3c

把尺寸单位分为相对长度单位和绝对长度单位两种。
相对长度单位又分为字体相对单位和视窗相对单位

字体相对单位包括：

em

ex

ch

rem

视窗相对单位包括：

vw

vh

vmin

vmax

使用最广泛的是

em

px

百分比

em

计算是相对自身元素的字体尺寸的，

rem

相对于根元素的字体大小计算，
百分比是相对于父元素的尺寸的
如何设置元素的尺寸和字体大小最佳实践

尽量设置相对尺寸（局部的尺寸要尽量使用相对尺寸，即局部自适应）
只有在可预知元素尺寸的情况下才使用绝对尺寸
使用

em

设置字体大小

css

选择器定义最佳实践

避免使用通配符
避免使用标签选择器及单个属性选择器作为关键选择器
不要在

id

选择器前使用标签名
尽量不要使在选择符中定义过多的层级，最好不要超过三层

css

相关图片处理

不要设置图片尺寸
使用

css

雪碧图技术
减少

css

代码量

定义简洁的

css

规则
合并相关的

css

规则
定义简洁的属性值合并相同的定义

三、JavaScript实践

避免定义全局变量或函数

使用

var

使用

JavaScript

的严格模式

use
strict;

使用简化的编码方式

对象创建

pserson={age:22,name:"poetries"}

数组创建

list=[12,23,55]

使用

===

和

!==

而不是

==

和

!=

避免使用

with

语句和

eval()

使用更严格的编码格式

使用严格模式遵循：

不要在全局中启用严格模式
在已有代码中谨慎使用严格模式

严格模式主要对不合理的地方做了改进

禁用

width

关键字
防止意外的全局变量
函数中的

this

不在默认指向全局
防止函数参数重命名
更安全的使用

eval()

事件处理和业务逻辑相分离
配置数据和代码逻辑相分离
逻辑与结构相似相分离

从

JavaScript

逻辑中分离

css

样式
从

JavaScript

中分离

HTML

结构

JavaScript

模块化的开发，提高代码的可维护性

JavaScript

的两种模块化规范

ComonJS

AMD

两者的主要区别在加载模块的方式上

ComonJS

以同步的方式加载，使用

require()

方法来加载模块

AMD

以异步的方式加载模块

合理使用

Ajax

技术，适合的使用场景有

前端会根据用户的需求动态取得后端数据，然后更新网页界面
期望通过不刷新页面取得任何资源或页面
动态进行用户输入的认证

四、附录

附录一
DIV命名规范

企业

DIV

使用频率高的命名方法

网页内容类

标题:

title

摘要:

summary

箭头：

arrow

商标：

label

网站标志：

logo

转角/圆角：

corner

横幅广告：

banner

子菜单：

subMenu

搜索：

search

搜索框：

searchBox

login

登录条：

loginbar

工具条：

toolbar

下拉：

drop

标签页：

tab

当前的：

current

列表：

list

滚动：

scroll

服务：

service

提示信息：

msg

热点：

hot

新闻：

news

小技巧：

tips

下载：

download

栏目标题：

title

热点：

hot

加入：

joinus

regsiter

指南：

guide

友情链接：

friendlink

状态：

status

版权：

copyright

按钮：

btn

合作伙伴：

partner

投票：

vote

左右中：

left

right

center

注释的写法:

/*
Footer */

内容区

/*
End Footer */

id的命名:

页面结构

容器:

container

页头：

header

内容：

content

container

页面主体：

main

页尾：

footer

导航：

nav

侧栏：

sidebar

栏目：

column

页面外围控制整体布局宽度：

wrapper

左右中：

left

right

center

导航

导航：

nav

主导航：

mainbav

子导航：

subnav

顶导航：

topnav

边导航：

sidebar

左导航：

leftsidebar

右导航：

rightsidebar

菜单：

menu

子菜单：

submenu

标题:

title

摘要:

summary

功能

标志：

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

class

的命名:

颜色:使用颜色的名称或者16进制代码,如

.red
{ color: red; }

.f60
{ color: #f60; }

.ff8600
{ color: #ff8600; }

字体大小,直接使用”font+字体大小”作为名称,如

.font12px
{ font-size: 12px; }

.font9px
{font-size: 9pt; }

对齐样式,使用对齐目标的英文名称,如

.left
{ float:left; }

.bottom
{ float:bottom; }

标题栏样式,使用”类别+功能”的方式命名,如

.barnews
{ }

.barproduct
{ }

注意事项::

一律小写;
尽量用英文;
不加中杠和下划线;
尽量不缩写，除非一看就明白的单词.

推荐的

CSS

书写顺序：

显示属性

display

list-style

position

float

clear

自身属性

width

height

margin

padding

border

background

文本属性

color

font

text-decoration

text-align

vertical-align

white-space

other
text

content

附录二
CSS精灵

CSS精灵原理以及应用

CSS

雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。

该图片使用

CSS

background和background-position

属性渲染，这也就意味着你的标签变得更加复杂了，图片是在

CSS

中定义，而非

<img>

标签。

一个简单的例子：

一张图片作出一个按钮的三个状态
一个链接用

CSS

做成按钮的样式，我们可以使用同一张图片，完成按钮的三个状态，

a:link

，

a:hover

，

a:active

<a
class="button" href="#">链接</a>

加入右侧的图片为：

200px
65px

的三个按钮图拼合而成的图片

button.png

，从上到下一次为按钮的普通、鼠标滑过、鼠标点击的状态。则可以使用

CSS

进行定义。

12345678910111213141516171819

a {    display:block;     width:200px;     height:65px;     line-height:65px; /*定义状态*/    text-indent:-2015px; /*隐藏文字*/    background-image:url(button.png); /*定义背景图片*/    background-position:0 0;    /*定义链接的普通状态，此时图像显示的是顶上的部分*/}a:hover {    background-position:0 -66px;    /*定义链接的滑过状态，此时显示的为中间部分，向下取负值*/}a:active {    background-position:0 -132px;                          /*定 义链接的普通状态，此时显示的是底部的部分，向下取负值*/}

更多的

CSS

雪碧，图片更复杂，背景定位更精确。可能会用到大量的数值

如：

background:url(nav.png)
-180px 24pxno-repeat

; 来达到更精确的定位

优点：

减少加载网页图片时对服务器的请求次数
可以合并多数背景图片和小图标，方便在任何位置使用，这样不同位置的请求只需要调用一个图片，从而减少对服务器的请求次数，降低服务器压力，同时提高了页面的加载速度，节约服务器的流量。
提高页面的加载速度

sprite

技术的其中一个好处是图片的加载时间(在有许多

sprite

时，单张图片的加载时间)。由所需图片拼成的一张

GIF

图片的尺寸会明显小于所有图片拼合前的大小。单张的

GIF

只有相关的一个色表，而单独分割的每一张

GIF

都有自己的一个色表，这就增加了总体的大小。因此，单独的一张

JPEG

或者

PNG

sprite

在大小上非常可能比把一张图分成多张得来的图片总尺寸小。
减少鼠标滑过的一些

bug

IE6

不会主动预加载鼠标滑过即

a:hover

中的背景图片，所以，如果使用多张图片，鼠标滑过会出现闪白的现象。使用

CSS

雪碧，由于一张图片即可，所以不会出现这种现象。

不足：

CSS

雪碧的最大问题是内存使用
影响浏览器的缩放功能
拼图维护比较麻烦
使

CSS

的编写变得困难

CSS

雪碧调用的图片不能被打印
错误得使用

Sprites

影响可访问性

附录三
一些tips解决方案

页面优化实践

从下面的几个方面可以进行页面的优化：

减少请求数
图片合并

CSS

文件合并
减少内联样式
避免在

CSS

中使用

import

减少文件大小
选择适合的图片格式
图片压缩

CSS

值缩写（

Shorthand
Property

)
文件压缩
页面性能
调整文件加载顺序
减少标签数量
调整选择器长度
尽量使用

CSS

制作显示表现
增强代码可读性与可维护性
规范化
语义化
模块化

写DIV+CSS
的一些常识

不要使用过小的图片做背景平铺

这就是为何很多人都不用

1px

的原因，这才知晓。宽高

1px

的图片平铺出一个宽高

200px

的区域，需要

200200=40,
000

次，占用资源

无边框

推荐的写法是

border:none

;，哈哈，我一直在用这个。

border:0;

只是定义边框宽度为零，但边框样式、颜色还是会被浏览器解析，占用资源

慎用通配符

所谓通配符，就是将

CSS

中的所有标签均初始化，不管用的不用的，过时的先进的，一视同仁，这样，大大的占用资源。要有选择的初始化标签。

CSS

的十六进制颜色代码缩写

习惯了缩写及小写，这才知道，原来不是推荐的写法，为的是减少解析所占用的资源。但同时会增加文件体积。孰优孰劣，有待仔细考证。

样式放头上，脚本放脚下。不内嵌，只外链

坚决不用

CSS

表达式

使用引用样式表，而不是通过

@import

导入。

一般来说，

PNG

比

GIF

要小，小得多。再者，

GIF

中有多少颜色是被浪费的，很值得优化。

千万不要在

HTML

中缩放图片，一者不好看，二者占资源。

正文字体最好用偶数

12px

、

14px

、

16px

，效果非常好。特例，

15px

。

block

、

ul

、

ol

等上下留出至少一倍行距，左侧至少两倍行距，右侧随意。

段落之间，至少要有一倍行距

强行指定某些元素的

line-height

，正文

1.6

倍于文字大小，标题

1.3

倍。

中文标点用全角

英文夹杂在中文中，左右空格，半角。

中文字体的粗体和斜体，远离较好

[建议] HTML 标签的使用应该遵循标签的语义

下面是常见标签语义

-
段落

h1,h2,h3,h4,h5,h6

-
层级标题

strong,em

-
强调

ins

-
插入

del

-
删除

abbr

-
缩写

code

-
代码标识

cite

-
引述来源作品的标题

-
引用

blockquote

-
一段或长篇引用

ul

-
无序列表

ol

-
有序列表

dl,dt,dd

-
定义列表

常用代码片段

雅虎工程师提供的

CSS

初始化示例代码【仅供参考】

可以在

html

头文件中直接引用，从而避免浏览器的不兼容带来的错误。

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td {     margin:0; padding:0; }body {    background:#fff;     color:#555;     font-size:14px;     font-family: Verdana, Arial, Helvetica, sans-serif; }td,th,caption {     font-size:14px;}h1, h2, h3, h4, h5, h6 {     font-weight:normal;     font-size:100%; }address, caption,cite, code, dfn, em, strong,th, var {     font-style:normal;     font-weight:normal;}a {     color:#555;     text-decoration:none; }a:hover {     text-decoration:underline; }img {    border:none;}ol,ul,li {     list-style:none; }input, textarea, select, button {     font:14px Verdana,Helvetica,Arial,sans-serif; }table {     border-collapse:collapse; }html {    overflow-y: scroll;} .clearfix:after {    content: ".";     display: block;     height:0;     clear:both;     visibility: hidden;}.clearfix {     *zoom:1; }

现代浏览器

cssreset

解决方案【推荐使用这个】

normalize.css

mobile
meta

标签

1	<meta name=”viewport” content=”width=320,target-densitydpi=dpi_value,initial-scale=1, user-scalable=no”/>

表格不被撑开

1	table-layout: fixed; word-break: break-all;;border-collapse: collapse

不设宽高居中

<div id=”abc” style=”display:table;text-align:center;width:100%;height:100%;”>      <span style=”background:#f00; display:table-cell; vertical-align:middle;”>            <input type=”button” value=”item1″ />      </span></div>

透明度的兼容代码

1234	filter:alpha(opacity=50); /1-100/-moz-opacity:0.5; /0-1.0/-khtml-opacity:0.5; /0-1.0/opacity:0.5; /0-1.0/

文本溢出的几种处理方法

简单隐藏

1	div.hide{overflow:hidden}

使用滚动条

1	div.scroll{overflow:scroll}

简单裁切

div.clip{	border:1px solid;	overflow:hidden;/*超出隐藏*/	white-space:nowrap;/*强制在一行显示*/	text-overflow:clip;/*裁切*/}

超出部分省略号

div.elli{	overflow:hidden;	white-space:nowrap;	text-overflow:ellipsis;/*使用省略号*/}

清除浮动的几种方法

方法一：

投机取巧法

–
不推荐

直接一个放到当作最后一个子标签放到父标签那儿，此方法屡试不爽，兼容性强

方法二：

overflow
+ zoom

方法 –不推荐

.fix{overflow:hidden;
zoom:1;}

此方法优点在于代码简洁，涵盖所有浏览器

方法三：

after
+ zoom

方法 -推荐–此方法可以说是综合起来最好的方法了

clearfix

只应用在包含浮动子元素的父级元素上

12345678

.clearfix{zoom:1;}.clearfix:after{     display:block;      content:'clear';      clear:both;     line-height:0;      visibility:hidden;}

方法四在方法三的基础上的最优雅的做法【推荐】

12345678

.clearfix:after,.clearfix:before {/*before 是为了防止浏览器顶部空白的崩溃*/        content: " ";        display: table;}.clearfix:after {        clear: both;}

清除浮动的原理是触发

BFC

，这里只有

clear:both

起清除浮动作用，其他的

line-height:0;
visibility:hidden;

都是为了隐藏生的内容需要的

拓展阅读

CSS中的浮动和清除浮动
实用的60个CSS代码片段

一些总结

自动继承属性：

color

font

text-align

list-style

…

非继承属性：

background

border

position

…

具有破坏性的元素：

float

display:none;

position:absoblute/fixed/sticky;

具有包裹性的元素：

display:inline-block/table-cell

position:absolute/fixed/sticky

overflow:hidden/scroll

消除图片底部间隙的方法

图片块状化-无基线对齐

img{display:block;}

图片底线对齐

img{vertical-align:bottom;}

行高足够小 - 基线位置上移

.box{line-height:0;}

参考

web

前端开发最佳实践

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航