-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path代码书写习惯.js
1620 lines (1361 loc) · 42.4 KB
/
代码书写习惯.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
/*
* @Author: ChenCong
* @Date: 2018-03-13 18:55:11
* @Last Modified by: ChenCong
* @Last Modified time: 2018-03-26 19:17:53
*/
//参考自：http://alloyteam.github.io/CodeGuide/#project-naming
/*==========目录==========
==========1.命名规则==========
1.1 项目命名
1.2 目录命名
1.3 JS文件命名
1.4 CSS,SCSS文件命名
1.5 HTML文件命名
==========2.HTML==========
2.1 语法
2.2 HTML5 doctype
2.3 lang属性
2.4 字符编码
2.5 IE兼容模式
2.6 引入CSS,JS
2.7 属性顺序
2.8 boolean属性
2.9 JS生成标签
2.10 减少标签数量
2.11 使用高于完美
==========3.CSS,SCSS==========
3.1 缩进
3.2 分号
3.3 空格
3.4 空行
3.5 换行
3.6 注释
3.7 引号
3.8 命名
3.9 属性声明顺序
3.10 颜色
3.11 属性简写
3.12 媒体查询
3.13 SCSS相关
3.14 杂项
==========4.JavaScript==========
4.1 缩进
4.2 单行长度
4.3 分号
4.4 空格
4.5 空行
4.6 换行
4.7 单行注释
4.8 多行注释
4.9 文档注释
4.10 引号
4.11 变量命名
4.12 变量声明
4.13 函数
4.14 数组、对象
4.15 括号
4.16 null
4.17 undefined
4.18 jshint
4.19 杂项
*/
//==========内容==========
/*
==========1.命名规则==========
1.1 项目命名
全部采用小写的方式，以下划线分隔。
例：my_project_name
1.2 目录命名
参照项目命名规则；
有复数结构时，要采用复数命名法。
例：scripts,styles,images,data_models
1.3 JS文件命名
参照项目命名规则。
例：account_model.js
1.4 CSS,SCSS文件命名
参照项目命名规则。
例：retina_sprites.scss
1.5 HTML文件命名
参照项目命名规则。
例：error_report.html
==========2.HTML==========
2.1 语法
(1) 缩进使用soft tab(4个空格)；
(2) 嵌套的节点应该缩进；
(3) 在属性上，使用双引号，不要使用单引号；
(4) 不要在自动闭合标签结尾处使用斜线(HTML5 规范指出他们是可选的);
(5) 不要忽略可选的关闭标签，例：</li> 和 </body>
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<img src="images/company_logo.png" alt="Company">
<h1 class="hello-world">Hello, world!</h1>
</body>
</html>
2.2 HTML5 DOCTYPE
在页面开头使用这个简单的doctype来启用标准模式，使其在每个浏览器中尽可能一致地展现；
虽然doctype不区分大小写，但是按照惯例，DOCTYPE大写。
<!DOCTYPE html>
<html>
...
</html>
2.3 lang属性
根据HTML5规范：应在html标签上加上lang属性。这会给语音工具和翻译工具帮助，告诉它们应当怎么去发音和翻译。
更多关于lang属性的说明：http://w3c.github.io/html/semantics.html#the-html-element
在sitepoint上可以查到语言列表：https://www.sitepoint.com/iso-2-letter-language-codes/
但sitepoint只是给出了语言的大类，例如中文只给出了zh，但是没有区分香港，台湾，大陆。
而微软给出了一份更加详细的语言列表：https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/
其中细分了zh-cn，zh-hk，zh-tw。
<!DOCTYPE html>
<html lang="en-us">
...
</html>
2.4 字符编码
通过声明一个明确的字符编码，让浏览器轻松、快速的确定合适网页内容的渲染方式，通常指定为'UTF-8'。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
...
</html>
2.5 IE兼容模式
用<meta>标签可以指定页面应该用什么版本的IE来渲染；
了解更多：https://stackoverflow.com/questions/6771258/what-does-meta-http-equiv-x-ua-compatible-content-ie-edge-do
不同DOCTYPE在不同浏览器下会触发不同的渲染模式：https://hsivonen.fi/doctype/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
</head>
...
</html>
2.6 引入CSS，JS
根据HTML5规范，通常在引入CSS和JS时不需要指明 type，因为 text/css 和 text/javascript分别是他们的默认值。
HTML5规范链接：
(1) 使用link：https://www.w3.org/TR/2011/WD-html5-20110525/semantics.html#the-link-element
(2) 使用style：https://www.w3.org/TR/2011/WD-html5-20110525/semantics.html#the-style-element
(3) 使用script：https://www.w3.org/TR/2011/WD-html5-20110525/scripting-1.html#the-script-element
<!-- External CSS -->
<link rel="stylesheet" href="code_guide.css">
<!-- In-document CSS -->
<style>
...
</style>
<!-- External JS -->
<script src="code_guide.js"></script>
<!-- In-document JS -->
<script>
...
</script>
2.7 属性顺序
属性应该按照特定的顺序出现以保证易读性；
(1) class
(2) id
(3) name
(4) data-*
(5) src, for, type, href, value, max-length, max, min, pattern
(6) placeholder, title, alt
(7) aria-*, role
(8) required, readonly, disabled
class 是为高可复用性组件设计的，所以应处在第一位；
id更加具体且应该尽量少使用，所以将它放在第二位。
<a class="..." id="..." data-modal="toggle" href="#">Example link</a>
<input class="form-control" type="text">
<img src="..." alt="...">
2.8 boolean属性
boolean属性指不需要声明取值的属性，XHTML需要每个声明取值，但是HTML5并不需要；
更多内容可以参考：www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#boolean-attributes
boolean属性的存在表示取值为true，不存在则表示取值为false。
<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
<option value="1" selected>1</option>
</select>
2.9 JS生成标签
在JS文件中生成标签让内容变得更难查找，更难编辑，性能更差，应该尽量避免这种情况的出现。
2.10 减少标签数量
在编写HTML代码时，需要尽量避免多余的父节点；很多时候，需要通过迭代和重构来使HTML变得更少。
<!-- Not well -->
<span class="avatar">
<img src="...">
</span>
<!-- Better -->
<img class="avatar" src="...">
2.11 实用高于完美
尽量遵循HTML标准和语义，但是不应该以浪费实用性作为代价；
任何时候都要用尽量下的复杂度和尽量少的标签来解决问题。
==========3.CSS,SCSS==========
3.1 缩进
使用 soft tab（4个空格）。
.element {
position: absolute;
top: 10px;
left: 10px;
border-radius: 10px;
width: 50px;
height: 50px;
}
3.2 分号
每个属性声明末尾都要加分号。
.element {
width: 20px;
height: 20px;
background-color: red;
}
3.3 空格
以下几种情况不需要空格：
(1) 属性名后；
(2) 多个规则的分隔符','前；
(3) !important '!'后；
(4) 属性值中'('后和')'前；
(5) 行末不要有多余的空格；
以下几种情况需要空格：
(1) 属性值前；
(2) 选择器'>', '+', '~'前后；
(3) !important '!'前；
(4) @else 前后；
(5) 属性值中的','后；
(6) 注释'/*'后和'* /'前；
// not good
.element {
color :red! important;
background-color: rgba(0,0,0,.5);
}
// good
.element {
color: red !important;
background-color: rgba(0, 0, 0, .5);
}
// not good
.element ,
.dialog{
...
}
// good
.element,
.dialog {
}
// not good
.element>.dialog{
...
}
// good
.element > .dialog{
...
}
// not good
.element{
...
}
// good
.element {
...
}
// not good
@if{
...
}@else{
...
}
// good
@if {
...
} @else {
...
}
3.4 空行
以下几种情况需要空行：
(1) 文件最后保留一个空行；
(2) '}'后最好跟一个空行，包括scss中嵌套的规则；
(3) 属性之间需要适当的空行，具体见属性声明顺序：
// not good
.element {
...
}
.dialog {
color: red;
&:after {
...
}
}
// good
.element {
...
}
.dialog {
color: red;
&:after {
...
}
}
3.5 换行
以下几种情况不需要换行：'{'前。
以下几种情况需要换行：
(1) ‘{’后和‘}’前；
(2) 每个属性独占一行；
(3) 多个规则的分隔符','后
// not good
.element
{color: red; background-color: black;}
// good
.element {
color: red;
background-color: black;
}
// not good
.element, .dialog {
...
}
// good
.element,
.dialog {
...
}
3.6 注释
注释统一用'/* * /'(scss中也不要用‘//’)，缩进与下一行代码保持一致；
可位于一个代码行的末尾，与代码间隔一个空格。
/* Modal header */
// .modal-header {
// ...
// }
/*
* Modal header
*/
// .modal-header {
// ...
// }
// .modal-header {
// /* 50px */
// width: 50px;
// color: red; /* color red */
// }
/*
3.7 引号
最外层统一使用双引号；
url的内容要用引号；
属性选择器中的属性值需要引号。
.element:after {
content: "";
background-image: url("logo.png");
}
li[data-type="single"] {
...
}
3.8 命名
(1) 类名使用小写字母，以中划线分隔；
(2) id采用驼峰式命名；
(3) scss中的变量、函数、混合、placeholder采用驼峰式命名。
// class
.element-content {
...
}
// id
#myDialog {
...
}
// 变量
$colorBlack: #000;
// 函数
@function pxToRem($px) {
...
}
// 混合
@mixin centerBlock {
...
}
// placeholder
%myDialog {
...
}
3.9 属性声明顺序
相关的属性声明按右边的顺序做分组处理，组之间需要一个空行。
.declaration-order {
display: block;
float: right;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
border: 1px solid #e5e5e5;
border-radius: 3px;
width: 100px;
height: 100px;
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
text-align: center;
color: #333;
background-color: #f5f5f5;
opacity: 1;
}
// 下面是推荐的属性的顺序
[
[
"display",
"visibility",
"float",
"clear",
"overflow",
"overflow-x",
"overflow-y",
"clip",
"zoom"
],
[
"table-layout",
"empty-cells",
"caption-side",
"border-spacing",
"border-collapse",
"list-style",
"list-style-position",
"list-style-type",
"list-style-image"
],
[
"-webkit-box-orient",
"-webkit-box-direction",
"-webkit-box-decoration-break",
"-webkit-box-pack",
"-webkit-box-align",
"-webkit-box-flex"
],
[
"position",
"top",
"right",
"bottom",
"left",
"z-index"
],
[
"margin",
"margin-top",
"margin-right",
"margin-bottom",
"margin-left",
"-webkit-box-sizing",
"-moz-box-sizing",
"box-sizing",
"border",
"border-width",
"border-style",
"border-color",
"border-top",
"border-top-width",
"border-top-style",
"border-top-color",
"border-right",
"border-right-width",
"border-right-style",
"border-right-color",
"border-bottom",
"border-bottom-width",
"border-bottom-style",
"border-bottom-color",
"border-left",
"border-left-width",
"border-left-style",
"border-left-color",
"-webkit-border-radius",
"-moz-border-radius",
"border-radius",
"-webkit-border-top-left-radius",
"-moz-border-radius-topleft",
"border-top-left-radius",
"-webkit-border-top-right-radius",
"-moz-border-radius-topright",
"border-top-right-radius",
"-webkit-border-bottom-right-radius",
"-moz-border-radius-bottomright",
"border-bottom-right-radius",
"-webkit-border-bottom-left-radius",
"-moz-border-radius-bottomleft",
"border-bottom-left-radius",
"-webkit-border-image",
"-moz-border-image",
"-o-border-image",
"border-image",
"-webkit-border-image-source",
"-moz-border-image-source",
"-o-border-image-source",
"border-image-source",
"-webkit-border-image-slice",
"-moz-border-image-slice",
"-o-border-image-slice",
"border-image-slice",
"-webkit-border-image-width",
"-moz-border-image-width",
"-o-border-image-width",
"border-image-width",
"-webkit-border-image-outset",
"-moz-border-image-outset",
"-o-border-image-outset",
"border-image-outset",
"-webkit-border-image-repeat",
"-moz-border-image-repeat",
"-o-border-image-repeat",
"border-image-repeat",
"padding",
"padding-top",
"padding-right",
"padding-bottom",
"padding-left",
"width",
"min-width",
"max-width",
"height",
"min-height",
"max-height"
],
[
"font",
"font-family",
"font-size",
"font-weight",
"font-style",
"font-variant",
"font-size-adjust",
"font-stretch",
"font-effect",
"font-emphasize",
"font-emphasize-position",
"font-emphasize-style",
"font-smooth",
"line-height",
"text-align",
"-webkit-text-align-last",
"-moz-text-align-last",
"-ms-text-align-last",
"text-align-last",
"vertical-align",
"white-space",
"text-decoration",
"text-emphasis",
"text-emphasis-color",
"text-emphasis-style",
"text-emphasis-position",
"text-indent",
"-ms-text-justify",
"text-justify",
"letter-spacing",
"word-spacing",
"-ms-writing-mode",
"text-outline",
"text-transform",
"text-wrap",
"-ms-text-overflow",
"text-overflow",
"text-overflow-ellipsis",
"text-overflow-mode",
"-ms-word-wrap",
"word-wrap",
"-ms-word-break",
"word-break"
],
[
"color",
"background",
"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
"background-color",
"background-image",
"background-repeat",
"background-attachment",
"background-position",
"-ms-background-position-x",
"background-position-x",
"-ms-background-position-y",
"background-position-y",
"-webkit-background-clip",
"-moz-background-clip",
"background-clip",
"background-origin",
"-webkit-background-size",
"-moz-background-size",
"-o-background-size",
"background-size"
],
[
"outline",
"outline-width",
"outline-style",
"outline-color",
"outline-offset",
"opacity",
"filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
"-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
"-ms-interpolation-mode",
"-webkit-box-shadow",
"-moz-box-shadow",
"box-shadow",
"filter:progid:DXImageTransform.Microsoft.gradient",
"-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
"text-shadow"
],
[
"-webkit-transition",
"-moz-transition",
"-ms-transition",
"-o-transition",
"transition",
"-webkit-transition-delay",
"-moz-transition-delay",
"-ms-transition-delay",
"-o-transition-delay",
"transition-delay",
"-webkit-transition-timing-function",
"-moz-transition-timing-function",
"-ms-transition-timing-function",
"-o-transition-timing-function",
"transition-timing-function",
"-webkit-transition-duration",
"-moz-transition-duration",
"-ms-transition-duration",
"-o-transition-duration",
"transition-duration",
"-webkit-transition-property",
"-moz-transition-property",
"-ms-transition-property",
"-o-transition-property",
"transition-property",
"-webkit-transform",
"-moz-transform",
"-ms-transform",
"-o-transform",
"transform",
"-webkit-transform-origin",
"-moz-transform-origin",
"-ms-transform-origin",
"-o-transform-origin",
"transform-origin",
"-webkit-animation",
"-moz-animation",
"-ms-animation",
"-o-animation",
"animation",
"-webkit-animation-name",
"-moz-animation-name",
"-ms-animation-name",
"-o-animation-name",
"animation-name",
"-webkit-animation-duration",
"-moz-animation-duration",
"-ms-animation-duration",
"-o-animation-duration",
"animation-duration",
"-webkit-animation-play-state",
"-moz-animation-play-state",
"-ms-animation-play-state",
"-o-animation-play-state",
"animation-play-state",
"-webkit-animation-timing-function",
"-moz-animation-timing-function",
"-ms-animation-timing-function",
"-o-animation-timing-function",
"animation-timing-function",
"-webkit-animation-delay",
"-moz-animation-delay",
"-ms-animation-delay",
"-o-animation-delay",
"animation-delay",
"-webkit-animation-iteration-count",
"-moz-animation-iteration-count",
"-ms-animation-iteration-count",
"-o-animation-iteration-count",
"animation-iteration-count",
"-webkit-animation-direction",
"-moz-animation-direction",
"-ms-animation-direction",
"-o-animation-direction",
"animation-direction"
],
[
"content",
"quotes",
"counter-reset",
"counter-increment",
"resize",
"cursor",
"-webkit-user-select",
"-moz-user-select",
"-ms-user-select",
"user-select",
"nav-index",
"nav-up",
"nav-right",
"nav-down",
"nav-left",
"-moz-tab-size",
"-o-tab-size",
"tab-size",
"-webkit-hyphens",
"-moz-hyphens",
"hyphens",
"pointer-events"
]
]
3.10 颜色
颜色16进制用小写字母；
颜色16进制尽量用简写。
// not good
.element {
color: #ABCDEF;
background-color: #001122;
}
// good
.element {
color: #abcdef;
background-color: #012;
}
3.11 属性简写
属性简写需要你非常清楚属性值的正确顺序，而且在大多数情况下并不需要设置属性简写中
包含的所有值，所以建议尽量分开声明会更加清晰；
margin 和 padding 相反，需要使用简写；
常见的属性简写包括：font、background、transition、animation。
// not good
.element {
transition: opacity 1s linear 2s;
}
// good
.element {
transition-delay: 2s;
transition-timing-function: linear;
transition-duration: 1s;
transition-property: opacity;
}
3.12 媒体查询
尽量将媒体查询的规则靠近与他们相关的规则，不要将他们一起放到一个独立的样式文件中，
或者丢在文档的最底部，这样做只会让大家以后更容易忘记他们。
.element {
...
}
.element-avatar{
...
}
@media (min-width: 480px) {
.element {
...
}
.element-avatar {
...
}
}
3.13 SCSS相关
提交的代码中不要有 @debug；
声明顺序：
(1) @entend
(2) 不包含 @content 的@include
(3) 包含 @content 的@include
(4) 自身属性
(5) 嵌套规则
@import 引入的文件不需要开头的 '_' 和结尾的 '.scss'；
嵌套最多不超过5层；
@extend 中使用 placeholder 选择器；
去掉不必要的父级引用符号 '&'。
// not good
@import "_dialog.scss";
// good
@import "dialog";
// not good
.fatal {
@extend .error;
}
// good
.fatal {
@extend %error;
}
// not good
.element {
& > .dialog {
...
}
}
// good
.element {
> .dialog {
...
}
}
3.14 杂项
不允许有空的规则；
元素选择器用小写字母；
去掉小数点前面的0；
去掉数字中不必要的小数点和末尾的0；
属性值'0'后不要加单位；
通过属性不同前缀的写法需要再垂直方向保持对齐，具体参照下面的写法；
无前缀的标准属性应该写在有前缀的属性后面；
不要在同个规则里出现重复的属性，如果重复的属性是连续的则没关系；
用 border:0; 替代 border:none;；
选择器不要超过4层（在scss中如果超过4层应该考虑嵌套的方式来写）；
发布的代码中不要有 @import ；
尽量少用 '*' 选择器。
// not good
.element {
}
// not good
LI {
...
}
// good
li {
...
}
// not good
.element {
color: rgba(0, 0, 0, 0.5);
}
// good
.element {
color: rgba(0, 0, 0, .5);
}
// not good
.element {
width: 50.0px;
}
// good
.element {
width: 50px;
}
// not good
.element {
width: 0px;
}
// good
.element {
width: 0;
}
// not good
.element {
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
background: linear-gradient(to bottom, #fff 0, #eee 100%);
background: -webkit-linear-gradient(top, #fff 0, #eee 100%);
background: -moz-linear-gradient(top, #fff 0, #eee 100%);
}
// good
.element {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: -webkit-linear-gradient(top, #fff 0, #eee 100%);
background: -moz-linear-gradient(top, #fff 0, #eee 100%);
background: linear-gradient(to bottom, #fff 0, #eee 100%);
}
// not good
.element {
color: rgb(0, 0, 0);
width: 50px;
color: rgba(0, 0, 0, .5);
}
// good
.element {
color: rgb(0, 0, 0);
color: rgba(0, 0, 0, .5);
}
==========4.JavaScript==========
4.1 缩进
使用 soft tab （4个空格）。
var x = 1,
y = 1;
if (x < y) {
x += 10;
} else {
x += 1;
}