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
+10-10Lines changed: 10 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -67,10 +67,10 @@ Finally, properties are what give the selected elements of a rule declaration th
67
67
* Prefer dashes over camelCasing in class names. Underscores are OK if you're using BEM (see [OOCSS and BEM](#oocss-and-bem) below).
68
68
* Do not use ID selectors
69
69
* When using multiple selectors in a rule declaration, give each selector its own line.
70
-
* Put a space before `{` in rule declarations
70
+
* Put a space before the opening brace `{` in rule declarations
71
+
* In properties, put a space after, but not before, the `:` character.
72
+
* Put closing braces `}` of rule declarations on a new line
71
73
* Put blank lines between rule declarations
72
-
* In property declarations, put a space after, but not before, the `:` character.
73
-
* Put closing braces of declaration blocks on a new line
74
74
75
75
**Bad**
76
76
@@ -155,7 +155,7 @@ We encourage some combination of OOCSS and BEM for these reasons:
155
155
156
156
### ID selectors
157
157
158
-
While it is possible to select elements by ID in CSS, it should generally be considered an anti-pattern. ID selectors introduce an unnecessarily high level of [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) to your rule declarations.
158
+
While it is possible to select elements by ID in CSS, it should generally be considered an anti-pattern. ID selectors introduce an unnecessarily high level of [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) to your rule declarations, and they are not reusable.
159
159
160
160
For more on this subject, read [CSS Wizardry's article](http://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/) on dealing with specificity.
161
161
@@ -173,7 +173,7 @@ We recommend creating JavaScript-specific classes to bind to, prefixed with `.js
173
173
174
174
### Syntax
175
175
176
-
* Use the .scss syntax, never the original .sass syntax
176
+
* Use the `.scss` syntax, never the original `.sass` syntax
177
177
* Order your `@extend`, regular CSS and `@include` declarations logically (see below)
178
178
179
179
### Ordering of property declarations
@@ -218,7 +218,7 @@ We recommend creating JavaScript-specific classes to bind to, prefixed with `.js
218
218
219
219
4. Nested selectors
220
220
221
-
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.
221
+
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.
222
222
223
223
```scss
224
224
.btn {
@@ -239,9 +239,9 @@ Mixins, defined via `@mixin` and called with `@include`, should be used sparingl
239
239
240
240
### Placeholders
241
241
242
-
Placeholders in Sass, defined via `%selector` and used with `@extend`, are a way of defining ablock of properties that aren't automatically output in your compiled stylesheet. Instead, other selectors “inherit” from the placeholder, and the relevant selectors are copied to the point in the stylesheet where the placeholder is defined. This is best illustrated with the example below.
242
+
Placeholders in Sass, defined via `%selector` and used with `@extend`, are a way of defining rule declarations that aren't automatically output in your compiled stylesheet. Instead, other selectors “inherit” from the placeholder, and the relevant selectors are copied to the point in the stylesheet where the placeholder is defined. This is best illustrated with the example below.
243
243
244
-
Placeholders are powerful but easy to abuse, especially when combined with nested selectors. *As a rule of thumb, avoid creating placeholders with nested declaration blocks, or calling `@extend` inside nested selectors.** Placeholders are great for simple inheritance, but can easily result in the accidental creation of additional selectors without paying close attention to how and where they are used.
244
+
Placeholders are powerful but easy to abuse, especially when combined with nested selectors. **As a rule of thumb, avoid creating placeholders with nested rule declarations, or calling `@extend` inside nested selectors.** Placeholders are great for simple inheritance, but can easily result in the accidental creation of additional selectors without paying close attention to how and where they are used.
245
245
246
246
**Sass**
247
247
@@ -257,7 +257,7 @@ Placeholders are powerful but easy to abuse, especially when combined with neste
257
257
}
258
258
259
259
.icon-success {
260
-
@extend%hide;
260
+
@extend%icon;
261
261
color: green;
262
262
}
263
263
```
@@ -302,4 +302,4 @@ When selectors become this long, you're likely writing CSS that is:
302
302
303
303
Again: **never nest ID selectors!**
304
304
305
-
If you must use an ID selector in the first place (and you should really try not to), they should never be nested. If you find yourself doing this, you need to revisit your markup, or figure out why such strong specificity is needed. If you're writing well thought-out CSS, you should rarely, *if ever* need to do this.
305
+
If you must use an ID selector in the first place (and you should really try not to), they should never be nested. If you find yourself doing this, you need to revisit your markup, or figure out why such strong specificity is needed. If you are writing well formed HTML and CSS, you should **never** need to do this.
0 commit comments