前端 - 代码规范

已注销
222 阅读5分钟

这是我学习了网上的前端规范（腾讯、Bootstrap、京东），结合自己编写代码的感受，总结出来的。如果有不对的地方，请大神指正！

HTML

1. 网页头部

HTML5文档声明

头部统一使用小写格式的HTML5的文档声明：

<!DOCTYPE html>

给html根标签添加lang属性

html根标签中的lang属性，作用是为当前网页设置语言，可以让浏览器中的网页翻译工具和网页朗读工具正确的识别网页的语种。

vscode默认生成的：

<html lang="en">
      ...
</html>

推荐写法，腾讯淘宝都这样写：

<html lang="zh-CN">

一些过时的、废弃的写法：

zh-cmn, zh-cmn-Hans, zh-cmn-Hant, zh-wuu, zh-yue, zh-gan

页面的编码格式

我们统一使用UTF-8式的编码。写成 “utf-8”、“utf8”、“UTF8”都是错误的，正确写法：

<meta charset="UTF-8">

2. HTML标签规范

所有的标签名都使用小写

到目前为止我还没有见过身边有人使用大写字母来编写HTML标签，这种操作反正我是打不出来（狗头保命）。

推荐的写法：

<h1>反手一个大</h1>

不推荐（离谱）的写法：

<H1>你这猴子玩的不行啊</H1>
    
<h1>云玩家：我也没玩过，我看教学挺简单的，你打不好就是你菜</H1>

标签的使用要符合语义化

简单的说就是装一段文字最好用p标签；明显是标题的文字推荐用标题标签（h1~h6），等等。div、span这种没有语义的标签除了用来分隔区域以外，尽量少用。

<p>
    今天女朋友跟我分手了，因为我打游戏没有回她消息，我当时没在意，但到晚上
    我翻来覆去实在睡不着，我就想不明白，对面韩信怎么起来的？
</p>

HTML元素的属性值都用双引号

<section class="container">    </section>

元素属性的书写顺序

常见的元素属性有 id、class、name、src、type 等等，现在的你在开发的时候是不是，想起一个就直接在后面加上，最后像下面这样？

 <input type="text" value=""  class=""  name="" id="">

我们可以使用一个约定的顺序来排列这些属性，方便我们分辨和阅读。

Bootstrap推荐的顺序：

  • class

  • id, name

  • data-*

  • src, for, type, href, value

  • title, alt

  • role, aria-*

 <a class="..." id="..." data-toggle="modal" href="#">
    Example link
</a>

代码统一缩进，保证易读性和美观

项目统一使用4个空格（2个也ok啦，主要是统一）进行代码缩进。缩进这个东西代码编辑器都有设置的地方，一般默认就是4个空格。需要格式化的时候快捷键格式化一下就好了。

HTML标签的嵌套规则

这个很重要。

  • 行内标签不能嵌套块级标签
  • 段落元素与标题元素只能嵌套内联元素

代码注释

有很多开发者都没有给代码加注释的习惯，这好吗？这不好。

例如你可以在一个区域之前加上一句注释，告诉你自己以及其他阅读你代码的人，这里装的啥，它是来干啥的。

优秀的注释总是简洁明了的。

减少HTML标签的嵌套

我们上面说了遵循HTML的语义很重要，但是，实用性更加重要，我们在实际开发的时候要尽可能的减少HTML标签的嵌套，降低网页结构的复杂程度。

比如有的父元素是多余的，能不写就不写。

来自Bootstrap的示例：

<!-- 不太好的写法 -->
<span class="avatar">
    <img src="...">
</span>
    
<!-- 更好的写法 -->
<img class="avatar" src="...">

CSS

class id 命名

给class和id命名，要尽量简短、明确。单词之间用 - 或者 _ 分隔，且全部使用小写字母。

有意义：不能使用abc、aaa、ak-s；装的是头像可以用.avatar，外部容器可以用.wrap等等。

简短：.button 可以简写为 .btn 代表按钮，但如果过度缩写成 .b 、.t ，那它啥也不是。

常用class命名，可以参考 京东 Auto 实验室常用命名推荐

样式书写的顺序

一个常见的盒子，它的CSS样式代码可能是这样的：

.cloud {
    line-height: 30px;
    text-align: center;
    background-color: #363;
    opacity: 0.5;
    z-index: 888;
    width: 23px;
    margin: 0 auto;
    height: 30px;
    color: #696;
    font-size: 22px;
    position: absolute;
    box-sizing: border-box;
    border-radius: 15px;
    padding: 10px;
    top: 10px;
    left: 22px;
    border: 2px solid #666;
}

样式语句毫无顺序可言，在下一个盒子中它们可能又是另一种顺序排列下来。看上去就不专业，自己查看代码的时候也会感到费劲。

那为啥不换一种规范的，或者有顺序的顺序来编写CSS样式呢？

还是上面那些样式，我们这样写：

.cloud {
    position: absolute;
    top: 10px;
    left: 22px;
    z-index: 888;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 10px;
    width: 23px;
    height: 30px;
    font-size: 22px;
    line-height: 30px;
    color: #696;
    text-align: center;
    background-color: #363;
    border: 2px solid #666;
    border-radius: 15px;
    opacity: 0.5;
}

这样看起来就会规范很多，如果你页面的样式都是按照大体固定的顺序来编写，代码看起来就显得专业。

Bootstrap推荐的顺序：

  1. 定位属性（position、top、right、bottom、left、z-index）
  2. 盒模型属性（box-sizing、margin、padding、display、float、width、height）
  3. 排版属性（font、line-height、color、text-align）
  4. 视觉属性（background、border）
  5. 杂项属性（opacity）

选择器

CSS选择器的个数，不要超过4个（腾讯TGideas和Bootstrap推荐不超过3个），这样利于浏览器渲染性能的优化。

使用Less、Sass编写代码时，你可以使用嵌套，但不代表你应该使用嵌套，合理控制嵌套层数就可以减少CSS选择器的个数。

avatar
文章
阅读
粉丝