前端开发的一些实践规范
一、HTML 实践
- 使用标准的
HTML5简化的定义的方式- 定义文档类型
<!DOCTYPE html> - 定义页面的编码
<meata charset="UTF-8"> - 样式和页脚的引用，不需要写
type类型，如linkscript
- 定义文档类型
- 停止使用不标准的标签和属性，如
mqrquee - 不推荐在
HTML标签中添加样式属性，如img标签中添加宽高 - 不要使用
@import，此方式最大的缺点是引用css文件不能同时并行下载 - 增加
JavaScript禁用的提示信息，最常用的方式是使用<noscript> - 添加必要的
meta标签 - 使用频率较高的语义化标签
puldlpemstrongtablesiteblockquotenavheaderfooterarticlesectionasidehground
- 样式和结构的分离：把
HTML中用于表达外观的部分从 HTML 中删除，并用 css 实现。如<span>|</span>中的|用 css 的伪类实现即可 - 如果图片作为页面内容的一部分，应该使用
img标签，如果图片仅仅是装饰作用，应该使用背景图片方式 - 提高表单易用性的手段
- 使用
label标签，并设置label标签的for属性 - 给输入控件设置合理的
placehoder - 如有必要，给输入控件设置
tab顺序，tabindex用来设置输入控件的切换顺序<input type="text"> - 使用
HTML5中引入的表单控件url email date search - 精简
HTML代码 - 删除多余的容器
- 装饰性的元素使用
css实现 - 避免使用
table布局
- 使用
二、CSS 实践
- 推荐的
css类的命名规则和元素的id命名规则相似，只是组成类名的关键字的连接符为中划线-.reder-content-title- 为了避免
class命名的重复，命名时取父元素的class作为前缀
- 为了避免
- 使用
css reset统一浏览器的显示效果 - 给
css样式定义排序，最佳是按类型分组排序- 显示与浮动、定位、尺寸、边框相关属性、字体样式、背景、其他样式
- 合理利用
css的权重，提高代码的重用性css样式中尽量不要使用ID选择器，最佳实践尽可能使用较低权重的选择器作为基础样式- 减少自选择器的层级
- 使用组合的
css选择器 empx%w3c把尺寸单位分为相对长度单位和绝对长度单位两种。- 相对长度单位又分为字体相对单位和视窗相对单位
- 字体相对单位包括：
emexchrem - 视窗相对单位包括：
vwvhvminvmax - 使用最广泛的是
empx百分比
- 字体相对单位包括：
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的两种模块化规范ComonJSAMD- 两者的主要区别在加载模块的方式上
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 - 左右中：
leftrightcenter
- 摘要:
- 注释的写法:
/* Footer */内容区/* End Footer */
- 标题:
- id 的命名:
- 页面结构
- 容器:
container - 页头：
header - 内容：
content/container - 页面主体：
main - 页尾：
footer - 导航：
nav - 侧栏：
sidebar - 栏目：
column - 页面外围控制整体布局宽度：
wrapper - 左右中：
leftrightcenter
- 容器:
- 导航
- 导航：
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 { }
- 注意事项::
- 一律小写;
- 尽量用英文;
- 不加中杠和下划线;
- 尽量不缩写，除非一看就明白的单词.
- 颜色:使用颜色的名称或者 16 进制代码,如
- 页面结构
- 推荐的
CSS书写顺序：- 显示属性
displaylist-stylepositionfloatclear
- 自身属性
widthheightmarginpaddingborderbackground
- 文本属性
colorfonttext-decorationtext-alignvertical-alignwhite-spaceother textcontent
- 显示属性
附录二 CSS 精灵
- CSS 精灵原理以及应用
CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的 HTTP 请求数量。- 该图片使用
CSSbackground 和 background-position属性渲染，这也就意味着你的标签变得更加复杂了，图片是在CSS中定义，而非<img>标签。
- 该图片使用
- 一个简单的例子：
- 一张图片作出一个按钮的三个状态
- 一个链接用
CSS做成按钮的样式，我们可以使用同一张图片，完成按钮的三个状态，a:link，a:hover，a:active<a class="button" href="#">链接</a> - 加入右侧的图片为：
200px 65px的三个按钮图拼合而成的图片button.png，从上到下一次为按钮的普通、鼠标滑过、鼠标点击的状态。则可以使用CSS进行定义。
a { |
- 更多的
CSS雪碧，图片更复杂，背景定位更精确。可能会用到大量的数值- 如：
background:url(nav.png) -180px 24pxno-repeat; 来达到更精确的定位
- 如：
- 优点：
- 减少加载网页图片时对服务器的请求次数
- 可以合并多数背景图片和小图标，方便在任何位置使用，这样不同位置的请求只需要调用一个图片，从而减少对服务器的请求次数，降低服务器压力，同时提高了页面的加载速度，节约服务器的流量。
- 提高页面的加载速度
sprite技术的其中一个好处是图片的加载时间（在有许多sprite时，单张图片的加载时间)。由所需图片拼成的一张GIF图片的尺寸会明显小于所有图片拼合前的大小。单张的GIF只有相关的一个色表，而单独分割的每一张GIF都有自己的一个色表，这就增加了总体的大小。因此，单独的一张JPEG或者PNGsprite在大小上非常可能比把一张图分成多张得来的图片总尺寸小。- 减少鼠标滑过的一些
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 标签的使用应该遵循标签的语义
- 下面是常见标签语义
p- 段落h1,h2,h3,h4,h5,h6- 层级标题strong,em- 强调ins- 插入del- 删除abbr- 缩写code- 代码标识cite- 引述来源作品的标题q- 引用blockquote- 一段或长篇引用ul- 无序列表ol- 有序列表dl,dt,dd- 定义列表
- 下面是常见标签语义
常用代码片段
- 雅虎工程师提供的
CSS初始化示例代码【仅供参考】- 可以在
html头文件中直接引用，从而避免浏览器的不兼容带来的错误。
- 可以在
body, |
- 现代浏览器
cssreset解决方案【推荐使用这个】 mobile meta标签
<meta name=”viewport” content=”width=320,target-densitydpi=dpi_value,initial-scale=1, user-scalable=no”/> |
- 表格不被撑开
table-layout: fixed; word-break: break-all;;border-collapse: collapse |
- 不设宽高居中
<div id=”abc” style=”display:table;text-align:center;width:100%;height:100%;”> |
- 透明度的兼容代码
filter:alpha(opacity=50); /*1-100*/ |
- 文本溢出的几种处理方法
- 简单隐藏
div.hide{overflow:hidden} |
- 使用滚动条
div.scroll{overflow:scroll} |
- 简单裁切
div.clip{ |
- 超出部分省略号
div.elli{ |
- 清除浮动的几种方法
- 方法一：
投机取巧法– 不推荐- 直接一个放到当作最后一个子标签放到父标签那儿，此方法屡试不爽，兼容性强
- 方法二：
overflow + zoom方法 –不推荐.fix{overflow:hidden; zoom:1;}- 此方法优点在于代码简洁，涵盖所有浏览器
- 方法三：
after + zoom方法 -推荐–此方法可以说是综合起来最好的方法了clearfix只应用在包含浮动子元素的父级元素上
- 方法一：
.clearfix{zoom:1;} |
- 方法四 在方法三的基础上的最优雅的做法【推荐】
.clearfix:after, |
清除浮动的原理是触发 BFC ，这里只有 clear:both 起清除浮动作用，其他的 line-height:0; visibility:hidden; 都是为了隐藏生的内容需要的
一些总结
- 自动继承属性：
colorfonttext-alignlist-style
…
- 非继承属性：
backgroundborderposition
…
- 具有破坏性的元素：
floatdisplay:none;position:absoblute/fixed/sticky;
- 具有包裹性的元素：
display:inline-block/table-cellposition:absolute/fixed/stickyoverflow:hidden/scroll
- 消除图片底部间隙的方法
- 图片块状化-无基线对齐
img{display:block;} - 图片底线对齐
img{vertical-align:bottom;} - 行高足够小 - 基线位置上移
.box{line-height:0;}
- 图片块状化-无基线对齐
- 参考
web前端开发最佳实践
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
上一篇： 居中解决方案荟萃
下一篇： 彻底找到 Tomcat 启动速度慢的元凶
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论