Skip to content

Commit 4da72c8

Browse files
author
Mike Fowler
committed
Fixed some typos, added some clarification
1 parent 4ab13a9 commit 4da72c8

File tree

1 file changed

+10
-10
lines changed

1 file changed

+10
-10
lines changed

README.md

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -67,10 +67,10 @@ Finally, properties are what give the selected elements of a rule declaration th
6767
* Prefer dashes over camelCasing in class names. Underscores are OK if you're using BEM (see [OOCSS and BEM](#oocss-and-bem) below).
6868
* Do not use ID selectors
6969
* 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
7173
* 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
7474

7575
**Bad**
7676

@@ -155,7 +155,7 @@ We encourage some combination of OOCSS and BEM for these reasons:
155155

156156
### ID selectors
157157

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.
159159

160160
For more on this subject, read [CSS Wizardry's article](http://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/) on dealing with specificity.
161161

@@ -173,7 +173,7 @@ We recommend creating JavaScript-specific classes to bind to, prefixed with `.js
173173

174174
### Syntax
175175

176-
* Use the .scss syntax, never the original .sass syntax
176+
* Use the `.scss` syntax, never the original `.sass` syntax
177177
* Order your `@extend`, regular CSS and `@include` declarations logically (see below)
178178

179179
### Ordering of property declarations
@@ -218,7 +218,7 @@ We recommend creating JavaScript-specific classes to bind to, prefixed with `.js
218218

219219
4. Nested selectors
220220

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.
222222

223223
```scss
224224
.btn {
@@ -239,9 +239,9 @@ Mixins, defined via `@mixin` and called with `@include`, should be used sparingl
239239

240240
### Placeholders
241241

242-
Placeholders in Sass, defined via `%selector` and used with `@extend`, are a way of defining a block 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.
243243
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.
245245
246246
**Sass**
247247
@@ -257,7 +257,7 @@ Placeholders are powerful but easy to abuse, especially when combined with neste
257257
}
258258

259259
.icon-success {
260-
@extend %hide;
260+
@extend %icon;
261261
color: green;
262262
}
263263
```
@@ -302,4 +302,4 @@ When selectors become this long, you're likely writing CSS that is:
302302

303303
Again: **never nest ID selectors!**
304304

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

Comments
 (0)