前端代码规范

196 阅读2分钟

前端代码规范

```

```

html

1.标签必须关闭不管是单个标签还是双个标签。

<img/>  //单个
<head></head> //双个

2.使用符合浏览器规范的语义化标签

标题 h1-h6              链接 a              地址 address
文章 article            侧边栏 aside        主体 body
头部 header             底部 footer         代码文本 code
下拉列表 datalist|select图片 img            输出框 input
表单  form              列表 ul|ol          导航 nav
块文本  p               板块 section        内联文本 span
表格 table              时间 time           页面标题 title
按钮 button

有些标签是html5新添加的,所以浏览器的低的版本都不会兼容。会被低浏览器解析为div展示。

  1. js文件与css文件由外链引入,css在head中引入,js在body尾部引入。

  2. 标签属性顺序

  • class
  • id
  • src, for, type, href, value
  • placeholder, title, alt
  • data-*
  • required、readonly、 disabled
  1. id,class命名

    1.使用跟内容相关的名字, 如nav, name, user, manager

    1. 使用小写字母,多个单词以“-”连接。 right-nav

    3.避免使用不符合规范的词汇 wenzhang,banner,youxi

  2. 内联标签禁止包含块级标签,块级标签可以包含内联与块级标签。

    内联标签:span,b,a,img,time,code,em,input,select.sup,sub,textarea,label

    块级标签 p,div,ul,address,menu,form,table,h1-h6,hr,section,nav,header,footer


css

  1. 属性顺序
  • 定位属性:position,top,left,right,bottom,z-index,display,
  • 盒子属性:width,height,margin,padding,border,background,float,overflow,border-radius
  • 文字属性: font-family,font-size,font-weight,text-align,text-overflow,white-space,...
  • 其他属性:box-shadow,transform,animation,opaticy,
  1. 属性简写

    单个值使用完全写法 margin-left: 10px;

    值为0的时候不带单位 margin-left: 0;

    多个值使用简写 margin: 0 0 0 10px;

    颜色值为一样时简写 color: #333

  2. 动画@keyform 写在顶部, 媒体查询写在底部。


js

1.文件命名与模块或者页面相关

2.变量使用前必须声明

3.使用分号结束

// 赋值
var a = 1;
// 函数声明
function a() {
    
};
// 函数调用
a();

// 返回
return ;

4.函数最好包含在作用域块中,防止污染全局

;{}

5.函数必须有返回对象,switch循环也必须有默认返回

switch(name) {
    case 'a':
    
        break;
    default: 
        return '';
};

function a() {
    return '';
}
  1. 代码格式化,整洁规范

  2. 函数命名使用驼峰法