前端开发规范有哪些

摘要

说到开发规范，相信很多人都可能有话要说。对于开发规范，有些人了解，有些人不了解。所以，我们应该时常去看看那些优秀开发人员的代码，这样不但能查漏补缺，而且还能够学习一下他们编写代码时的开发规范。

说到开发规范，相信很多人都可能有话要说。对于开发规范，有些人了解，有些人不了解。所以，我们应该时常去看看那些优秀开发人员的代码，这样不但能查漏补缺，而且还能够学习一下他们编写代码时的开发规范。

不同的公司可能有着不同的开发规范。笔者曾经在网上看到过一家公司的开发规范，洋洋洒洒用word写了好几页，从HTML、CSS到JavaScript等，里面细节之处小到标点符号。从这一点不难看出，这家公司是很注重开发规范的。

常言道：细节决定成败。可能很多程序员对此嗤之以鼻。在他们的心里，也许认为能写出代码才是王道，这一点笔者也不否认。对于大多数公司来说，一个产品做完后，都要进行后期维护。站在长远的角度来讲，遵守开发规范的代码对于后期维护来讲能容易很多。

这个时候，良好的开发规范便显得极为重要。

1、class尽量反映元素用途和目的

  1. /* bad */
  2. .red {
  3.   color: #f00;
  4. }
  6. /* good */
  7. .important {
  8.   color: #f00;
  9. }

2、合理的使用ID

  1. /* bad */
  2. #header .logo {
  3.   width: 200px;
  4. }
  6. /* good */
  7. .header .logo {
  8.   width: 200px;
  9. }

注：书写样式的时候，尽量使用class而不是id，id的权重要高于class，与其进行父子选择器的书写，还不如直接给.logo一个#logo省事。

3、避免使用标签名

  1. /* bad */
  2. .header div {
  3.   width: 200px;
  4. }
  6. /* good */
  7. .header .logo {
  8.   width: 200px;
  9. }

注：这样做的目的是避免标签样式带来潜在问题。某一天我们突然要把这个div改为p，这时，如果忘了修改样式便会造成破版。更重要的一点是，class的解析速度优于标签名。

4、尽量使用缩写属性

  1. /* bad */
  2. .nav {
  3.   margin-left: auto;
  4.   margin-top: 0;
  5.   margin-right: auto;
  6.   margin-bottom: 0;
  7. }
  9. /* good */
  10. .nav {
  11.   margin: 0 auto;
  12. }

5、0后面不带单位

  1. /* bad */
  2. .nav {
  3.   margin-left: 0px;
  4. }
  6. /* good */
  7. .nav {
  8.   margin-left: 0;
  9. }

6、尽量使用子选择器

  1. /* bad */
  2. .nav .link {
  3.   padding: 0 10px;
  4. }
  6. /* good */
  7. .nav > .link {
  8.   padding: 0 10px;
  9. }

注：很多时候，我们不需要进行通用样式，但是我们却会忽略子选择器，进而一定程度上带来性能损失。

7、16进制颜色代码缩写

  1. /* bad */
  2. .link {
  3.   color: #333333;
  4. }
  6. /* good */
  7. .link {
  8.   color: #333;
  9. }

8、去掉小数点前的0

  1. /* bad */
  2. .link {
  3.   font-size: 0.8em;
  4. }
  6. /* good */
  7. .link {
  8.   font-size: .8em;
  9. }

9、连字符尽量使用-

  1. /* bad */
  2. .sub_link {
  3.   font-size: 0.8em;
  4. }
  6. /* good */
  7. .sub-link {
  8.   font-size: .8em;
  9. }
shaw

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: