Flash/Guide at master · iiison/Flash · GitHub

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
- Create Table of contents


- Comments in CSS should be no more than 80 chars per line


- Begin every new major section of a CSS project with a title

  Eg:
  |  /*------------------------------------*\
  |    #SECTION-TITLE
  |  \*------------------------------------*/
  |
  |  .selector { }
  |


- If you are working on a project with multiple sections
  per file, each title should be preceded by five (5)
  carriage returns.

  Eg:
  |  /*------------------------------------*\
  |    #A-SECTION
  |  \*------------------------------------*/
  |
  |  selector { }
  |
  |
  |
  |
  |
  |  /*------------------------------------*\
  |  #ANOTHER-SECTION
  |  \*------------------------------------*/
  |


- Anatomy of a Ruleset

  |  Consider this ruleset:
  |  .foo, .foo--bar,
  |  .baz {
  |    display: block;
  |    background-color: green;
  |    color: red;
  |  }
  |

  Following are rules to write new rulesets:
    * All related selectors in one line, unrelated selectors
      in new line.
    * one space before opening brace({).
    * opening brace ({) on the same line as last selector.
    * first declaration on new line after opening brace ({).
    * property and values should be in same line.
    * a space after property–value delimiting colon.
    * no space before property–value delimiting colon.
    * closing brace (}) on its own new line.
    * each declaration indented by two (2) spaces.
    * a trailing semi-colon (;) on our last declaration.
    * CSS should be written across multiple lines


- Meaningful Whitespace
  * One (1) empty line between closely related rulesets.
  * Two (2) empty lines between loosely related rulesets.
  * Five (5) empty lines between entirely new sections.

  Eg:
  |  /*------------------------------------*\
  |    #FOO
  |  \*------------------------------------*/
  |
  |  .foo { }
  |
  |    .foo__bar { }
  |
  |
  |  .foo--baz { }
  |
  |
  |
  |
  |
  |  /*------------------------------------*\
  |    #BAR
  |  \*------------------------------------*/
  |
  |  .bar { }
  |
  |    .bar__baz { }
  |
  |    .bar__foo { }
  |


  HTML:

  - Tag
    * Always put double quotes to all properties
    * Separate 2 class names with 2 spaces
    * Group related class names with square braces:
      |  <div class="[ box  box--highlight ]  [ bio  bio--long ]">

  -