前端开发代码规范

来源：互联网发布：excel软件开发编辑：程序博客网时间：2024/06/05 15:17

一、总体注意事项：

1 先看docs下的代码规范，一定要牢记。不要随便命名

2 已有代码需要修改代码时，必须先获取代码，一般情况下不允许直接覆盖。可以合并

3 修改代码不清楚是什么业务的，最好不要删除，可以注释。

4 提交代码之前先格式化代码样式。

5 尽量熟悉使用公司统一的开发环境(webstrom + svn);

6 注释一定要有:建议格式：

        <!--市场层-->        <ul class="placer-shop"></ul>        <!--头部地址-->        <div class="placer"></div>        <!--发送至...-->        <div class="send-to"></div>        <!--推荐档口-->        <div class="stall">            <!--推荐头-->            <div class="stall-title"></div>            <!--推荐列表-->            <div class="stall-list-box"></div>        </div>        <!--推荐类商品列表-->        <div class="class-container">            <!--分类-->        </div>        <!--添加到购物车提示-->        <div class="alert-success">添加到购物车成功</div>        <!-- 匹配不到市场时展示效果 -->        <div class="no-market-tips">

二、代码问题总结：

HTML

结构（语义化）,多用H5新增的语义化标签<header> <footer>
文件应以<!DOCTYPE ......>首行顶格开始，推荐使用<!DOCTYPE html>

ul下面不要直接带div:

错误：```<ul>    <div>123</div>    <li>22222</li></ul>```正确：```<ul>    <li><div>123</div></li>    <li>22222</li></ul>```

行内元素里面一般不要带块元素，有需要时把行内元素的display设置为block，或者inline-block

一行有多个样式的代码，或者有间隔的时候错误写法：

<p class="">    月售&nbsp;209&nbsp;&nbsp;&nbsp;    <span></span></p>

命题规范:
id应该为驼峰式命名 isAble;
class应该为中划线is-able 有些老的浏览器不支持_;
Html文件为is_able.html
一个标签上引用的className不要过多，越少越好。比如不要出现这种情况：
```
<div class="class1 class2 class3 class4"></div>
```
对于一个语义化的内部标签，应尽量避免使用className。比如在这样一个列表中，li标签中的item应去除：
```
<ul class="">    <li class="item"></li>    <li class="item"></li></ul>
```
除非特殊情况，避免使用table布局。

CSS

样式的写法最好有顺序（按重要程度），比如：

```.item {    position: absolute;    top: 0;    z-index: 99;    display: block;    float: left;    width: 100px;    height: 100px;    color: red;    border: 1px solid blue;    opacity: .8;}```

命名应简约而不失语义：

    错误: 无语义的命名    .m-abc  .green2{} .g-left2{}    正确： 有语义简短命名    .m-list .wrap{}  .g-sideBar{}

命名不要一级一级往下找，不利于搜索引擎优化

错误：.class div ul li a{ }规范的写法：.class{class的样式}.class-div{ div的样式}.class-list{ul的样式}.item{li的样式}

颜色除非需要用到透明度而使用rgba()，其他的时候一律用16进制表示，且写法用小写，重复的用简写，例如：
p{color:#000000;} 可以缩写为：p{color: #000;}
p{color: #336699;} 可以缩写为：p{color: #369;}
避免重复定义，比如h1和h2的样式相同，就合并在一起。(最好逗号换行)，例如:
```
h1,h2 {    margin: 1rem auto;    color: #333;}
```

使用简写或者详细写法:

h1 {    margin-top: 10px;    margin-left: 10px;    margin-right: 5px;    margin-bottom: 5px;}

简写：

h1 {    marign: 10px 5px;}

省略值为0时的单位: 为节省不必要的字节同时也使阅读方便，我们将0px、0em、0%等值缩写为0。
尽可能多的使用CSS,减轻JS的开发：
(1)用CSS去控制交互视觉变化，JS只需要改变className;例如：
```
.addFix {            Position: fixed;}
```
```
JS只用加上class而不必使用div.css(‘position’: ‘fixed’)
```
(2) 若产品不兼容低版本浏览器，动画之类的可用CSS处理@keyframe;
运用 CSS sprite技术集中小的背景图或图标，防止图片加载的延迟。

阅读全文

2 0