You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+110-108
Original file line number
Diff line number
Diff line change
@@ -1,27 +1,27 @@
1
1
# Big Spaceship CSS / Sass Styleguide
2
2
3
-
*A mostly reasonable approach to CSS and Sass*
3
+
_A mostly reasonable approach to CSS and Sass_
4
4
5
5
## Table of Contents
6
6
7
7
1.[Terminology](#terminology)
8
-
-[Rule Declaration](#rule-declaration)
9
-
-[Selectors](#selectors)
10
-
-[Properties](#properties)
8
+
-[Rule Declaration](#rule-declaration)
9
+
-[Selectors](#selectors)
10
+
-[Properties](#properties)
11
11
1.[CSS](#css)
12
-
-[Formatting](#formatting)
13
-
-[Comments](#comments)
14
-
-[OOCSS and BEM](#oocss-and-bem)
15
-
-[ID Selectors](#id-selectors)
16
-
-[JavaScript hooks](#javascript-hooks)
17
-
-[Border](#border)
12
+
-[Formatting](#formatting)
13
+
-[Comments](#comments)
14
+
-[OOCSS and RSCSS](#oocss-and-rscss)
15
+
-[ID Selectors](#id-selectors)
16
+
-[JavaScript hooks](#javascript-hooks)
17
+
-[Border](#border)
18
18
1.[Sass](#sass)
19
-
-[Syntax](#syntax)
20
-
-[Ordering](#ordering-of-property-declarations)
21
-
-[Variables](#variables)
22
-
-[Mixins](#mixins)
23
-
-[Extend directive](#extend-directive)
24
-
-[Nested selectors](#nested-selectors)
19
+
-[Syntax](#syntax)
20
+
-[Ordering](#ordering-of-property-declarations)
21
+
-[Variables](#variables)
22
+
-[Mixins](#mixins)
23
+
-[Extend directive](#extend-directive)
24
+
-[Nested selectors](#nested-selectors)
25
25
1.[Translation](#translation)
26
26
1.[License](#license)
27
27
@@ -57,7 +57,8 @@ In a rule declaration, “selectors” are the bits that determine which element
57
57
Finally, properties are what give the selected elements of a rule declaration their style. Properties are key-value pairs, and a rule declaration can contain one or more property declarations. Property declarations look like this:
58
58
59
59
```css
60
-
/* some selector */ {
60
+
/* some selector */
61
+
{
61
62
background: #f1f1f1;
62
63
color: #333;
63
64
}
@@ -69,24 +70,26 @@ Finally, properties are what give the selected elements of a rule declaration th
69
70
70
71
### Formatting
71
72
72
-
* Use soft tabs (2 spaces) for indentation
73
-
* Prefer dashes over camelCasing in class names.
74
-
- Underscores and PascalCasing are okay if you are using BEM (see [OOCSS and BEM](#oocss-and-bem) below).
75
-
* Do not use ID selectors
76
-
* When using multiple selectors in a rule declaration, give each selector its own line.
77
-
* Put a space before the opening brace `{` in rule declarations
78
-
* In properties, put a space after, but not before, the `:` character.
79
-
* Put closing braces `}` of rule declarations on a new line
80
-
* Put blank lines between rule declarations
73
+
- Use soft tabs (2 spaces) for indentation
74
+
- Prefer dashes over camelCasing in class names.
75
+
- Do not use ID selectors
76
+
- When using multiple selectors in a rule declaration, give each selector its own line.
77
+
- Put a space before the opening brace `{` in rule declarations
78
+
- In properties, put a space after, but not before, the `:` character.
79
+
- Put closing braces `}` of rule declarations on a new line
80
+
- Put blank lines between rule declarations
81
81
82
82
**Bad**
83
83
84
84
```css
85
-
.avatar{
86
-
border-radius:50%;
87
-
border:2pxsolidwhite; }
88
-
.no, .nope, .not_good {
89
-
// ...
85
+
.avatar {
86
+
border-radius: 50%;
87
+
border: 2pxsolidwhite;
88
+
}
89
+
.no,
90
+
.nope,
91
+
.not_good {
92
+
// ...
90
93
}
91
94
#lol-no {
92
95
// ...
@@ -110,63 +113,62 @@ Finally, properties are what give the selected elements of a rule declaration th
110
113
111
114
### Comments
112
115
113
-
* Prefer line comments (`//` in Sass-land) to block comments.
114
-
* Prefer comments on their own line. Avoid end-of-line comments.
115
-
* Write detailed comments for code that isn't self-documenting:
116
+
- Prefer line comments (`//` in Sass-land) to block comments.
117
+
- Prefer comments on their own line. Avoid end-of-line comments.
118
+
- Write detailed comments for code that isn't self-documenting:
116
119
- Uses of z-index
117
120
- Compatibility or browser-specific hacks
118
121
119
-
### OOCSS and BEM
122
+
### OOCSS and RSCSS
120
123
121
-
We encourage some combination of OOCSS and BEM for these reasons:
124
+
We encourage some combination of OOCSS and RSCSS for these reasons:
122
125
123
-
* It helps create clear, strict relationships between CSS and HTML
124
-
* It helps us create reusable, composable components
125
-
* It allows for less nesting and lower specificity
126
-
* It helps in building scalable stylesheets
126
+
- It helps create clear, strict relationships between CSS and HTML
127
+
- It helps us create reusable, composable components
128
+
- It allows for less nesting and lower specificity
129
+
- It helps in building scalable stylesheets
127
130
128
131
**OOCSS**, or “Object Oriented CSS”, is an approach for writing CSS that encourages you to think about your stylesheets as a collection of “objects”: reusable, repeatable snippets that can be used independently throughout a website.
- Smashing Magazine's [Introduction to OOCSS](http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/)
132
135
133
-
**BEM**, or “Block-Element-Modifier”, is a _naming convention_ for classes in HTML and CSS. It was originally developed by Yandex with large codebases and scalability in mind, and can serve as a solid set of guidelines for implementing OOCSS.
136
+
**RSCSS**, or “Reasonable-SCSS”, is a _naming convention_ for classes in HTML and CSS. It is a set of ideas to guide your process of building maintainable CSS, and can serve as a solid set of guidelines for implementing OOCSS.
* Harry Roberts' [introduction to BEM](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)
137
-
138
-
We recommend a variant of BEM with PascalCased “blocks”, which works particularly well when combined with components (e.g. React). Underscores and dashes are still used for modifiers and children.
<h1 class="ListingCard__title">Adorable 2BRin the sunny Mission</h1>
146
+
<article class="listing-card -featured">
147
+
<h1 class="title">Adorable 2BRin the sunny Mission</h1>
149
148
150
-
<div class="ListingCard__content">
149
+
<div class="content">
151
150
<p>Vestibulum id ligula porta felis euismod semper.</p>
152
151
</div>
153
-
154
152
</article>
155
153
);
156
154
}
157
155
```
158
156
159
157
```css
160
158
/* ListingCard.css */
161
-
.ListingCard { }
162
-
.ListingCard--featured { }
163
-
.ListingCard__title { }
164
-
.ListingCard__content { }
159
+
.listing-card {
160
+
}
161
+
.Listing-card.-featured {
162
+
}
163
+
.listing-card.title {
164
+
}
165
+
.listing-card.content {
166
+
}
165
167
```
166
168
167
-
*`.ListingCard` is the “block” and represents the higher-level component
168
-
*`.ListingCard__title` is an “element” and represents a descendant of `.ListingCard` that helps compose the block as a whole.
169
-
*`.ListingCard--featured` is a “modifier” and represents a different state or variation on the `.ListingCard` block.
169
+
-`.listing-card` is the “block” and represents the higher-level component
170
+
-`.listing-card .title` is an “element” and represents a descendant of `.listing-card` that helps compose the block as a whole.
171
+
-`.-featured` is a “modifier” and represents a different state or variation on the `.listing-card` block.
170
172
171
173
### ID selectors
172
174
@@ -203,57 +205,58 @@ Use `0` instead of `none` to specify that a style has no border.
203
205
border: 0;
204
206
}
205
207
```
208
+
206
209
**[⬆ back to top](#table-of-contents)**
207
210
208
211
## Sass
209
212
210
213
### Syntax
211
214
212
-
* Use the `.scss` syntax, never the original `.sass` syntax
213
-
* Order your regular CSS and `@include` declarations logically (see below)
215
+
- Use the `.scss` syntax, never the original `.sass` syntax
216
+
- Order your regular CSS and `@include` declarations logically (see below)
214
217
215
218
### Ordering of property declarations
216
219
217
220
1. Property declarations
218
221
219
-
List all standard property declarations, anything that isn't an `@include` or a nested selector.
222
+
List all standard property declarations, anything that isn't an `@include` or a nested selector.
220
223
221
-
```scss
222
-
.btn-green {
223
-
background: green;
224
-
font-weight: bold;
225
-
// ...
226
-
}
227
-
```
224
+
```scss
225
+
.btn-green {
226
+
background: green;
227
+
font-weight: bold;
228
+
// ...
229
+
}
230
+
```
228
231
229
232
2.`@include` declarations
230
233
231
-
Grouping `@include`s at the end makes it easier to read the entire selector.
234
+
Grouping `@include`s at the end makes it easier to read the entire selector.
232
235
233
-
```scss
234
-
.btn-green {
235
-
background: green;
236
-
font-weight: bold;
237
-
@includetransition(background0.5sease);
238
-
// ...
239
-
}
240
-
```
236
+
```scss
237
+
.btn-green {
238
+
background: green;
239
+
font-weight: bold;
240
+
@includetransition(background0.5sease);
241
+
// ...
242
+
}
243
+
```
241
244
242
245
3. Nested selectors
243
246
244
-
Nested selectors, _if necessary_, go last, and nothing goes after them. Add whitespace between your rule declarations and nested selectors, as well as between adjacent nested selectors. Apply the same guidelines as above to your nested selectors.
247
+
Nested selectors, _if necessary_, go last, and nothing goes after them. Add whitespace between your rule declarations and nested selectors, as well as between adjacent nested selectors. Apply the same guidelines as above to your nested selectors.
245
248
246
-
```scss
247
-
.btn {
248
-
background: green;
249
-
font-weight: bold;
250
-
@includetransition(background0.5sease);
249
+
```scss
250
+
.btn {
251
+
background: green;
252
+
font-weight: bold;
253
+
@includetransition(background0.5sease);
251
254
252
-
.icon {
253
-
margin-right: 10px;
254
-
}
255
-
}
256
-
```
255
+
.icon {
256
+
margin-right: 10px;
257
+
}
258
+
}
259
+
```
257
260
258
261
### Variables
259
262
@@ -283,10 +286,9 @@ Mixins should be used to DRY up your code, add clarity, or abstract complexity--
283
286
284
287
When selectors become this long, you're likely writing CSS that is:
285
288
286
-
* Strongly coupled to the HTML (fragile) *—OR—*
287
-
* Overly specific (powerful) *—OR—*
288
-
* Not reusable
289
-
289
+
- Strongly coupled to the HTML (fragile) _—OR—_
290
+
- Overly specific (powerful) _—OR—_
291
+
- Not reusable
290
292
291
293
Again: **never nest ID selectors!**
292
294
@@ -296,21 +298,21 @@ If you must use an ID selector in the first place (and you should really try not
296
298
297
299
## Translation
298
300
299
-
This style guide is also available in other languages:
0 commit comments