前端编码规范

最新推荐文章于 2024-05-09 14:03:29 发布

sun-shadow

最新推荐文章于 2024-05-09 14:03:29 发布

阅读量424

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/u013494746/article/details/40110267

版权

web前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

HTML

用两个空格替代制表符(tab)

嵌套的元素缩进两个空格

属性的定义使用双引号

不要省略结束标签

为每个html页面的第一行添加标准模式的声明，这样能够确保在每个浏览器中拥有一致的展现。<!DOCTYPE html>

为html根元素添加lang属性，有助于语音合成工具或者翻译工具确定应该遵守的规则

设置IE 兼容模式，<meta http-equiv = “X-UA-Compatibal”content = “IE = Edge”

字符编码<metacharset = “URF – 8”

属性出厂顺序class-> (id,name) -> (src,href,type) -> (title,alt)

CSS

声明：左括号前添加空格，右括号单独成行，冒号后插入空格，以分号结尾

对于逗号分隔的属性值，逗号后加入空格

不要在rgba()，rect()的内部添加空格

对于属性值或颜色参数省略小于1的小数前面的0如用 .5替代0.5

十六进制小写简写

避免为0值指定单位如margin: 0 替代margin : 0px

声明顺序

1. Position

2. Box Model

3. Typographic

4. Visual

.declaration-order{
  /* Positioning */
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:100;
 
  /* Box-model */
  display:block;
  float:right;
  width:100px;
  height:100px;
 
  /* Typography */
  font:normal13px"HelveticaNeue",sans-serif;
  line-height:1.5;
  color:#333;
  text-align:center;
 
  /* Visual */
  background-color:#f5f5f5;
  border:1pxsolid#e5e5e5;
  border-radius:3px;
 
  /* Misc */
  opacity:1;
}

少用@important：与link标签比，@important指令慢的多，替代方案为使用多个link或者合并css文件

少用简写声明：如margin：0,0,0,10px，替换为margin-bottom：10px

注释：只有一个要求易懂。

Class命名：小写字母和破折号，有意义的简写，.btn 表示.button

选择器：通用的元素使用class，利于渲染性能的优化，常出现的组件，避免使用属性选择器。