-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1465 lines (1463 loc) · 66.5 KB
/
index.html
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
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<meta name="renderer" content="webkit">
<link rel="stylesheet" href="main.css">
<link rel="shortcut icon" href="favicon.ico">
<link rel="bookmark" href="favicon.ico">
<title>Web前端代码规范 v1.0 Beta</title>
</head>
<body>
<div class="header">
<div class="inner">
<i>✍</i>
<h1>Web 前端代码规范 v1.0 Beta</h1>
<p>一套利于团队协作的前端代码风格规范，用以书写标准、清晰、易维护的 HTML、CSS 和 JavaScript 代码</p>
<p>向 <a href="http://www.alloyteam.com/" target="_blank">腾讯 AlloyTeam 团队</a> 致敬，参考了其团队规范</p>
</div>
</div>
<div class="menu">
<h3 class="menu-title">目录</h3>
<div class="menu-list inner row" id="menuList">
<div class="col item-file">
<h4><a href="#fileNaming">文件/资源命名</a></h4>
<ol>
<li><a href="">通用规则</a></li>
<li><a href="">目录命名</a></li>
<li><a href="">HTML 文件命名</a></li>
<li><a href="">CSS, SCSS 文件命名</a></li>
<li><a href="">JavaScript 文件命名</a></li>
<li><a href="">图片命名</a></li>
</ol>
</div>
<div class="col item-html">
<h4><a href="#menuHtml">HTML</a></h4>
<ol>
<li><a href="">通用规则</a></li>
<li><a href="">缩进</a></li>
<li><a href="">文档头</a></li>
<li><a href="">字符编码</a></li>
<li><a href="">渲染模式</a></li>
<li><a href="">CSS 和 JavaScript 文件引入</a></li>
<li><a href="">属性顺序</a></li>
<li><a href="">Boolean 属性</a></li>
</ol>
</div>
<div class="col item-css">
<h4><a href="#menuCSS">CSS, SCSS</a></h4>
<ol>
<li><a href="">通用规则</a></li>
<li><a href="">缩进</a></li>
<li><a href="">空格</a></li>
<li><a href="">换行与空行</a></li>
<li><a href="">引号</a></li>
<li><a href="">注释</a></li>
<li><a href="">命名</a></li>
<li><a href="">声明顺序</a></li>
<li><a href="">简写和省略</a></li>
<li><a href="">前缀属性</a></li>
<li><a href="">杂项</a></li>
</ol>
</div>
<div class="col item-js">
<h4><a href="#menuJS">JavaScript</a></h4>
<ol>
<li><a href="">通用规则</a></li>
<li><a href="">缩进</a></li>
<li><a href="">空格</a></li>
<li><a href="">换行与空行</a></li>
<li><a href="">分号</a></li>
<li><a href="">引号</a></li>
<li><a href="">括号</a></li>
<li><a href="">代码注释</a></li>
<li><a href="">变量命名</a></li>
<li><a href="">函数</a></li>
<li><a href="">对象</a></li>
<li><a href="">null</a></li>
<li><a href="">undefined</a></li>
<li><a href="">杂项</a></li>
</ol>
</div>
</div>
</div>
<div class="front inner">
<h3 class="menu-title">最佳原则</h3>
<ul class="menu-list">
<li>无论团队人数多少，代码应该同出一门；</li>
<li>根据实际情况制定良好的代码规范；</li>
<li>遵守编码风格使代码更容易维护，对长期项目大有裨益；</li>
<li>实施代码规范增加代码可读性，提高协作开发效率；</li>
<li>实施代码规范减少低级 bug 的出现概率；</li>
<li>提供相关工具（插件），保障代码规范的无缝接入。<a href="#menuTools">详情</a></li>
</ul>
</div>
<div class="cont-box">
<h3 class="section-title item-file" id="fileNaming">文件/资源命名</h3>
<div class="inner row">
<div class="col">
<h4>通用规则</h4>
<ul class="article">
<li>在 web 项目中，所有的文件名应该都遵循同一命名约定，使用语义化的文件命名，文件名要能“望文生义”，尽量避免使用拼音；</li>
<li>文件名只使用字母 <code>a-z</code>，数字 <code>0-9</code>，连字符 <code>-</code>，下划线 <code>_</code> 和句点 <code>.</code>；</li>
<li>文件命名以字母开头而不是数字，而以特殊字符开头命名的文件，一般都有特殊的含义与用处；</li>
<li>文件名中字母全部采用小写，多个单词用下划线分隔（识别效率较驼峰体高）；</li>
<li>如需缩写单词，则应使用约定俗成的缩写形式，如 btn、nav、num、img 等，不能自造单词，以免引起歧义。</li>
</ul>
</div>
<div class="col">
<pre class="pre-box">
<ol class="pre-cont">
<li>/* Not good */</li>
<li><span class="code">xinzengyonghu.jsp</span></li>
<li><span class="code">8926376.png</span></li>
<li><span class="code">CITYNAMES.json</span></li>
<li><span class="code">1001-scripts.js</span></li>
<li><span class="code">MyHome.php</span></li>
<li><span class="code">npld.css</span></li>
<li></li>
<li>/* Good */</li>
<li><span class="code">my_file_name.html</span></li>
<li><span class="code">man-made_list.html</span><span class="comment"> // man-made 是一个连字符单词</span></li>
</ol>
</pre>
</div>
</div>
<div class="inner row">
<h4>目录命名</h4>
<div class="article">
<p>参照文件命名通用规则。</p>
<p>要合理将文件分类到不同目录，避免一个目录下存放大量的文件。</p>
</div>
</div>
<div class="inner row">
<h4>HTML文件命名</h4>
<p class="article">参照文件命名通用规则。</p>
</div>
<div class="inner row">
<div class="col">
<h4>CSS, SCSS 文件命名</h4>
<div class="article">
<p>参照文件命名通用规则。</p>
<p>以下划线 <code>_</code> 开头的 SCSS 文件不会被编译成一个 CSS 文件。</p>
<p>压缩版本的 CSS 文件，文件名后面需加上 <code>.min</code> 后缀。</p>
</div>
</div>
<div class="col">
<pre class="pre-box">
<ol class="pre-cont">
<li><span class="code">basic_layout.css</span></li>
<li><span class="code">_mixin.scss</span></li>
<li><span class="code">common.min.css</span></li>
</ol>
</pre>
</div>
</div>
<div class="inner row">
<div class="col">
<h4>JavaScript 文件命名</h4>
<div class="article">
<p>参照文件命名通用规则。</p>
<p>压缩版本的 JavaScript 文件，文件名后面需加上 <code>.min</code> 后缀。</p>
</div>
</div>
<div class="col">
<pre class="pre-box">
<ol class="pre-cont">
<li><span class="code">format_string.js</span></li>
<li><span class="code">public.min.js</span></li>
</ol>
</pre>
</div>
</div>
<div class="inner row">
<div class="col">
<h4>图片命名</h4>
<div class="article">
<p>参照文件命名通用规则。</p>
<ul class="article">
<li>图标类图片，需在文件名前面加上 <code>ico_</code> 前缀。</li>
<li>背景类图片，需在文件名前面加上 <code>bg_</code> 前缀。</li>
<li>雪碧图图片，需在文件名后面加上 <code>_sprite</code> 后缀。</li>
<li>Retina 图片，需在文件名后面加上 <code>_1x</code> 或 <code>_2x</code> 后缀来标记原图和 2 倍图。</li>
</ul>
</div>
</div>
<div class="col">
<pre class="pre-box">
<ol class="pre-cont">
<li><span class="code">ico_user_default.png</span></li>
<li><span class="code">bg_login_poster.jpg</span></li>
<li><span class="code">ico_station_rank_sprite.png</span></li>
<li><span class="code">ico_tools_1x.png</span></li>
<li><span class="code">ico_tools_2x.png</span></li>
</ol>
</pre>
</div>
</div>
</div>
<div class="cont-box">
<h3 class="section-title item-html" id="menuHtml">HTML</h3>
<div class="inner row">
<div class="col">
<h4>通用规则</h4>
<ul class="article">
<li>尽量遵循 HTML 标准和语义，但是不应该以浪费实用性作为代价；</li>
<li>任何时候都要用尽量小的复杂度和尽量少的标签来解决问题；</li>
<li>不要使用 HTML5 规范中已经被废弃的标签；</li>
<li>使用 <code>label</code> 包裹附加文字的表单输入框(radio、checkbox)；</li>
<li>标签名全小写；</li>
<li>属性名全小写，用中划线做分隔符；</li>
<li>属性值使用双引号，不要使用单引号；</li>
<li>不要在自动闭合标签结尾处使用斜线（HTML5 规范指出他们是可忽略的）。</li>
</ul>
</div>
<div class="col">
<pre class="pre-box lang-html">
<div class="pre-title"></div>
<ol class="pre-cont">
<li><!-- Not good --></li>
<li><span class="code"><center class=<span class="atv">"header"</span>><span class="text">...</span></center></span></li>
<li><span class="code"><input type=<span class="atv">"checkbox"</span>><span class="text"> Remeber me</span></span></li>
<li><span class="code"><DIV CLASS=<span class="atv">"my-style"</span>><span class="text">...</span></DIV></span></li>
<li><span class="code"><span data-fmtDate=<span class="atv">"1507593600000"</span>><span class="text">2017-10-10</span></span></span></li>
<li><span class="code"><a href=<span class="atv">'http://github.com'</span>><span class="text">GitHub</span></a></span></li>
<li><span class="code"><input type=<span class="atv">"text"</span> /></span></li>
<li></li>
<li><!-- Good --></li>
<li><span class="code"><header class=<span class="atv">"header"</span>><span class="text">...</span></header></span></li>
<li><span class="code"><label><input type=<span class="atv">"checkbox"</span>><span class="text"> Remeber me</span></label></span></li>
<li><span class="code"><div class=<span class="atv">"my-style"</span>><span class="text">...</span></div></span></li>
<li><span class="code"><span data-fmt-date=<span class="atv">"1507593600000"</span>><span class="text">2017-10-10</span></span></span></li>
<li><span class="code"><a href=<span class="atv">"http://github.com"</span>><span class="text">GitHub</span></a></span></li>
<li><span class="code"><input type=<span class="atv">"text"</span>></span></li>
</ol>
</pre>
</div>
</div>
<div class="inner row">
<div class="col">
<h4>缩进</h4>
<ul class="article">
<li>缩进使用 1 个 <code>Tab</code>（占 4 个空格宽度）；</li>
<li>除 <code>head</code> 和 <code>body</code> 外，嵌套的节点应该缩进；</li>
<li>每个块级、列表、表格元素单独占一行，每个子元素都相对父元素缩进；</li>
<li>坚决不要使用 Tab 和空格混搭的缩进方式。</li>
</ul>
<div class="article notes">
<strong>使用 Tab 缩进比空格缩进有哪些优势？</strong>
<ul class="article">
<li>空格缩进一般通过键入 2 或 4 个空格来缩进对齐，其按键成本比 Tab 高得多（有些 IDE 可以设置空格宽度），使用 Tab 缩进更快捷；</li>
<li>使用 Shift + Tab 组合键可以选取多行向前缩进，使用空格缩进做不到；</li>
<li>Tab 可以替换，在支持正则搜索的编辑器里，使用 <code>\t</code> 可以匹配搜索全部 Tab，空格缩进做不到。</li>
</ul>
</div>
</div>
<div class="col">
<pre class="pre-box lang-html">
<div class="pre-title"></div>
<ol class="pre-cont">
<li><span class="code"><!DOCTYPE html></span></li>
<li><span class="code"><html></span></li>
<li><span class="code"><head></span></li>
<li><span class="code"> <title><span class="text">Page title</span></title></span></li>
<li><span class="code"></head></span></li>
<li><span class="code"><body></span></li>
<li><span class="code"> <img src=<span class="atv">"images/company_logo.png"</span> alt=<span class="atv">"Company"</span>></span></li>
<li><span class="code"> <h1 class=<span class="atv">"class-name"</span> data-tip=<span class="atv">"slogan"</span>><span class="text">Hello, world!</span></h1></span></li>
<li><span class="code"></body></span></li>
<li><span class="code"></html></span></li>
</ol>
</pre>
</div>
</div>
<div class="inner row">
<div class="col">
<h4>文档头</h4>
<div class="article">
<p>页面开头<strong>必须</strong>有文档头声明，推荐使用 HTML5 简单的 <code>doctype</code> 声明来启用标准模式，使页面在每个浏览器中尽可能一致的展现。</p>
<p>按照惯例，doctype 应大写。</p>
</div>
</div>
<div class="col">
<pre class="pre-box lang-html">
<div class="pre-title"></div>
<ol class="pre-cont">
<li><span class="code"><!DOCTYPE html></span></li>
<li><span class="code"><html></span></li>
<li><span class="code text"> ...</span></li>
<li><span class="code"></html></span></li>
</ol>
</pre>
</div>
</div>
<div class="inner row">
<div class="col">
<h4>字符编码</h4>
<div class="article">
<p>在 HTML 中指定字符编码，让浏览器轻松、快速的确定适合网页内容的渲染方式。</p>
<p>字符编码通常设为 <code>UTF-8</code> 。</p>
</div>
</div>
<div class="col">
<pre class="pre-box lang-html">
<div class="pre-title"></div>
<ol class="pre-cont">
<li><span class="code"><!DOCTYPE html></span></li>
<li><span class="code"><html></span></li>
<li><span class="code"><head></span></li>
<li><span class="code"> <meta charset=<span class="atv">"UTF-8"</span>></li>
<li><span class="code"></head></span></li>
<li><span class="code text"> ...</span></li>
<li><span class="code"></html></span></li>
</ol>
</pre>
</div>
</div>
<div class="inner row">
<div class="col">
<h4>渲染模式</h4>
<div class="article">
<p>指定使用本地最高版本的 IE 来渲染页面。</p>
<p>对于国内常见的双核浏览器，指定优先采用极速模式（webkit 内核）来渲染页面。（目前仅 360 浏览器支持）</p>
</div>
</div>
<div class="col">
<pre class="pre-box lang-html">
<div class="pre-title"></div>
<ol class="pre-cont">
<li><span class="code"><!DOCTYPE html></span></li>
<li><span class="code"><html></span></li>
<li><span class="code"><head></span></li>
<li><span class="code"> <meta http-equiv=<span class="atv">"X-UA-Compatible"</span> content=<span class="atv">"IE=Edge"</span>></span></li>
<li><span class="code"> <meta name=<span class="atv">"renderer"</span> content=<span class="atv">"webkit"</span>></span></li>
<li><span class="code"></head></span></li>
<li><span class="code text"> ...</span></li>
<li><span class="code"></html></span></li>
</ol>
</pre>
</div>
</div>
<div class="inner row">
<div class="col">
<h4>CSS 和 JavaScript 文件引入</h4>
<ul class="article">
<li>无需为引入的 CSS 和 JavaScritp 指明 type 属性（在 HTML5 规范中，text/css 和 text/javascript 分别是他们的默认值，省略后对页面无影响）；</li>
<li>通常引入的 CSS 文件放在 <code><head></head></code> 内；</li>
<li>一般情况下，JavaScript 脚本应放在页面底部，<code></body></code> 标签前面，以免阻塞页面加载，同时也避免了文档加载完成前 JS 无法获取 DOM 元素的问题。</li>
</ul>
</div>
<div class="col">
<pre class="pre-box lang-html">
<div class="pre-title"></div>
<ol class="pre-cont">
<li><span class="code"><!DOCTYPE html></span></li>
<li><span class="code"><html></span></li>
<li><span class="code"><head></span></li>
<li><span class="code"> <link rel=<span class="atv">"stylesheet"</span> href=<span class="atv">"my_style.css"</span>></span></li>
<li><span class="code"> <style></span></li>
<li><span class="code text"> ...</span></li>
<li><span class="code"> </style></span></li>
<li><span class="code"></head></span></li>
<li><span class="code"><body></span></li>
<li><span class="code text"> ...</span></li>
<li><span class="code"> <script src=<span class="atv">"my_script.js"</span>></script></span></li>
<li><span class="code"> <script></span></li>
<li><span class="code text"> ...</span></li>
<li><span class="code"> </script></span></li>
<li><span class="code"></body></span></li>
<li><span class="code"></html></span></li>
</ol>
</pre>
</div>
</div>
<div class="inner row">
<div class="col">
<h4>属性顺序</h4>
<div class="article">
<p>HTML 属性应当按照特定的顺序依次排列，确保代码的易读性和可维护性。</p>
<p>Class 用于标识高度可复用组件，因此应该排在首位；id 用于标识具体组件，排在第二位。</p>
</div>
</div>
<div class="col">
<pre class="pre-box lang-html">
<ol class="pre-cont">
<li><span class="atv">class</span></li>
<li><span class="atv">id</span></li>
<li><span class="atv">name</span></li>
<li><span class="atv">data-*</span></li>
<li><span class="atv">src, for, type, href, value , max-length, max, min, pattern</span></li>
<li><span class="atv">placeholder, title, alt</span></li>
<li><span class="atv">aria-*, role</span></li>
<li><span class="atv">required, readonly, disabled</span></li>
</ol>
</pre>
</div>
</div>
<div class="inner row">
<div class="col">
<h4>Boolean 属性</h4>
<div class="article">
<p>HTML5 规范中，boolean 属性不需要声明属性值。</p>
<p>Boolean 属性的存在表示取值为 true，不存在则表示取值为 false。</p>
</div>
</div>
<div class="col">
<pre class="pre-box lang-html">
<div class="pre-title"></div>
<ol class="pre-cont">
<li><span class="code"><input type=<span class="atv">"text"</span> disabled=<span class="atv">"disabled"</span>></span><span class="comment"> <!-- Not good --></span></li>
<li><span class="code"><input type=<span class="atv">"text"</span> <span class="atv">disabled</span>></span><span class="comment"> <!-- Good --></span></li>
<li></li>
<li><span class="code"><input type=<span class="atv">"text"</span> readonly=<span class="atv">"true"</span>></span><span class="comment"> <!-- Not good --></span></li>
<li><span class="code"><input type=<span class="atv">"text"</span> <span class="atv">readonly</span>></span><span class="comment"> <!-- Good --></span></li>
<li></li>
<li><span class="code"><input type=<span class="atv">"checkbox"</span> checked=<span class="atv">"checked"</span>></span><span class="comment"> <!-- Not good --></span></li>
<li><span class="code"><input type=<span class="atv">"checkbox"</span> <span class="atv">checked</span>></span><span class="comment"> <!-- Good --></span></li>
<li></li>
<li><!-- Not good --></li>
<li><span class="code"><select></span></li>
<li><span class="code"> <option value=<span class="atv">"1"</span> selected=<span class="atv">"selected"</span>><span class="text">1</span></option></span></li>
<li><span class="code"></select></span></li>
<li><!-- Good --></li>
<li><span class="code"><select></span></li>
<li><span class="code"> <option value=<span class="atv">"1"</span> <span class="atv">selected</span>><span class="text">1</span></option></span></li>
<li><span class="code"></select></span></li>
<li></li>
<li><span class="code"><audio src=<span class="atv">"my_voice.mp3"</span> controls=<span class="atv">"controls"</span>></span><span class="comment"> <!-- Not good --></span></li>
<li><span class="code"><audio src=<span class="atv">"my_voice.mp3"</span> <span class="atv">controls</span>></span><span class="comment"> <!-- Good --></span></li>
</ol>
</pre>
</div>
</div>
</div>
<div class="cont-box">
<h3 class="section-title item-css" id="menuCSS">CSS, SCSS</h3>
<div class="inner row">
<div class="col">
<h4>通用规则</h4>
<ul class="article">
<li>代码风格上要以具有可读性、可维护性为基本原则，压缩代码的工作交给工具去做；</li>
<li>css 文件使用无 BOM 的 <code>UTF-8</code> 编码；</li>
<li>不允许有空的规则；</li>
<li>元素选择器用小写字母；</li>
<li>不要在一个文件里出现两个相同的规则；</li>
<li>每个属性声明末尾都要加分号。</li>
</ul>
</div>
<div class="col">
<pre class="pre-box lang-css">
<div class="pre-title"></div>
<ol class="pre-cont">
<li><span class="code">.style {}</span><span class="comment"> /*-- Not good --*/</span></li>
<li></li>
<li><span class="code">UL > LI {<span class="atv">font-size: 18px;</span>}</span><span class="comment"> /*-- Not good --*/</span></li>
<li><span class="code">ul > li {<span class="atv">font-size: 18px;</span>}</span><span class="comment"> /*-- Good --*/</span></li>
<li></li>
<li><span class="code">.style {<span class="atv">color: red</span>}</span><span class="comment"> /*-- Not good --*/</span></li>
<li><span class="code">.style {<span class="atv">color: red;</span>}</span><span class="comment"> /*-- Good --*/</span></li>
</ol>
</pre>
</div>
</div>
<div class="inner row">
<div class="col">
<h4>缩进</h4>
<p class="article">
与 HTML 缩进方式一样，缩进使用 1 个 <code>Tab</code>（占 4 个空格宽度）。
</p>
</div>
<div class="col">
<pre class="pre-box lang-css">
<div class="pre-title"></div>
<ol class="pre-cont">
<li><span class="code">.style {</span></li>
<li><span class="code atv"> width: 100px;</span></li>
<li><span class="code atv"> height: 80px;</span></li>
<li><span class="code">}</span></li>
</ol>
</pre>
</div>
</div>
<div class="inner row">
<div class="col">
<h4>空格</h4>
<ul class="article">
<li>属性值前，即属性名的 <code>:</code> 后加空格；</li>
<li>多个规则的分隔符 <code>,</code> 后加空格；</li>
<li>选择器 <code>></code>、<code>+</code>、<code>~</code> 前后加空格；</li>
<li><code>{</code> 前加空格；</li>
<li><code>!important</code> 的 <code>!</code> 前加空格；</li>
<li><code>@else</code> 前后加空格；</li>
<li>属性值中的 <code>,</code> 后加空格；</li>
<li>SCSS 中的运算符前后要加空格；</li>
<li>每行行末不要有多余的空格。</li>
</ul>
</div>
<div class="col">
<pre class="pre-box lang-css">
<div class="pre-title"></div>
<ol class="pre-cont">
<li>/* Not good */</li>
<li><span class="code">.style {</span></li>
<li><span class="code atv"> color :red! important;</span></li>
<li><span class="code atv"> background-color: rgba(0,0,0,.5);</span></li>
<li><span class="code">}</span></li>
<li></li>
<li>/* Good */</li>
<li><span class="code">.style {</span></li>
<li><span class="code atv"> color: red !important;</span></li>
<li><span class="code atv"> background-color: rgba(0, 0, 0, .5);</span></li>
<li><span class="code">}</span></li>
<li></li>
<li>/* Not good */</li>
<li><span class="code">.style ,</span></li>
<li><span class="code">.box{</span></li>
<li><span class="comment"> ...</span></li>
<li><span class="code">}</span></li>
<li></li>
<li>/* Good */</li>
<li><span class="code">.style,</span></li>
<li><span class="code">.box {</span></li>
<li></li>
<li><span class="code">}</span></li>
<li></li>
<li>/* Not good */</li>
<li><span class="code">.box>.style {</span></li>
<li><span class="comment"> ...</span></li>
<li><span class="code">}</span></li>
<li></li>
<li>/* Good */</li>
<li><span class="code">.box > .style {</span></li>
<li><span class="comment"> ...</span></li>
<li><span class="code">}</span></li>
<li></li>
<li>/* Not good */</li>
<li><span class="code">.style{</span></li>
<li><span class="comment"> ...</span></li>
<li><span class="code">}</span></li>
<li></li>
<li>/* Good */</li>
<li><span class="code">.style {</span></li>
<li><span class="comment"> ...</span></li>
<li><span class="code">}</span></li>
<li></li>
<li>/* Not good */</li>
<li><span class="code">@if(<span class="atv">$variable*2>10</span>){</span></li>
<li><span class="comment"> ...</span></li>
<li><span class="code">}@else{</span></li>
<li><span class="comment"> ...</span></li>
<li><span class="code">}</span></li>
<li></li>
<li>/* Good */</li>
<li><span class="code">@if (<span class="atv">$variable * 2 > 10</span>) {</span></li>
<li><span class="comment"> ...</span></li>
<li><span class="code">} @else {</span></li>
<li><span class="comment"> ...</span></li>
<li><span class="code">}</span></li>
</ol>
</pre>
</div>
</div>
<div class="inner row">
<div class="col">
<h4>换行与空行</h4>
<ul class="article">
<li><code>{</code> 后和 <code>}</code> 前要换行，如果只有一条属性则例外，无需换行；</li>
<li>每个属性独占一行；</li>
<li>多个选择器的分隔符 <code>,</code> 后要换行；</li>
<li>相邻的两段样式之间要用一个空行隔开；</li>
<li>属性组之间需要有一个空行隔开。属性分组规范请参阅“<strong>声明顺序</strong>”部分。</li>
</ul>
</div>
<div class="col">
<pre class="pre-box lang-css">
<div class="pre-title"></div>
<ol class="pre-cont">
<li>/* Not good */</li>
<li><span class="code">.style</span></li>
<li><span class="code">{</span><span class="atv">color: red; background-color: black;</span><span class="code">}</span></li>
<li></li>
<li>/* Good */</li>
<li><span class="code">.style {</span></li>
<li><span class="code atv"> color: red;</span></li>
<li><span class="code atv"> background-color: black;</span></li>
<li><span class="code">}</span></li>
<li></li>
<li>/* Not good */</li>
<li><span class="code">.style {</span></li>
<li><span class="code atv"> width: 100px;</span></li>
<li><span class="code">}</span></li>
<li></li>
<li>/* Good */</li>
<li><span class="code">.style {<span class="atv">width: 100px;</span>}</span></li>
<li></li>
<li>/* Not good */</li>
<li><span class="code">.container, .form-box {</span></li>
<li><span class="comment"> ...</span></li>
<li><span class="code">}</span></li>
<li></li>
<li>/* Good */</li>
<li><span class="code">.container,</span></li>
<li><span class="code">.form-box {</span></li>
<li><span class="comment"> ...</span></li>
<li><span class="code">}</span></li>
</ol>
</pre>
</div>
</div>
<div class="inner row">
<div class="col">
<h4>引号</h4>
<ul class="article">
<li>最外层统一使用<strong>双引号</strong>；</li>
<li>属性选择器中的属性值要用引号；</li>
<li><code>font-family</code> 中含有空格的字体名需要加引号；</li>
<li><code>url</code> 的内容要用引号。</li>
</ul>
<div class="article notes">
<strong>CSS url 的内容加引号有什么好处？</strong>
<ul class="article">
<li>降低内容路径被 XSS 注入攻击的风险；</li>
<li>避免一些浏览器兼容问题。</li>
</ul>
</div>
</div>
<div class="col">
<pre class="pre-box lang-css">
<div class="pre-title"></div>
<ol class="pre-cont">
<li><span class="code">.style:before {</span></li>
<li><span class="code atv"> content: "";</span></li>
<li><span class="code atv"> background-image: url("logo.png");</span></li>
<li><span class="code">}</span></li>
<li></li>
<li><span class="code">li[data-type=<span class="atv">"single"</span>] {</span></li>
<li><span class="code atv"> font-size: 18px;</span></li>
<li><span class="code atv"> font-family: "Segoe UI", "Microsoft Yahei";</span></li>
<li><span class="code">}</span></li>
</ol>
</pre>
</div>
</div>
<div class="inner row">
<div class="col">
<h4>注释</h4>
<ul class="article">
<li>注释使用 <code>/* 注释内容 */</code>；
<li>SCSS 中单行注释用 <code>// 注释内容</code>，不会输出到编译后的 CSS 中；</li>
<li>如果希望将 SCSS 中的注释保留输出（即使在 compressed 输出模式下），则使用 <code>/*! 注释内容 */</code>；</li>
<li>注释的缩进与下一行代码保持一致；</li>
<li><code>/*</code> 之后、<code>*/</code> 之前和 <code>//</code> 之后要加一个空格；</li>
<li><code>//</code> 写在代码右侧时，其与左侧代码间隔 <code>2</code> 个空格。</li>
</ul>
<p class="article notes">
<strong>注：</strong>
<code>//</code> 注释只用于 SCSS 中。
</p>
</div>
<div class="col">
<pre class="pre-box lang-css">
<div class="pre-title"></div>
<ol class="pre-cont">
<li>/* Modal header */</li>
<li><span class="code">.modal-header {</span></li>
<li><span class="comment"> ...</span></li>
<li><span class="code">}</span></li>
<li></li>
<li>/*</li>
<li><span class="comment"> * Modal header</span></li>
<li><span class="comment"> */</span></li>
<li><span class="code">.modal-header {</span></li>
<li><span class="comment"> ...</span></li>
<li><span class="code">}</span></li>
<li></li>
<li><span class="code">.modal-header {</span></li>
<li><span class="comment"> /* 150px = left + right */</span></li>
<li><span class="code atv"> width: 150px;</span></li>
<li><span class="code"> &.wide {</span><span class="comment"> // 宽屏模式</span></li>
<li><span class="code atv"> width: 300px;</span></li>
<li><span class="code"> }</span></li>
<li><span class="code">}</span></li>
</ol>
</pre>
</div>
</div>
<div class="inner row">
<div class="col">
<h4>命名</h4>
<ul class="article">
<li>命名要符合语义，尽量避免使用拼音（约定俗成的除外，例如 youku）、无意义或理解困难、易产生歧义的字符；</li>
<li>Class 类名使用小写字母，以中划线分隔；</li>
<li>仅当作 JS 中选择器使用的 class 类名，加上 <code>js-</code> 前缀；</li>
<li>SCSS 中的变量和 placeholder 使用小写字母，中划线分隔；</li>
<li>id 采用小驼峰式命名；</li>
<li>SCSS 中的函数、混合采用小驼峰式命名。</li>
</ul>
</div>
<div class="col">
<pre class="pre-box lang-css">
<div class="pre-title"></div>
<ol class="pre-cont">
<li>/* Not good */</li>
<li><span class="code">.b { <span class="comment">...</span> }</span></li>
<li><span class="code">.yonghu-list { <span class="comment">...</span> }</span></li>
<li><span class="code">.spcart { <span class="comment">...</span> }</span></li>
<li></li>
<li>/* Good */</li>
<li><span class="code">.btn { <span class="comment">...</span> }</span></li>
<li><span class="code">.user-list { <span class="comment">...</span> }</span></li>
<li><span class="code">.shopping-cart { <span class="comment">...</span> }</span></li>
<li></li>
<li>/* class */</li>
<li><span class="code">.element-content {</span></li>
<li><span class="comment"> ...</span></li>
<li><span class="code">}</span></li>
<li></li>
<li>/* id */</li>
<li><span class="code">#myDialog {</span></li>
<li><span class="comment"> ...</span></li>
<li><span class="code">}</span></li>
<li></li>
<li>/* SCSS 变量 */</li>
<li><span class="code">$color-black: #000;</span></li>
<li></li>
<li>/* SCSS placeholder */</li>
<li><span class="code">%dialog-border {</span></li>
<li><span class="comment"> ...</span></li>
<li><span class="code">}</span></li>
<li></li>
<li>/* SCSS 函数 */</li>
<li><span class="code">@function pxToRem(<span class="atv">$px</span>) {</span></li>
<li><span class="comment"> ...</span></li>
<li><span class="code">}</span></li>
<li></li>
<li>/* SCSS 混合 */</li>
<li><span class="code">@mixin centerBlock {</span></li>
<li><span class="comment"> ...</span></li>
<li><span class="code">}</span></li>
</ol>
</pre>
</div>
</div>
<div class="inner row">
<div class="col">
<h4>声明顺序</h4>
<div class="article">
推荐的样式编写顺序依次为：
<ul class="article">
<li>Positioning（定位）</li>
<li>Box model（盒模型）</li>
<li>Typographic（排版）</li>
<li>Visual（视觉）</li>
<li>Misc（杂项）</li>
</ul>
</div>
</div>
<div class="col">
<pre class="pre-box lang-css">
<div class="pre-title"></div>
<ol class="pre-cont">
<li><span class="code">.declaration-order {</span></li>
<li><span class="comment"> /* Positioning */</span></li>
<li><span class="code atv"> position: absolute;</span></li>
<li><span class="code atv"> top: 0;</span></li>
<li><span class="code atv"> right: 0;</span></li>
<li><span class="code atv"> bottom: 0;</span></li>
<li><span class="code atv"> left: 0;</span></li>
<li><span class="code atv"> z-index: 100;</span></li>
<li></li>
<li><span class="comment"> /* Box model */</span></li>
<li><span class="code atv"> display: block;</span></li>
<li><span class="code atv"> float: right;</span></li>
<li><span class="code atv"> width: 100px;</span></li>
<li><span class="code atv"> height: 100px;</span></li>
<li></li>
<li><span class="comment"> /* Typography */</span></li>
<li><span class="code atv"> font: normal 13px "Helvetica Neue", sans-serif;</span></li>
<li><span class="code atv"> line-height: 1.5;</span></li>
<li><span class="code atv"> color: #333;</span></li>
<li><span class="code atv"> text-align: center;</span></li>
<li></li>
<li><span class="comment"> /* Visual */</span></li>
<li><span class="code atv"> background-color: #f5f5f5;</span></li>
<li><span class="code atv"> border: 1px solid #e5e5e5;</span></li>
<li><span class="code atv"> border-radius: 3px;</span></li>
<li></li>
<li><span class="comment"> /* Misc */</span></li>
<li><span class="code atv"> opacity: 1;</span></li>
<li><span class="code">}</span></li>
</ol>
</pre>
</div>
</div>
<div class="inner row">
<div class="col">
<h4>简写和省略</h4>
<ul class="article">
<li>颜色 16 进制用小写字母，可以简写的要简写；</li>
<li>根据实际情况选择属性的简写方式；</li>
<li>属性值如果是类似 <code>0.x</code> 的小数，则省略小数点前的 0；</li>
<li>属性值如果是 <code>0</code>，则省略单位。</li>
</ul>
</div>
<div class="col">
<pre class="pre-box lang-css">
<div class="pre-title"></div>
<ol class="pre-cont">
<li>/* Not good */</li>
<li><span class="code">.style {<span class="atv">color: #333333;</span>}</li>
<li><span class="code">.style {<span class="atv">padding: 0.5em 1em 0.5em 1em;</span>}</span></li>
<li><span class="code">.style {<span class="atv">margin: 0px 0px 0px 10px;</span>}</li>
<li></li>
<li>/* Good */</li>
<li><span class="code">.style {<span class="atv">color: #333;</span>}</li>
<li><span class="code">.style {<span class="atv">padding: .5em 1em;</span>}</span></li>
<li><span class="code">.style {<span class="atv">margin: 0 0 0 10px;</span>}</li>
</ol>
</pre>
</div>
</div>
<div class="inner row">
<div class="col">
<h4>前缀属性</h4>
<ul class="article">
<li>同个属性不同前缀的写法需要在垂直方向保持对齐，具体参照示例的写法；</li>
<li>无前缀的标准属性应该写在有前缀的属性后面。</li>
</ul>
<p class="article notes">如非必要，尽量不要手写前缀属性，推荐使用自动化工具来处理，例如：autoprefixer。</p>
</div>
<div class="col">
<pre class="pre-box lang-css">
<div class="pre-title"></div>
<ol class="pre-cont">
<li>/* Not good */</li>
<li><span class="code">.style {</span></li>
<li><span class="code atv"> user-select: none;</span></li>
<li><span class="code atv"> -webkit-user-select: none;</span></li>
<li><span class="code atv"> -moz-user-select: none;</span></li>
<li><span class="code atv"> -ms-user-select: none;</span></li>
<li><span class="code">}</span></li>
<li></li>
<li>/* Good */</li>
<li><span class="code">.style {</span></li>
<li><span class="code atv"> -webkit-user-select: none;</span></li>
<li><span class="code atv"> -moz-user-select: none;</span></li>
<li><span class="code atv"> -ms-user-select: none;</span></li>
<li><span class="code atv"> user-select: none;</span></li>
<li><span class="code">}</span></li>
</ol>
</pre>
</div>
</div>
<div class="inner">
<h4>杂项</h4>
<ul class="article">
<li>如果样式表文件中包含汉字（注释）或其他 Unicode 字符，建议在第一行加上 <code>@UTF-8</code> 字符集声明，避免乱码；</li>
<li>后代选择、子选择器不要超过 <strong>4</strong> 层；</li>
<li>慎用 <code>!important</code>；</li>
<li>尽量少用 <code>*</code> 选择器。</li>
</ul>
</div>
</div>
<div class="cont-box">
<h3 class="section-title item-js" id="menuJS">JavaScript</h3>
<div class="inner">
<h4>通用规则</h4>
<ul class="article">
<li>代码是写给人看的，代码排版要顾及可读性、可维护性；</li>
<li>代码尽量放在 <code>.js</code> 文件中，页面只放当前页面专用的 JS 代码；</li>
<li>js 文件使用无 BOM 的 <code>UTF-8</code> 编码；</li>
<li>代码中必须包含必要的注释；</li>
<li>不允许有空的代码块；</li>
<li>行尾不要有空白字符。</li>
</ul>
</div>
<div class="inner row">
<div class="col">
<h4>缩进</h4>
<p class="article">
与 HTML 缩进方式一样，缩进使用 1 个 <code>Tab</code>（占 4 个空格宽度）。
</p>
</div>
<div class="col">
<pre class="pre-box lang-javascript">
<div class="pre-title"></div>
<ol class="pre-cont">
<li><span class="code">var<span class="atv"> x = 1,</span></span></li>
<li><span class="code"> <span class="atv">y = 1;</span></span></li>
<li></li>
<li><span class="code">if (<span class="atv">x === y</span>) {</span></li>
<li><span class="comment"> ...</span></li>
<li><span class="code">} else {</span></li>
<li><span class="comment"> ...</span></li>
<li><span class="code">}</span></li>
</ol>
</pre>
</div>
</div>
<div class="inner row">
<div class="col">
<h4>空格</h4>
<ul class="article">
<li>运算符前后要加空格：<code>+</code>, <code>-</code>, <code>*</code>, <code>/</code>, <code>%</code>, <code>=</code>, <code><</code>, <code>></code>等；</li>
<li>代码块 <code>{</code> 前要加空格</li>
<li>下列关键字前后都需要加空格：<code>else</code>, <code>catch</code>, <code>finally</code>；</li>
<li>下列关键字后需要加空格：<code>if</code>, <code>for</code>, <code>while</code>, <code>do</code>, <code>switch</code>, <code>case</code>, <code>try</code>, <code>return</code>, <code>typeof</code>；</li>
<li>下列逻辑运算符前后需要加空格：<code>&&</code>, <code>||</code>；</li>
<li>三元运算符 <code>?</code>, <code>:</code> 前后需要加空格；</li>
<li>对象的属性值前需要加空格；</li>
<li>for 循环，分号后留有一个空格，前置条件如果有多个，逗号后留一个空格；</li>
<li>函数的参数之间要加空格；</li>
<li>一元运算符的符号前后<strong>不要</strong>加空格；</li>
<li>调用函数的 <code>(</code> 前<strong>不要</strong>加空格。</li>
</ul>
</div>
<div class="col">
<pre class="pre-box lang-javascript">
<div class="pre-title"></div>
<ol class="pre-cont">
<li><span class="code">if (<span class="atv">x && x === y</span>) {</span></li>
<li><span class="code atv"> x++;</span></li>
<li><span class="code">} else {</span></li>
<li><span class="code atv"> z = x < 10 ? '0' + x : x;</span></li>
<li><span class="code">}</span></li>
<li></li>
<li><span class="code">var <span class="atv">a</span> = {</span></li>
<li><span class="code atv"> b: 'string',</span></li>
<li><span class="code"> <span class="atv">c:</span> function() {</span></li>
<li><span class="comment"> ...</span></li>
<li><span class="code"> }</span></li>
<li><span class="code">};</span></li>
<li></li>
<li><span class="code">var <span class="atv">arr</span> = [1, 2, 3];</span></li>
<li></li>
<li><span class="code">for (var <span class="atv">i = 0, len = arr.length; i < len; i++</span>) {</li>
<li><span class="comment"> ...</span></li>
<li><span class="code">}</span></li>
<li></li>
<li><span class="code">function <span class="text">doSomething</span>(<span class="atv">a, b, c</span>) {</span></li>
<li><span class="code"> <span class="text">foo</span>();</span></li>
<li><span class="comment"> ...</span></li>
<li><span class="code">}</span></li>
</ol>
</pre>
</div>
</div>
<div class="inner row">
<div class="col">
<h4>换行与空行</h4>
<ul class="article">
<li>代码块 <code>{</code> 后和 <code>}</code> 前要换行；</li>
<li>变量赋值后要换行，如同时赋值多个变量，且赋给变量初始值时，则 <code>,</code> 后要换行；</li>
<li>同一行的代码<strong>过长</strong>时要考虑换行，具体换行规则如下：
<ul class="article">
<li>jQuery 的链式调用，在 jQuery 方法的 <code>.</code> 前换行；</li>
<li>逻辑运算语句换行时，运算符必须在新行的行首；</li>
<li>三元运算语句换行时，在 <code>?</code> 后换行。</li>
</ul>
</li>
<li>变量声明后要空一行（当变量声明在代码块的最后一行时，则无需空行）；</li>
<li>代码块后要空一行（在函数调用、数组、对象中则无需空行）。</li>
</ul>
</div>
<div class="col">
<pre class="pre-box lang-javascript">
<div class="pre-title"></div>
<ol class="pre-cont">
<li><span class="code">var<span class="atv"> x = 1,</span></span></li>
<li><span class="code"> <span class="atv">y = 1,</span></span></li>
<li><span class="code"> <span class="atv">a, b, c;</span></span></li>
<li></li>
<li><span class="code">(function(<span class="atv">$</span>) {</span></li>
<li><span class="code"> $('<span class="atv">#elementId</span>').find('<span class="atv">.a-very-long-name-sub-element</span>')</span></li>
<li><span class="code"> .css({</span></li>
<li><span class="code"> <span class="atv">color:</span> '<span class="atv">red</span>',</span></li>
<li><span class="code"> <span class="atv">fontSize:</span> '<span class="atv">18px</span>'</span></li>
<li><span class="code"> })</span></li>
<li><span class="code"> .fadeIn(<span class="atv">300</span>);</span></li>
<li><span class="code">})(<span class="atv">jQuery</span>);</span></li>
<li></li>
<li><span class="code">var <span class="atv">iHaveVeryLongName</span> = </span></li>
<li><span class="code"> ((<span class="atv">a</span> && <span class="atv">b</span>) || (<span class="atv">b</span> && <span class="atv">c</span>) || (<span class="atv">a</span> && <span class="atv">c</span>)) ?</span></li>
<li><span class="code"> <span class="atv">x</span> + <span class="atv">y</span> : <span class="atv">x</span> - <span class="atv">y</span>;</span></li>
</ol>
</pre>
</div>
</div>
<div class="inner row">
<div class="col">
<h4>分号</h4>
<ul class="article">
<li>变量声明之后要加分号；</li>
<li>表达式之后要加分号；</li>
<li><code>return</code> 语句末尾要加分号；</li>
<li><code>throw</code> 语句末尾要加分号；</li>
<li><code>break</code> 后面要加分号；</li>
<li><code>continue</code> 后面要加分号；</li>
<li><code>do-while</code> 语句末尾要加分号。</li>