前端零碎知识点同一 rule set 下的属性在书写时，应按功能进行分组，并以 Formatting Model（布局方

CSS—书写顺序

同一 rule set 下的属性在书写时，应按功能进行分组，并以 Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相关） > Visual（视觉效果）的顺序书写，以提高代码的可读性。

解释：

Formatting Model 相关属性包括：position / top / right / bottom / left / float / display / overflow 等
Box Model 相关属性包括：border / margin / padding / width / height 等
Typographic 相关属性包括：font / line-height / text-align / word-wrap 等
Visual 相关属性包括：background / color / transition / list-style 等

另外，如果包含 content 属性，应放在最前面。

eg：

1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)

css-written-order

性能优化—lazyload

代码注释

前端注释怎么写

//html 注释
<!-- 单行注释-->
<!--
@name: 多行注释（模块名称）
@description: add annotation doc（模块描述）
@author:yuji（模块作者）
-->

//css 注释
文件顶部注释
/*
* @description: xxxxx中文说明
* @author: zhifu.wang
* @update: zhifu.wang (2012-10-17 18:32)
*/
模块注释
/* module: module1 by zhifu.wang */
单行注释
/* this is a short comment */
多行注释
/*
* this is comment line 1.
* this is comment line 2.
*/
特殊注释
/* TODO: xxxx by zhifu.wang 2012-10-18 18:32 */
/* BUGFIX: xxxx by zhifu.wang 2012-10-18 18:32 */

//js 注释
 单行注释：// 
 多行注释：/*    */
 段落注释 模块注释 方法注释：
   /*  
      *  这里是一段注释
      *  这里的注释可以连写多行
    */

HTML5语义化

1）用正确的标签做正确的事情；
2）html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；
3）即使在没有样式css情况下也以一种文档格式显示，并且是容易阅读的；
4）搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO；
5）使于都源代码的人对网站更容易将网站分块，便于阅读维护理解。

HTML5和CSS3新特性一览

websoket

WebSocket：5分钟从入门到精通

前端零碎知识点