导航
导航
文章目录󰁋
  1. 一、HTML实践
  2. 二、CSS实践
  3. 三、JavaScript实践
  4. 四、附录
    1. 附录一 DIV命名规范
    2. 附录二 CSS精灵
    3. 附录三 一些tips解决方案
      1. 页面优化实践
      2. 写DIV+CSS 的一些常识
      3. 常用代码片段
      4. 一些总结

关注作者公众号

和万千小伙伴一起学习

公众号：前端进价之旅

前端开发的一些实践规范

2016.11.23 Poetry Front-End  热度 ℃   字数统计 4.2k字   阅读时长 16分

一、HTML实践

  • 使用标准的HTML5简化的定义的方式
    • 定义文档类型 <!DOCTYPE html>
    • 定义页面的编码 <meata charset="UTF-8">
    • 样式和页脚的引用，不需要写type类型，如link script
  • 停止使用不标准的标签和属性，如mqrquee
  • 不推荐在HTML标签中添加样式属性，如img标签中添加宽高
  • 不要使用@import，此方式最大的缺点是引用css文件不能同时并行下载
  • 增加JavaScript禁用的提示信息，最常用的方式是使用<noscript>
  • 添加必要的meta标签
  • 使用频率较高的语义化标签
    • p ul dl p 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进行定义。
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 标签的使用应该遵循标签的语义

    • 下面是常见标签语义
      • p - 段落
      • h1,h2,h3,h4,h5,h6 - 层级标题
      • strong,em - 强调
      • ins - 插入
      • del - 删除
      • abbr- 缩写
      • code - 代码标识
      • cite - 引述来源作品的标题
      • q - 引用
      • blockquote - 一段或长篇引用
      • ul - 无序列表
      • ol - 有序列表
      • dl,dt,dd - 定义列表
常用代码片段
  • 雅虎工程师提供的CSS初始化示例代码【仅供参考】
    • 可以在html头文件中直接引用，从而避免浏览器的不兼容带来的错误。
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解决方案【推荐使用这个】

  • 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%;”>
      <span style=”background:#f00; display:table-cell; vertical-align:middle;”>
            <input type=”button” value=”item1″ />
      </span>
</div>
  • 透明度的兼容代码
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*/

  • 文本溢出的几种处理方法

  • 简单隐藏

div.hide{overflow:hidden}
  • 使用滚动条
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只应用在包含浮动子元素的父级元素上
.clearfix{zoom:1;}
.clearfix:after{
     display:block; 
     content:'clear'; 
     clear:both;
     line-height:0; 
     visibility:hidden;
}
  • 方法四 在方法三的基础上的最优雅的做法【推荐】
.clearfix:after,
.clearfix:before {/*before 是为了防止浏览器顶部空白的崩溃*/   
     content: " ";   
     display: table;
}
.clearfix:after {    
    clear: both;
}

清除浮动的原理是触发BFC，这里只有clear:both起清除浮动作用，其他的line-height:0; visibility:hidden;都是为了隐藏生的内容需要的

一些总结

  • 自动继承属性：

    • 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前端开发最佳实践
支持一下
扫一扫，支持poetries
  • 微信扫一扫
  • 支付宝扫一扫