-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1617 lines (1194 loc) · 75 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
<html><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0">
<title>CSS Guidelines (2.0.15) – High-level advice and guidelines for writing sane, manageable, scalable CSS</title>
<meta name="description" content="High-level advice and guidelines for writing sane, manageable, scalable CSS">
<link rel="canonical" href="http://cssguidelin.es/">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Titillium+Web:200%7CMerriweather:300italic,300,700,700italic">
<link rel="stylesheet" href="css/main.min.css">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@cssguidelines">
<meta name="twitter:domain" content="cssguidelin.es">
<meta name="twitter:creator" content="@csswizardry">
<meta name="twitter:title" content="CSS Guidelines">
<meta name="twitter:image:src" content="http://cssguidelin.es/twitter-card.png">
<meta name="twitter:description" content="High-level advice and guidelines for writing sane, manageable, scalable CSS">
<link rel="shortcut icon" href="/icon.png">
<link rel="apple-touch-icon-precomposed" href="/icon.png">
</head>
<body>
<header class="page-head">
<div class="wrapper">
<div class="logo-wrap">
<svg class="logo" preserveAspectRatio="xMinYMin meet" viewBox="0 0 180 60" xmlns="http://www.w3.org/2000/svg"><g><path d="M175.182 46.117c-.754-.453-1.322-1.046-1.704-1.777-.382-.731-.573-1.571-.573-2.519v-2.581c0-1.381-.258-2.367-.775-2.959-.516-.592-1.353-.889-2.51-.889-.351 0-.602-.077-.751-.232-.15-.155-.225-.428-.225-.819 0-.391.075-.664.225-.819.15-.155.4-.232.751-.232 1.808 0 3.195.471 4.16 1.414.966.943 1.449 2.393 1.449 4.35v2.612c0 1.123.269 1.973.806 2.55.537.577 1.379.865 2.526.865.351 0 .602.077.751.232.15.155.225.428.225.819 0 .391-.075.664-.225.819-.15.155-.4.232-.751.232-1.147 0-1.988.286-2.526.858-.537.572-.806 1.419-.806 2.542v3.292c0 1.968-.483 3.42-1.449 4.358-.966.938-2.353 1.406-4.16 1.406-.351 0-.602-.077-.751-.232-.15-.155-.225-.428-.225-.819 0-.391.075-.664.225-.819.15-.155.4-.232.751-.232 1.157 0 1.994-.296 2.51-.889.516-.592.775-1.579.775-2.959v-3.261c0-.948.191-1.79.573-2.527.382-.737.95-1.332 1.704-1.785zm-18.165-4.559c0-.361.07-.698.209-1.012.139-.314.328-.59.566-.827.238-.237.514-.425.829-.564.315-.139.653-.209 1.015-.209.362 0 .7.07 1.015.209.315.139.591.327.829.564.238.237.426.513.566.827.139.314.209.652.209 1.012 0 .361-.07.698-.209 1.012-.139.314-.328.59-.566.827-.238.237-.514.425-.829.564-.315.139-.653.209-1.015.209-.362 0-.7-.07-1.015-.209-.315-.139-.591-.327-.829-.564-.238-.237-.426-.513-.566-.827-.139-.314-.209-.652-.209-1.012zm.852 15.917c-.114.216-.261.376-.442.479-.181.103-.374.155-.581.155-.145 0-.279-.023-.403-.07-.124-.046-.232-.113-.325-.201-.093-.088-.158-.193-.194-.317-.036-.124-.039-.268-.008-.433l1.611-7.448c.093-.412.362-.618.806-.618h3.006c.258 0 .431.095.519.286.088.191.059.42-.085.688l-3.905 7.479zm-.832-38.648c0-.361.07-.698.209-1.012.139-.314.328-.59.566-.827.238-.237.514-.425.829-.564.315-.139.653-.209 1.015-.209.362 0 .7.07 1.015.209.315.139.591.327.829.564.238.237.426.513.566.827.139.314.209.652.209 1.012 0 .361-.07.698-.209 1.012-.139.314-.328.59-.566.827-.238.237-.514.425-.829.564-.315.139-.653.209-1.015.209-.362 0-.7-.07-1.015-.209-.315-.139-.591-.327-.829-.564-.238-.237-.426-.513-.566-.827-.139-.314-.209-.652-.209-1.012zm0-9.736c0-.361.07-.698.209-1.012.139-.314.328-.59.566-.827.238-.237.514-.425.829-.564.315-.139.653-.209 1.015-.209.362 0 .7.07 1.015.209.315.139.591.327.829.564.238.237.426.513.566.827.139.314.209.652.209 1.012 0 .361-.07.698-.209 1.012-.139.314-.328.59-.566.827-.238.237-.514.425-.829.564-.315.139-.653.209-1.015.209-.362 0-.7-.07-1.015-.209-.315-.139-.591-.327-.829-.564-.238-.237-.426-.513-.566-.827-.139-.314-.209-.652-.209-1.012zm-97.658 4.559c.754.453 1.322 1.048 1.704 1.785.382.737.573 1.579.573 2.527v3.261c0 .69.062 1.28.186 1.769.124.489.318.889.581 1.198.263.309.604.533 1.023.672.418.139.917.209 1.495.209.351 0 .602.077.751.232.15.155.225.428.225.819 0 .391-.075.664-.225.819-.15.155-.4.232-.751.232-1.808 0-3.195-.469-4.16-1.406-.966-.938-1.449-2.39-1.449-4.358v-3.292c0-1.123-.269-1.97-.806-2.542-.537-.572-1.379-.858-2.526-.858-.351 0-.602-.077-.751-.232-.15-.155-.225-.428-.225-.819 0-.391.075-.664.225-.819.15-.155.4-.232.751-.232 1.147 0 1.988-.288 2.526-.865.537-.577.806-1.427.806-2.55v-2.612c0-1.957.483-3.407 1.449-4.35.966-.943 2.353-1.414 4.16-1.414.351 0 .602.077.751.232.15.155.225.428.225.819 0 .391-.075.664-.225.819-.15.155-.4.232-.751.232-.578 0-1.077.07-1.495.209-.418.139-.759.363-1.023.672-.263.309-.457.708-.581 1.198-.124.489-.186 1.079-.186 1.769v2.581c0 .948-.191 1.787-.573 2.519-.382.731-.95 1.324-1.704 1.777z" class="logo__punctuation"></path><path d="M143.625 52.901c0 .361-.085.618-.256.773-.17.155-.473.232-.906.232-.434 0-.736-.077-.906-.232-.17-.155-.256-.412-.256-.773v-3.709c0-.361.085-.618.256-.773.17-.155.473-.232.906-.232.227 0 .403.052.527.155.124.103.227.263.31.479.382.999 1.007 1.723 1.875 2.171.868.448 2.019.672 3.455.672 1.24 0 2.169-.219 2.789-.657.62-.438.93-1.012.93-1.723 0-.371-.119-.667-.356-.889-.238-.221-.558-.399-.961-.533-.455-.155-.981-.268-1.58-.34-.599-.072-1.229-.144-1.89-.216-.661-.072-1.32-.165-1.976-.278-.656-.113-1.263-.278-1.821-.495-.351-.134-.671-.299-.961-.495-.289-.196-.54-.428-.751-.695-.212-.268-.377-.577-.496-.927-.119-.35-.178-.752-.178-1.205 0-.69.139-1.301.418-1.831.279-.531.664-.976 1.154-1.337.491-.361 1.069-.634 1.735-.819.666-.185 1.392-.278 2.177-.278 1.033 0 1.96.152 2.781.456.821.304 1.526.719 2.115 1.244v-.695c0-.361.085-.618.256-.773.17-.155.473-.232.906-.232.434 0 .736.077.906.232.17.155.256.412.256.773v2.936c0 .361-.085.618-.256.773-.17.155-.473.232-.906.232-.351 0-.599-.134-.744-.402-.238-.443-.524-.814-.86-1.113-.336-.299-.723-.536-1.162-.711-.439-.175-.922-.299-1.449-.371-.527-.072-1.09-.108-1.689-.108-1.002 0-1.784.175-2.347.525-.563.35-.844.85-.844 1.499 0 .34.111.613.333.819.222.206.529.371.922.495.434.144.94.25 1.518.317.578.067 1.188.134 1.828.201.64.067 1.286.149 1.937.247s1.255.25 1.813.456c.382.144.733.317 1.054.518.32.201.597.443.829.726.232.283.413.613.542.989.129.376.194.811.194 1.306 0 .69-.132 1.319-.395 1.885-.263.567-.651 1.053-1.162 1.46-.511.407-1.141.721-1.89.943-.749.221-1.604.332-2.564.332-1.126 0-2.11-.155-2.952-.464-.842-.309-1.578-.778-2.208-1.406v.865zm-16.44-5.903c.083 1.556.514 2.722 1.294 3.5s1.893 1.167 3.339 1.167c1.043 0 2.056-.118 3.037-.355.981-.237 1.828-.561 2.541-.974.331-.185.607-.201.829-.046.222.155.4.397.535.726.145.33.176.626.093.889-.083.263-.294.482-.635.657-.403.196-.85.376-1.34.541-.491.165-1.012.306-1.565.425-.553.118-1.123.211-1.712.278-.589.067-1.183.1-1.782.1-1.136 0-2.143-.173-3.021-.518-.878-.345-1.617-.84-2.216-1.484-.599-.644-1.056-1.427-1.371-2.349-.315-.922-.473-1.965-.473-3.129 0-1.123.183-2.145.55-3.067.367-.922.875-1.71 1.526-2.364.651-.654 1.428-1.159 2.332-1.514.904-.355 1.898-.533 2.983-.533 1.147 0 2.159.178 3.037.533.878.355 1.619.847 2.224 1.476.604.628 1.072 1.375 1.402 2.241.331.865.527 1.813.589 2.843 0 .35-.075.598-.225.742-.15.144-.4.216-.751.216h-11.218zm4.943-5.81c-1.291 0-2.347.322-3.169.966-.821.644-1.361 1.538-1.619 2.681h9.467c-.217-1.164-.708-2.063-1.472-2.697-.764-.634-1.834-.95-3.207-.95zm-22.617.201h-1.58c-.351 0-.602-.077-.751-.232-.15-.155-.225-.428-.225-.819 0-.391.075-.664.225-.819.15-.155.4-.232.751-.232h2.774c.351 0 .602.077.751.232.15.155.225.428.225.819v1.854c.682-1.061 1.477-1.867 2.386-2.418.909-.551 1.896-.827 2.96-.827.713 0 1.353.118 1.921.355.568.237 1.051.572 1.449 1.004.398.433.702.961.914 1.584.212.623.318 1.321.318 2.094v7.479h1.271c.351 0 .602.077.751.232.15.155.225.428.225.819 0 .391-.075.664-.225.819-.15.155-.4.232-.751.232h-5.02c-.351 0-.602-.077-.751-.232-.15-.155-.225-.428-.225-.819 0-.391.075-.664.225-.819.15-.155.4-.232.751-.232h1.426v-7.248c0-.443-.052-.847-.155-1.213-.103-.366-.258-.68-.465-.943-.207-.263-.467-.466-.782-.61-.315-.144-.684-.216-1.108-.216-.661 0-1.291.144-1.89.433-.599.288-1.126.69-1.58 1.205-.455.515-.816 1.128-1.085 1.839-.269.711-.403 1.489-.403 2.333v4.42h1.426c.351 0 .602.077.751.232.15.155.225.428.225.819 0 .391-.075.664-.225.819-.15.155-.4.232-.751.232h-5.02c-.351 0-.602-.077-.751-.232-.15-.155-.225-.428-.225-.819 0-.391.075-.664.225-.819.15-.155.4-.232.751-.232h1.271v-10.076zm-12.732 0h-3.92c-.351 0-.602-.077-.751-.232-.15-.155-.225-.428-.225-.819 0-.391.075-.664.225-.819.15-.155.4-.232.751-.232h5.268c.351 0 .602.077.751.232.15.155.225.428.225.819v11.126h4.974c.351 0 .602.077.751.232.15.155.225.428.225.819 0 .391-.075.664-.225.819-.15.155-.4.232-.751.232h-12.148c-.351 0-.602-.077-.751-.232-.15-.155-.225-.428-.225-.819 0-.391.075-.664.225-.819.15-.155.4-.232.751-.232h4.85v-10.076zm2.324-5.872c0 .361-.098.618-.294.773-.196.155-.589.232-1.178.232s-.981-.077-1.178-.232c-.196-.155-.294-.412-.294-.773v-2.009c0-.361.098-.618.294-.773.196-.155.589-.232 1.178-.232s.981.077 1.178.232c.196.155.294.412.294.773v2.009zm-18.532-.124h-4.23c-.351 0-.602-.077-.751-.232-.15-.155-.225-.428-.225-.819 0-.391.075-.664.225-.819.15-.155.4-.232.751-.232h5.578c.351 0 .602.077.751.232.15.155.225.428.225.819v17.122h4.974c.351 0 .602.077.751.232.15.155.225.428.225.819 0 .391-.075.664-.225.819-.15.155-.4.232-.751.232h-12.148c-.351 0-.602-.077-.751-.232-.15-.155-.225-.428-.225-.819 0-.391.075-.664.225-.819.15-.155.4-.232.751-.232h4.85v-16.071zm62.026-20.862c.083 1.556.514 2.722 1.294 3.5s1.893 1.167 3.339 1.167c1.043 0 2.056-.118 3.037-.355.981-.237 1.828-.561 2.541-.974.331-.185.607-.201.829-.046.222.155.4.397.535.726.145.33.176.626.093.889-.083.263-.294.482-.635.657-.403.196-.85.376-1.34.541-.491.165-1.012.306-1.565.425-.553.118-1.123.211-1.712.278-.589.067-1.183.1-1.782.1-1.136 0-2.143-.173-3.021-.518-.878-.345-1.617-.84-2.216-1.484-.599-.644-1.056-1.427-1.371-2.349-.315-.922-.473-1.965-.473-3.129 0-1.123.183-2.145.55-3.067.367-.922.875-1.71 1.526-2.364.651-.654 1.428-1.159 2.332-1.514.904-.355 1.898-.533 2.983-.533 1.147 0 2.159.178 3.037.533.878.355 1.619.847 2.224 1.476.604.628 1.072 1.375 1.402 2.241.331.865.527 1.813.589 2.843 0 .35-.075.598-.225.742-.15.144-.4.216-.751.216h-11.218zm4.943-5.81c-1.291 0-2.347.322-3.169.966-.821.644-1.361 1.538-1.619 2.681h9.467c-.217-1.164-.708-2.063-1.472-2.697-.764-.634-1.834-.95-3.207-.95zm-9.199 10.276c.351 0 .602.077.751.232.15.155.225.428.225.819 0 .391-.075.664-.225.819-.15.155-.4.232-.751.232h-2.464c-.351 0-.602-.077-.751-.232-.15-.155-.225-.428-.225-.819v-1.236c-.64.834-1.387 1.481-2.239 1.939-.852.458-1.795.688-2.828.688-.961 0-1.849-.162-2.665-.487-.816-.325-1.521-.791-2.115-1.399-.594-.608-1.061-1.35-1.402-2.225-.341-.876-.511-1.87-.511-2.982 0-1.113.17-2.107.511-2.982.341-.876.808-1.617 1.402-2.225.594-.608 1.299-1.074 2.115-1.399.816-.325 1.704-.487 2.665-.487 1.033 0 1.955.209 2.766.626.811.417 1.526 1.012 2.146 1.785v-6.738h-3.13c-.351 0-.602-.077-.751-.232-.15-.155-.225-.428-.225-.819 0-.391.075-.664.225-.819.15-.155.4-.232.751-.232h4.478c.351 0 .602.077.751.232.15.155.225.428.225.819v17.122h1.271zm-3.595-4.651c0-.762-.119-1.442-.356-2.04-.238-.598-.568-1.1-.992-1.507-.424-.407-.927-.719-1.511-.935-.584-.216-1.216-.325-1.898-.325-.702 0-1.327.118-1.875.355-.547.237-1.007.569-1.379.997-.372.428-.656.935-.852 1.522-.196.587-.294 1.231-.294 1.932 0 .701.098 1.344.294 1.932.196.587.48 1.095.852 1.522.372.428.832.76 1.379.997s1.172.355 1.875.355c.682 0 1.314-.108 1.898-.325.584-.216 1.087-.528 1.511-.935.424-.407.754-.909.992-1.507.238-.598.356-1.277.356-2.04zm-20.241-5.424h-3.92c-.351 0-.602-.077-.751-.232-.15-.155-.225-.428-.225-.819 0-.391.075-.664.225-.819.15-.155.4-.232.751-.232h5.268c.351 0 .602.077.751.232.15.155.225.428.225.819v11.126h4.974c.351 0 .602.077.751.232.15.155.225.428.225.819 0 .391-.075.664-.225.819-.15.155-.4.232-.751.232h-12.148c-.351 0-.602-.077-.751-.232-.15-.155-.225-.428-.225-.819 0-.391.075-.664.225-.819.15-.155.4-.232.751-.232h4.85v-10.076zm2.324-5.872c0 .361-.098.618-.294.773-.196.155-.589.232-1.178.232s-.981-.077-1.178-.232c-.196-.155-.294-.412-.294-.773v-2.009c0-.361.098-.618.294-.773.196-.155.589-.232 1.178-.232s.981.077 1.178.232c.196.155.294.412.294.773v2.009zm-11.012 15.948c.351 0 .602.077.751.232.15.155.225.428.225.819 0 .391-.075.664-.225.819-.15.155-.4.232-.751.232h-2.464c-.351 0-.602-.075-.751-.224-.15-.149-.225-.42-.225-.811v-1.87c-.682 1.061-1.477 1.867-2.386 2.418-.909.551-1.896.827-2.96.827-.713 0-1.353-.118-1.921-.355-.568-.237-1.051-.572-1.449-1.004-.398-.433-.702-.961-.914-1.584-.212-.623-.318-1.321-.318-2.094v-7.479h-1.271c-.351 0-.602-.077-.751-.232-.15-.155-.225-.428-.225-.819 0-.391.075-.664.225-.819.15-.155.4-.232.751-.232h2.619c.351 0 .602.077.751.232.15.155.225.428.225.819v8.298c0 .443.052.847.155 1.213.103.366.258.68.465.943.207.263.467.466.782.61.315.144.684.216 1.108.216.661 0 1.291-.144 1.89-.433.599-.288 1.126-.69 1.58-1.205.455-.515.816-1.128 1.085-1.839.269-.711.403-1.489.403-2.333v-4.42h-2.2c-.351 0-.602-.077-.751-.232-.15-.155-.225-.428-.225-.819 0-.391.075-.664.225-.819.15-.155.4-.232.751-.232h3.548c.351 0 .602.077.751.232.15.155.225.428.225.819v11.126h1.271zm-30.835 5.362c.713.299 1.462.518 2.247.657.785.139 1.555.209 2.309.209.692 0 1.294-.09 1.805-.27.511-.18.935-.438 1.271-.773.336-.335.586-.734.751-1.198.165-.464.248-.979.248-1.545v-3.183c-.62.773-1.335 1.368-2.146 1.785-.811.417-1.733.626-2.766.626-.961 0-1.849-.162-2.665-.487-.816-.325-1.521-.791-2.115-1.399-.594-.608-1.061-1.35-1.402-2.225-.341-.876-.511-1.87-.511-2.982 0-1.113.17-2.107.511-2.982.341-.876.808-1.617 1.402-2.225.594-.608 1.299-1.074 2.115-1.399.816-.325 1.704-.487 2.665-.487 1.033 0 1.976.229 2.828.688.852.458 1.599 1.105 2.239 1.939v-1.236c0-.391.075-.664.225-.819.15-.155.4-.232.751-.232h2.464c.351 0 .602.077.751.232.15.155.225.428.225.819 0 .391-.075.664-.225.819-.15.155-.4.232-.751.232h-1.271v12.718c0 .927-.142 1.754-.426 2.48-.284.726-.7 1.339-1.247 1.839-.547.5-1.219.883-2.014 1.151-.795.268-1.699.402-2.712.402-.899 0-1.803-.077-2.712-.232-.909-.155-1.772-.386-2.588-.695-.279-.113-.462-.283-.55-.51-.088-.227-.065-.536.07-.927.134-.391.307-.649.519-.773.212-.124.447-.129.705-.015zm8.631-10.786c0-.762-.119-1.442-.356-2.04-.238-.598-.568-1.1-.992-1.507-.424-.407-.927-.719-1.511-.935-.584-.216-1.216-.325-1.898-.325-.702 0-1.327.118-1.875.355-.547.237-1.007.569-1.379.997-.372.428-.656.935-.852 1.522-.196.587-.294 1.231-.294 1.932 0 .701.098 1.344.294 1.932.196.587.48 1.095.852 1.522.372.428.832.76 1.379.997s1.172.355 1.875.355c.682 0 1.314-.108 1.898-.325.584-.216 1.087-.528 1.511-.935.424-.407.754-.909.992-1.507.238-.598.356-1.277.356-2.04zm-48.225 6.861c0 .361-.085.618-.256.773-.17.155-.473.232-.906.232-.434 0-.736-.077-.906-.232-.17-.155-.256-.412-.256-.773v-3.709c0-.361.085-.618.256-.773.17-.155.473-.232.906-.232.227 0 .403.052.527.155.124.103.227.263.31.479.382.999 1.007 1.723 1.875 2.171.868.448 2.019.672 3.455.672 1.24 0 2.169-.219 2.789-.657.62-.438.93-1.012.93-1.723 0-.371-.119-.667-.356-.889-.238-.221-.558-.399-.961-.533-.455-.155-.981-.268-1.58-.34-.599-.072-1.229-.144-1.89-.216-.661-.072-1.32-.165-1.976-.278-.656-.113-1.263-.278-1.821-.495-.351-.134-.671-.299-.961-.495-.289-.196-.54-.428-.751-.695-.212-.268-.377-.577-.496-.927-.119-.35-.178-.752-.178-1.205 0-.69.139-1.301.418-1.831.279-.531.664-.976 1.154-1.337.491-.361 1.069-.634 1.735-.819.666-.185 1.392-.278 2.177-.278 1.033 0 1.96.152 2.781.456.821.304 1.526.719 2.115 1.244v-.695c0-.361.085-.618.256-.773.17-.155.473-.232.906-.232.434 0 .736.077.906.232.17.155.256.412.256.773v2.936c0 .361-.085.618-.256.773-.17.155-.473.232-.906.232-.351 0-.599-.134-.744-.402-.238-.443-.524-.814-.86-1.113-.336-.299-.723-.536-1.162-.711-.439-.175-.922-.299-1.449-.371-.527-.072-1.09-.108-1.689-.108-1.002 0-1.784.175-2.347.525-.563.35-.844.85-.844 1.499 0 .34.111.613.333.819.222.206.529.371.922.495.434.144.94.25 1.518.317.578.067 1.188.134 1.828.201.64.067 1.286.149 1.937.247s1.255.25 1.813.456c.382.144.733.317 1.054.518.32.201.597.443.829.726.232.283.413.613.542.989.129.376.194.811.194 1.306 0 .69-.132 1.319-.395 1.885-.263.567-.651 1.053-1.162 1.46-.511.407-1.141.721-1.89.943-.749.221-1.604.332-2.564.332-1.126 0-2.11-.155-2.952-.464-.842-.309-1.578-.778-2.208-1.406v.865zm-15.722 0c0 .361-.085.618-.256.773-.17.155-.473.232-.906.232-.434 0-.736-.077-.906-.232-.17-.155-.256-.412-.256-.773v-3.709c0-.361.085-.618.256-.773.17-.155.473-.232.906-.232.227 0 .403.052.527.155.124.103.227.263.31.479.382.999 1.007 1.723 1.875 2.171.868.448 2.019.672 3.455.672 1.24 0 2.169-.219 2.789-.657.62-.438.93-1.012.93-1.723 0-.371-.119-.667-.356-.889-.238-.221-.558-.399-.961-.533-.455-.155-.981-.268-1.58-.34-.599-.072-1.229-.144-1.89-.216-.661-.072-1.32-.165-1.976-.278-.656-.113-1.263-.278-1.821-.495-.351-.134-.671-.299-.961-.495-.289-.196-.54-.428-.751-.695-.212-.268-.377-.577-.496-.927-.119-.35-.178-.752-.178-1.205 0-.69.139-1.301.418-1.831.279-.531.664-.976 1.154-1.337.491-.361 1.069-.634 1.735-.819.666-.185 1.392-.278 2.177-.278 1.033 0 1.96.152 2.781.456.821.304 1.526.719 2.115 1.244v-.695c0-.361.085-.618.256-.773.17-.155.473-.232.906-.232.434 0 .736.077.906.232.17.155.256.412.256.773v2.936c0 .361-.085.618-.256.773-.17.155-.473.232-.906.232-.351 0-.599-.134-.744-.402-.238-.443-.524-.814-.86-1.113-.336-.299-.723-.536-1.162-.711-.439-.175-.922-.299-1.449-.371-.527-.072-1.09-.108-1.689-.108-1.002 0-1.784.175-2.347.525-.563.35-.844.85-.844 1.499 0 .34.111.613.333.819.222.206.529.371.922.495.434.144.94.25 1.518.317.578.067 1.188.134 1.828.201.64.067 1.286.149 1.937.247s1.255.25 1.813.456c.382.144.733.317 1.054.518.32.201.597.443.829.726.232.283.413.613.542.989.129.376.194.811.194 1.306 0 .69-.132 1.319-.395 1.885-.263.567-.651 1.053-1.162 1.46-.511.407-1.141.721-1.89.943-.749.221-1.604.332-2.564.332-1.126 0-2.11-.155-2.952-.464-.842-.309-1.578-.778-2.208-1.406v.865zm-7.221-8.468c0-.464-.093-.891-.279-1.283-.186-.391-.462-.729-.829-1.012-.367-.283-.819-.505-1.356-.664-.537-.16-1.162-.24-1.875-.24-.754 0-1.449.129-2.084.386-.635.258-1.18.618-1.635 1.082-.455.464-.811 1.012-1.069 1.646-.258.634-.387 1.326-.387 2.078 0 .752.119 1.445.356 2.078.238.634.576 1.182 1.015 1.646.439.464.968.824 1.588 1.082.62.258 1.307.386 2.061.386.95 0 1.87-.144 2.758-.433.888-.288 1.704-.716 2.448-1.283.269-.206.522-.283.759-.232.238.052.465.258.682.618.176.278.25.567.225.865-.026.299-.189.556-.488.773-.837.618-1.813 1.102-2.929 1.453-1.116.35-2.267.525-3.455.525-1.136 0-2.164-.188-3.083-.564-.919-.376-1.704-.899-2.355-1.569-.651-.67-1.152-1.46-1.503-2.372-.351-.912-.527-1.903-.527-2.975 0-1.071.181-2.063.542-2.975.362-.912.87-1.702 1.526-2.372.656-.67 1.441-1.192 2.355-1.569.914-.376 1.929-.564 3.045-.564.94 0 1.792.167 2.557.502.764.335 1.41.811 1.937 1.429v-.927c0-.361.085-.618.256-.773.17-.155.473-.232.906-.232.434 0 .736.077.906.232.17.155.256.412.256.773v4.481c0 .361-.085.618-.256.773-.17.155-.473.232-.906.232-.434 0-.736-.077-.906-.232-.17-.155-.256-.412-.256-.773z" class="logo__character"></path></g></svg>
</div>
</div>
</header>
<div class="wrapper">
<h1 class="hide">CSS Guidelines</h1>
<h2 class="alpha site-title">High-level advice and guidelines for writing sane, manageable, scalable CSS</h2>
<h2 id="about-the-author">About the Author</h2>
<p><cite>CSS Guidelines</cite> is a document by me, <a href="http://csswizardry.com/work/">Harry
Roberts</a>. I am a Consultant Front-end Architect
from the UK, and I help companies all over the world write and manage better
quality UIs for their products and teams. I am available for hire.</p>
<p class="text-center">
<a href="https://twitter.com/csswizardry" class="btn btn--secondary"><span class="hide-palm">Follow me on </span>Twitter</a>
or <a href="http://csswizardry.com/work/" class="btn">Hire<span class="hide-palm"> Me</span></a>
</p>
<hr>
<h2 id="support-the-guidelines">Support the Guidelines</h2>
<p><cite>CSS Guidelines</cite> is provided through a pay-what-you-like model—from
$0 upward. If <cite>CSS Guidelines</cite> is useful to you or your team, please
consider <a href="https://gumroad.com/l/JAgjq">supporting it</a>.</p>
<p class="text-center">
<a href="https://gumroad.com/l/JAgjq" class="btn">Support the Guidelines</a>
</p>
<p>Get updates about changes, additions, and new and upcoming sections by following
<a href="https://twitter.com/cssguidelines">@cssguidelines</a> on Twitter.</p>
<hr>
<h2 id="contents">Contents</h2>
<ul>
<li><a href="#introduction">Introduction</a>
<ul>
<li><a href="#the-importance-of-a-styleguide">The Importance of a Styleguide</a></li>
<li><a href="#disclaimers">Disclaimers</a></li>
</ul>
</li>
<li><a href="#syntax-and-formatting">Syntax and Formatting</a>
<ul>
<li><a href="#multiple-files">Multiple Files</a></li>
<li><a href="#table-of-contents">Table of Contents</a></li>
<li><a href="#characters-wide">80 Characters Wide</a></li>
<li><a href="#titling">Titling</a></li>
<li><a href="#anatomy-of-a-ruleset">Anatomy of a Ruleset</a></li>
<li><a href="#multi-line-css">Multi-line CSS</a></li>
<li><a href="#indenting">Indenting</a>
<ul>
<li><a href="#indenting-sass">Indenting Sass</a></li>
<li><a href="#alignment">Alignment</a></li>
</ul>
</li>
<li><a href="#meaningful-whitespace">Meaningful Whitespace</a></li>
<li><a href="#html">HTML</a></li>
</ul>
</li>
<li><a href="#commenting">Commenting</a>
<ul>
<li><a href="#high-level">High-level</a>
<ul>
<li><a href="#objectextension-pointers">Object–Extension Pointers</a></li>
</ul>
</li>
<li><a href="#low-level">Low-level</a></li>
<li><a href="#preprocessor-comments">Preprocessor Comments</a></li>
<li><a href="#removing-comments">Removing Comments</a></li>
</ul>
</li>
<li><a href="#naming-conventions">Naming Conventions</a>
<ul>
<li><a href="#hyphen-delimited">Hyphen Delimited</a></li>
<li><a href="#bem-like-naming">BEM-like Naming</a>
<ul>
<li><a href="#starting-context">Starting Context</a></li>
<li><a href="#more-layers">More Layers</a></li>
<li><a href="#modifying-elements">Modifying Elements</a></li>
</ul>
</li>
<li><a href="#naming-conventions-in-html">Naming Conventions in HTML</a></li>
<li><a href="#javascript-hooks">JavaScript Hooks</a>
<ul>
<li><a href="#data--attributes"><code>data-*</code> Attributes</a></li>
</ul>
</li>
<li><a href="#taking-it-further">Taking It Further</a></li>
</ul>
</li>
<li><a href="#css-selectors">CSS Selectors</a>
<ul>
<li><a href="#selector-intent">Selector Intent</a></li>
<li><a href="#reusability">Reusability</a></li>
<li><a href="#location-independence">Location Independence</a></li>
<li><a href="#portability">Portability</a>
<ul>
<li><a href="#quasi-qualified-selectors">Quasi-Qualified Selectors</a></li>
</ul>
</li>
<li><a href="#naming">Naming</a>
<ul>
<li><a href="#naming-ui-components">Naming UI Components</a></li>
</ul>
</li>
<li><a href="#selector-performance">Selector Performance</a>
<ul>
<li><a href="#the-key-selector">The Key Selector</a></li>
</ul>
</li>
<li><a href="#general-rules">General Rules</a></li>
</ul>
</li>
</ul>
<h3 id="up-next">Up Next</h3>
<ul>
<li>Specificity</li>
<li>Architecture</li>
<li>Preprocessors</li>
<li>Layout</li>
<li>Performance</li>
<li>Code Smells</li>
<li>Legacy, Hacks, and Technical Debt</li>
</ul>
<hr>
<h2 id="introduction">Introduction</h2>
<p>
CSS 是一门容易学习和上手的语言，但它并不完美。
我们并不能改变 CSS 如何工作，但可以改变编写 CSS 代码的习惯，让它变得更美好。
</p>
<p>在大型项目中，你会与不同类型和能力的工程师协作，为了保持代码的一致性需要完成以下几点：</p>
<ul>
<li>保持代码清晰、可读</li>
<li>保持样式（stylesheets）可维护</li>
<li>保持样式（stylesheets）灵活</li>
</ul>
<p>为了满足以上目标，我们需要应用多种技巧，而 <cite>CSS Guideline</cite> 是最重要的技巧之一。</p>
<h3 id="the-importance-of-a-styleguide">The Importance of a Styleguide</h3>
<p>编码风格指南（注意，不止是视觉风格指南）对于以下这样的团队是有价值的</p>
<ul>
<li>需要在一段合理的时间内构建和维护产品</li>
<li>拥有不同类型和能力的工程师们相互协作</li>
<li>新人需要了解项目</li>
<li>大量的源码需要反复使用</li>
</ul>
<p>优秀的编码风格指南，需要满足以下几点：</p>
<ul>
<li>设置代码质量标准</li>
<li>提升代码一致性</li>
<li>当开发者阅读源码时，不会感到陌生</li>
<li>提升生产效率</li>
</ul>
<h3 id="disclaimers">Disclaimers</h3>
<p>
CSS guideline 不仅仅是一份编码风格指南，它包含一套方法和技巧，是经过多年实战尝试，考验和重构所提取出来的精华。
我强力地推荐给我的客户和团队，你也可以根据自身需求进行调整。
</p>
<hr>
<p>CSS is not a pretty language While it is simple to learn and get started with,
it soon becomes problematic at any reasonable scale. There isn’t much we can do
to change how CSS works, but we can make changes to the way we author and
structure it.</p>
<p>In working on large, long-running projects, with dozens of developers of
differing specialities and abilities, it is important that we all work in a
unified way in order to—among other things—</p>
<ul>
<li>keep stylesheets maintainable;</li>
<li>keep code transparent, sane, and readable;</li>
<li>keep stylesheets scalable.</li>
</ul>
<p>There are a variety of techniques we must employ in order to satisfy these
goals, and <cite>CSS Guidelines</cite> is a document of recommendations and
approaches that will help us to do so.</p>
<h3 id="the-importance-of-a-styleguide">The Importance of a Styleguide</h3>
<p>A coding styleguide (note, not a visual styleguide) is a valuable tool for teams
who</p>
<ul>
<li>build and maintain products for a reasonable length of time;</li>
<li>have developers of differing abilities and specialisms;</li>
<li>have a number of different developers working on a product at any given time;</li>
<li>on-board new staff regularly;</li>
<li>have a number of codebases that developers dip in and out of.</li>
</ul>
<p>Whilst styleguides are typically more suited to product teams—large codebases on
long-lived and evolving projects, with multiple developers contributing over
prolonged periods of time—all developers should strive for a degree of
standardisation in their code.</p>
<p>A good styleguide, when well followed, will</p>
<ul>
<li>set the standard for code quality across a codebase;</li>
<li>promote consistency across codebases;</li>
<li>give developers a feeling of familiarity across codebases;</li>
<li>increase productivity.</li>
</ul>
<p>Styleguides should be learned, understood, and implemented at all times on a
project which is governed by one, and any deviation must be fully justified.</p>
<h3 id="disclaimers">Disclaimers</h3>
<p><cite>CSS Guidelines</cite> is <em>a</em> styleguide; it is not <em>the</em> styleguide. It
contains methodologies, techniques, and tips that I would firmly recommend to my
clients and teams, but your own tastes and circumstances may well be different.
Your mileage may vary.</p>
<p>These guidelines are opinionated, but they have been repeatedly tried, tested,
stressed, refined, broken, reworked, and revisited over a number of years on
projects of all sizes.</p>
<hr>
<h2 id="syntax-and-formatting">Syntax and Formatting</h2>
<p>One of the simplest forms of a styleguide is a set of rules regarding syntax and
formatting. Having a standard way of writing (<em>literally</em> writing) CSS means
that code will always look and feel familiar to all members of the team.</p>
<p>Further, code that looks clean <em>feels</em> clean. It is a much nicer environment to
work in, and prompts other team members to maintain the standard of cleanliness
that they found. Ugly code sets a bad precedent.</p>
<p>At a very high-level, we want</p>
<ul>
<li>Four (4) space indents. No tabs;</li>
<li>80 character wide columns;</li>
<li>Multi-line CSS;</li>
<li>Meaningful use of whitespace.</li>
</ul>
<p><span class="highlight" id="did-you-see-this-bit">But, as with anything, the
specifics are somewhat irrelevant—consistency is key.</span></p>
<h3 id="multiple-files">Multiple Files</h3>
<p>With the meteoric rise of preprocessors of late, more often is the case that
developers are splitting CSS across multiple files.</p>
<p>Even if not using a preprocessor, it is a good idea to split discrete chunks of
code into their own files, which are concatenated during a build step.</p>
<p>If, for whatever reason, you are not working across multiple files, the next
sections might require some bending to fit your setup.</p>
<h3 id="table-of-contents">Table of Contents</h3>
<p>A table of contents is a fairly substantial maintenance overhead, but the
benefits it brings far outweigh any costs. It takes a diligent developer to keep
a table of contents up to date, but it is well worth sticking with. An
up-to-date table of contents provides a team with a single, canonical catalogue
of what is in a CSS project, what it does, and in what order. </p>
<p>A simple table of contents will—in order, naturally—simply provide the name of
the section and a brief summary of what it is and does, for example:</p>
<pre><code>/**
* CONTENTS
*
* SETTINGS
* Global...............Globally-available variables and config.
*
* TOOLS
* Mixins...............Useful mixins.
*
* GENERIC
* Normalize.css........A level playing field.
* Box-sizing...........Better default `box-sizing`.
*
* BASE
* Headings.............H1–H6 styles.
*
* OBJECTS
* Wrappers.............Wrapping and constraining elements.
*
* COMPONENTS
* Page-head............The main page header.
* Page-foot............The main page footer.
* Buttons..............Button elements.
*
* TRUMPS
* Text.................Text helpers.
*/
</code></pre>
<p>Each item maps to a section and/or include.</p>
<p>Naturally, this section would be substantially larger on the majority of
projects, but hopefully we can see how this section—in the master
stylesheet—provides developers with a project-wide view of what is being used
where, and why.</p>
<h3 id="characters-wide">80 Characters Wide</h3>
<p>Where possible, limit CSS files’ width to 80 characters. Reasons for this
include</p>
<ul>
<li>the ability to have multiple files open side by side;</li>
<li>viewing CSS on sites like GitHub, or in terminal windows;</li>
<li>providing a comfortable line length for comments.</li>
</ul>
<pre><code>/**
* I am a long-form comment. I describe, in detail, the CSS that follows. I am
* such a long comment that I easily break the 80 character limit, so I am
* broken across several lines.
*/</code></pre>
<p>There will be unavoidable exceptions to this rule—such as URLs, or gradient
syntax—which shouldn’t be worried about.</p>
<h3 id="titling">Titling</h3>
<p>Begin every new major section of a CSS project with a title:</p>
<pre><code>/*------------------------------------*\
#SECTION-TITLE
\*------------------------------------*/
.selector {}
</code></pre>
<p>The title of the section is prefixed with a hash (<code>#</code>) symbol to allow us to
perform more targeted searches (e.g. <code>grep</code>, etc.): instead of searching for
just <kbd>SECTION-TITLE</kbd>—which may yield many results—a more scoped search
of <kbd>#SECTION-TITLE</kbd> should return only the section in question.</p>
<p>Leave a carriage return between this title and the next line of code (be that a
comment, some Sass, or some CSS).</p>
<p>If you are working on a project where each section is its own file, this title
should appear at the top of each one. If you are working on a project with
multiple sections per file, each title should be preceded by five (5) carriage
returns. This extra whitespace coupled with a title makes new sections much
easier to spot when scrolling through large files:</p>
<pre><code>/*------------------------------------*\
#A-SECTION
\*------------------------------------*/
.selector {}
/*------------------------------------*\
#ANOTHER-SECTION
\*------------------------------------*/
/**
* Comment
*/
.another-selector {}
</code></pre>
<div class="box box--promo box--outdent">
<p>It looks like you’re enjoying these guidelines…</p>
<p><a href="https://gumroad.com/l/JAgjq" class="btn btn--full btn--tertiary">Support Them</a></p>
</div>
<h3 id="anatomy-of-a-ruleset">Anatomy of a Ruleset</h3>
<p>Before we discuss how we write out our rulesets, let’s first familiarise
ourselves with the relevant terminology:</p>
<pre><code>[selector] {
[property]: [value];
[<--declaration--->]
}
</code></pre>
<p>For example:</p>
<pre><code>.foo, .foo--bar,
.baz {
display: block;
background-color: green;
color: red;
}
</code></pre>
<p>Here you can see we have</p>
<ul>
<li>related selectors on the same line; unrelated selectors on new lines;</li>
<li>a space before our opening brace (<code>{</code>);</li>
<li>properties and values on the same line;</li>
<li>a space after our property–value delimiting colon (<code>:</code>);</li>
<li>each declaration on its own new line;</li>
<li>the opening brace (<code>{</code>) on the same line as our last selector;</li>
<li>our first declaration on a new line after our opening brace (<code>{</code>);</li>
<li>our closing brace (<code>}</code>) on its own new line;</li>
<li>each declaration indented by four (4) spaces;</li>
<li>a trailing semi-colon (<code>;</code>) on our last declaration.</li>
</ul>
<p>This format seems to be the largely universal standard (except for variations in
number of spaces, with a lot of developers preferring two (2)).</p>
<p>As such, the following would be incorrect:</p>
<pre><code>.foo, .foo--bar, .baz
{
display:block;
background-color:green;
color:red }
</code></pre>
<p>Problems here include</p>
<ul>
<li>tabs instead of spaces;</li>
<li>unrelated selectors on the same line;</li>
<li>the opening brace (<code>{</code>) on its own line;</li>
<li>the closing brace (<code>}</code>) does not sit on its own line;</li>
<li>the trailing (and, admittedly, optional) semi-colon (<code>;</code>) is missing;</li>
<li>no spaces after colons (<code>:</code>).</li>
</ul>
<h3 id="multi-line-css">Multi-line CSS</h3>
<p>CSS should be written across multiple lines, except in very specific
circumstances. There are a number of benefits to this:</p>
<ul>
<li>A reduced chance of merge conflicts, because each piece of functionality
exists on its own line.</li>
<li>More ‘truthful’ and reliable <code>diff</code>s, because one line only ever carries one
change.</li>
</ul>
<p>Exceptions to this rule should be fairly apparent, such as similar rulesets that
only carry one declaration each, for example:</p>
<pre><code>.icon {
display: inline-block;
width: 16px;
height: 16px;
background-image: url(/img/sprite.svg);
}
.icon--home { background-position: 0 0 ; }
.icon--person { background-position: -16px 0 ; }
.icon--files { background-position: 0 -16px; }
.icon--settings { background-position: -16px -16px; }
</code></pre>
<p>These types of ruleset benefit from being single-lined because</p>
<ul>
<li>they still conform to the one-reason-to-change-per-line rule;</li>
<li>they share enough similarities that they don’t need to be read as thoroughly
as other rulesets—there is more benefit in being able to scan their selectors,
which are of more interest to us in these cases.</li>
</ul>
<h3 id="indenting">Indenting</h3>
<p>As well as intending individual declarations, indent entire related rulesets to
signal their relation to one another, for example:</p>
<pre><code>.foo {}
.foo__bar {}
.foo__baz {}
</code></pre>
<p>By doing this, a developer can see at a glance that <code>.foo__baz {}</code> lives inside
<code>.foo__bar {}</code> lives inside <code>.foo {}</code>.</p>
<p>This quasi-replication of the DOM tells developers a lot about where classes are
expected to be used without them having to refer to a snippet of HTML.</p>
<h4 id="indenting-sass">Indenting Sass</h4>
<p>Sass provides nesting functionality. That is to say, by writing this:</p>
<pre><code>.foo {
color: red;
.bar {
color: blue;
}
}
</code></pre>
<p>…we will be left with this compiled CSS:</p>
<pre><code>.foo { color: red; }
.foo .bar { color: blue; }
</code></pre>
<p>When indenting Sass, we stick to the same four (4) spaces, and we also leave a
blank line before and after the nested ruleset.</p>
<p><strong>N.B.</strong> Nesting in Sass should be avoided wherever possible. See the
Specificity section for more details.</p>
<h4 id="alignment">Alignment</h4>
<p>Attempt to align common and related identical strings in declarations, for
example:</p>
<pre><code>.foo {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.bar {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin-right: -10px;
margin-left: -10px;
padding-right: 10px;
padding-left: 10px;
}
</code></pre>
<p>This makes life a little easier for developers whose text editors support column
editing, allowing them to change several identical and aligned lines in one go.</p>
<h3 id="meaningful-whitespace">Meaningful Whitespace</h3>
<p>As well as indentation, we can provide a lot of information through liberal and
judicious use of whitespace between rulesets. We use:</p>
<ul>
<li>One (1) empty line between closely related rulesets.</li>
<li>Two (2) empty lines between loosely related rulesets.</li>
<li>Five (5) empty lines between entirely new sections.</li>
</ul>
<p>For example:</p>
<pre><code>/*------------------------------------*\
#FOO
\*------------------------------------*/
.foo {}
.foo__bar {}
.foo--baz {}
/*------------------------------------*\
#BAR
\*------------------------------------*/
.bar {}
.bar__baz {}
.bar__foo {}
</code></pre>
<p>There should never be a scenario in which two rulesets do not have an empty line
between them. This would be incorrect:</p>
<pre><code>.foo {}
.foo__bar {}
.foo--baz {}
</code></pre>
<h3 id="html">HTML</h3>
<p>Given HTML and CSS’ inherently interconnected nature, it would be remiss of me
to not cover some syntax and formatting guidelines for markup.</p>
<p>Always quote attributes, even if they would work without. This reduces the
chance of accidents, and is a more familiar format to the majority of
developers. For all this would work (and is valid):</p>
<pre><code><div class=box>
</code></pre>
<p>…this format is preferred:</p>
<pre><code><div class="box">
</code></pre>
<p>The quotes are not required here, but err on the safe side and include them.</p>
<p>When writing multiple values in a class attribute, separate them with two
spaces, thus:</p>
<pre><code><div class="foo bar">
</code></pre>
<p>When multiple classes are related to each other, consider grouping them in
square brackets (<code>[</code> and <code>]</code>), like so:</p>
<pre><code><div class="[ box box--highlight ] [ bio bio--long ]">
</code></pre>
<p>This is not a firm recommendation, and is something I am still trialling myself,
but it does carry a number of benefits. Read more in <a href="http://csswizardry.com/2014/05/grouping-related-classes-in-your-markup/"><cite>Grouping related
classes in your
markup</cite></a>.</p>
<p>As with our rulesets, it is possible to use meaningful whitespace in your HTML.
You can denote thematic breaks in content with five (5) empty lines, for
example:</p>
<pre><code><header class="page-head">
...
</header>
<main class="page-content">
...
</main>
<footer class="page-foot">
...
</footer>
</code></pre>
<div class="box box--promo box--outdent">
<p>Something you need some more help with?</p>
<p><a href="http://csswizardry.com/work/" class="btn btn--full btn--tertiary">Hire me</a></p>
</div>
<p>Separate independent but loosely related snippets of markup with a single empty
line, for example:</p>
<pre><code><ul class="primary-nav">
<li class="primary-nav__item">
<a href="/" class="primary-nav__link">Home</a>
</li>
<li class="primary-nav__item primary-nav__trigger">
<a href="/about" class="primary-nav__link">About</a>
<ul class="primary-nav__sub-nav">
<li><a href="/about/products">Products</a></li>
<li><a href="/about/company">Company</a></li>
</ul>
</li>
<li class="primary-nav__item">
<a href="/contact" class="primary-nav__link">Contact</a>
</li>
</ul>
</code></pre>
<p>This allows developers to spot separate parts of the DOM at a glance, and also
allows certain text editors—like Vim, for example—to manipulate
empty-line-delimited blocks of markup.</p>
<h3 id="further-reading">Further Reading</h3>
<ul>
<li><a href="http://csswizardry.com/2014/05/grouping-related-classes-in-your-markup/"><cite>Grouping related classes in your markup</cite></a></li>
</ul>
<hr>
<h2 id="commenting">Commenting</h2>
<p>The cognitive overhead of working with CSS is huge. With so much to be aware of,
and so many project-specific nuances to remember, the worst situation most
developers find themselves in is being the-person-who-didn’t-write-this-code.
Remembering your own classes, rules, objects, and helpers is manageable <em>to an
extent</em>, but anyone inheriting CSS barely stands a chance.</p>
<p><strong>CSS needs more comments.</strong></p>
<p>As CSS is something of a declarative language that doesn’t really leave much of
a paper-trail, it is often hard to discern—from looking at the CSS alone—</p>
<ul>
<li>whether some CSS relies on other code elsewhere;</li>
<li>what effect changing some code will have elsewhere;</li>
<li>where else some CSS might be used;</li>
<li>what styles something might inherit (intentionally or otherwise);</li>
<li>what styles something might pass on (intentionally or otherwise);</li>
<li>where the author intended a piece of CSS to be used.</li>
</ul>
<p>This doesn’t even take into account some of CSS’ many quirks—such as various
sates of <code>overflow</code> triggering block formatting context, or certain transform
properties triggering hardware acceleration—that make it even more baffling to
developers inheriting projects.</p>
<p>As a result of CSS not telling its own story very well, it is a language that
really does benefit from being heavily commented.</p>
<p>As a rule, you should comment anything that isn’t immediately obvious from the
code alone. That is to say, there is no need to tell someone that <code>color: red;</code>
will make something red, but if you’re using <code>overflow: hidden;</code> to clear
floats—as opposed to clipping an element’s overflow—this is probably something
worth documenting.</p>
<h3 id="high-level">High-level</h3>
<p>For large comments that document entire sections or components, we use a
DocBlock-esque multi-line comment which adheres to our 80 column width.</p>
<p>Here is a real-life example from the CSS which styles the page header on <a href="http://csswizardry.com/">CSS
Wizardry</a>:</p>
<pre><code>/**
* The site’s main page-head can have two different states:
*
* 1) Regular page-head with no backgrounds or extra treatments; it just
* contains the logo and nav.
* 2) A masthead that has a fluid-height (becoming fixed after a certain point)
* which has a large background image, and some supporting text.
*
* The regular page-head is incredibly simple, but the masthead version has some
* slightly intermingled dependency with the wrapper that lives inside it.
*/
</code></pre>
<p>This level of detail should be the norm for all non-trivial code—descriptions of
states, permutations, conditions, and treatments.</p>
<h4 id="objectextension-pointers">Object–Extension Pointers</h4>
<p>When working across multiple partials, or in an OOCSS manner, you will often
find that rulesets that can work in conjunction with each other are not always
in the same file or location. For example, you may have a generic button
object—which provides purely structural styles—which is to be extended in a
component-level partial which will add cosmetics. We document this relationship
across files with simple <i>object–extension pointers</i>. In the object file:</p>
<pre><code>/**
* Extend `.btn {}` in _components.buttons.scss.
*/
.btn {}
</code></pre>
<p>And in your theme file:</p>
<pre><code>/**
* These rules extend `.btn {}` in _objects.buttons.scss.
*/
.btn--positive {}
.btn--negative {}
</code></pre>
<p>This simple, low effort commenting can make a lot of difference to developers
who are unaware of relationships across projects, or who are wanting to know
how, why, and where other styles might be being inherited from.</p>
<h3 id="low-level">Low-level</h3>
<p>Oftentimes we want to comment on specific declarations (i.e. lines) in a
ruleset. To do this we use a kind of reverse footnote. Here is a more complex
comment detailing the larger site headers mentioned above:</p>
<pre><code>/**
* Large site headers act more like mastheads. They have a faux-fluid-height
* which is controlled by the wrapping element inside it.
*
* 1. Mastheads will typically have dark backgrounds, so we need to make sure
* the contrast is okay. This value is subject to change as the background
* image changes.
* 2. We need to delegate a lot of the masthead’s layout to its wrapper element
* rather than the masthead itself: it is to this wrapper that most things
* are positioned.
* 3. The wrapper needs positioning context for us to lay our nav and masthead
* text in.
* 4. Faux-fluid-height technique: simply create the illusion of fluid height by
* creating space via a percentage padding, and then position everything over
* the top of that. This percentage gives us a 16:9 ratio.
* 5. When the viewport is at 758px wide, our 16:9 ratio means that the masthead
* is currently rendered at 480px high. Let’s…
* 6. …seamlessly snip off the fluid feature at this height, and…
* 7. …fix the height at 480px. This means that we should see no jumps in height
* as the masthead moves from fluid to fixed. This actual value takes into
* account the padding and the top border on the header itself.
*/
.page-head--masthead {
margin-bottom: 0;
background: url(/img/css/masthead.jpg) center center #2e2620;
@include vendor(background-size, cover);
color: $color-masthead; /* [1] */
border-top-color: $color-masthead;
border-bottom-width: 0;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) inset;
@include media-query(lap-and-up) {
background-image: url(/img/css/masthead-medium.jpg);
}
@include media-query(desk) {
background-image: url(/img/css/masthead-large.jpg);
}
> .wrapper { /* [2] */
position: relative; /* [3] */
padding-top: 56.25%; /* [4] */
@media screen and (min-width: 758px) { /* [5] */
padding-top: 0; /* [6] */
height: $header-max-height - double($spacing-unit) - $header-border-width; /* [7] */
}
}
}
</code></pre>
<p>These types of comment allow us to keep all of our documentation in one place
whilst referring to the parts of the ruleset to which they belong.</p>
<h3 id="preprocessor-comments">Preprocessor Comments</h3>
<p>With most—if not all—preprocessors, we have the option to write comments that
will not get compiled out into our resulting CSS file. As a rule, use these
comments to document code that would not get written out to that CSS file
either. If you are documenting code which will get compiled, use comments that
will compile also. For example, this is correct:</p>
<pre><code>// Dimensions of the @2x image sprite:
$sprite-width: 920px;
$sprite-height: 212px;
/**
* 1. Default icon size is 16px.
* 2. Squash down the retina sprite to display at the correct size.
*/
.sprite {
width: 16px; /* [1] */
height: 16px; /* [1] */
background-image: url(/img/sprites/main.png);
background-size: ($sprite-width / 2 ) ($sprite-height / 2); /* [2] */
}
</code></pre>
<p>We have documented variables—code which will not get compiled into our CSS
file—with preprocessor comments, whereas our CSS—code which will get compiled
into our CSS file—is documented using CSS comments. This means that we have only
the correct and relevant information available to us when debugging our compiled
stylesheets.</p>
<h3 id="removing-comments">Removing Comments</h3>
<p>It should go without saying that no comments should make their way into
production environments—all CSS should be minified, resulting in loss of
comments, before being deployed.</p>
<hr>
<h2 id="naming-conventions">Naming Conventions</h2>
<p>Naming conventions in CSS are hugely useful in making your code more
strict, more transparent, and more informative.</p>
<p>A good naming convention will tell you and your team</p>
<ul>
<li>what type of thing a class does;</li>
<li>where a class can be used;</li>
<li>what (else) a class might be related to.</li>
</ul>
<p>The naming convention I follow is very simple: hyphen (<code>-</code>) delimited strings,
with BEM-like naming for more complex pieces of code.</p>
<p>It’s worth noting that a naming convention is not normally useful CSS-side of
development; they really come into their own when viewed in HTML.</p>
<h3 id="hyphen-delimited">Hyphen Delimited</h3>
<p>All strings in classes are delimited with a hyphen (<code>-</code>), like so:</p>
<pre><code>.page-head {}
.sub-content {}
</code></pre>
<p>Camel case and underscores are not used for regular classes; the following are
incorrect:</p>
<pre><code>.pageHead {}
.sub_content {}
</code></pre>
<div class="box box--promo box--outdent">
<p>It looks like you’re enjoying these guidelines…</p>
<p><a href="https://gumroad.com/l/JAgjq" class="btn btn--full btn--tertiary">Support Them</a></p>
</div>
<h3 id="bem-like-naming">BEM-like Naming</h3>
<p>For larger, more interrelated pieces of UI that require a number of classes, we
use a BEM-like naming convention.</p>
<p><cite>BEM</cite>, meaning <i>Block</i>, <i>Element</i>, <i>Modifier</i>, is a
front-end methodology coined by developers working at Yandex. Whilst BEM is a
complete methodology, here we are only concerned with its naming convention.
Further, the naming convention here only is BEM-<em>like</em>; the principles are
exactly the same, but the actual syntax differs slightly.</p>
<p>BEM splits components’ classes into three groups:</p>
<ul>
<li>Block: The sole root of the component.</li>
<li>Element: A component part of the Block.</li>
<li>Modifier: A variant or extension of the Block.</li>
</ul>
<p>To take an analogy (note, not an example):</p>
<pre><code>.person {}
.person__head {}
.person--tall {}