前端开发规范有哪些

摘要

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

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

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

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

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

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

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

2、合理的使用ID

  1. /* bad */
  2. #header .logo {
  3.   width200px;
  4. }
  5. /* good */
  6. .header .logo {
  7.   width200px;
  8. }

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

3、避免使用标签名

  1. /* bad */
  2. .header div {
  3.   width200px;
  4. }
  5. /* good */
  6. .header .logo {
  7.   width200px;
  8. }

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

4、尽量使用缩写属性

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

5、0后面不带单位

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

6、尽量使用子选择器

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

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

7、16进制颜色代码缩写

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

8、去掉小数点前的0

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

9、连字符尽量使用-

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

发表评论

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