CSS—书写顺序
css书写规范,顺序
百度FEX前端团队CSS代码规范
腾讯AlloyTeam前端团队的CSS代码规范
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等)
性能优化—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新特性一览
HTML5和CSS3新特性一览
websoket
WebSocket:5分钟从入门到精通