Skip to content
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
makes some small grammar edits
  • Loading branch information
brianecook88 committed Jul 24, 2019
commit 955063efccecbd1631002a5a30f9179250f292b5
8 changes: 4 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -294,7 +294,7 @@ If you must use an ID selector in the first place (and you should really try not

## Scoutside CSS Implementation

### Use BEM.
### Use BEM

It may seem a little tricky and tedious at first, but writing clean, unnested BEM reduces nasty css side-effects and makes it easy to understand how classes relate to one another.

Expand Down Expand Up @@ -337,9 +337,9 @@ If this h1 style is used in a new context, we need to do extra work to locate an
}
```

Everything written within the selector above is technically also considered nesting, however, since it directly relates to the selector and does not limit it to a specific context, it makes sense to nest psuedo-elements, modifier classes, and media queries.
Everything written within the selector above is technically also considered nesting, however, since it directly relates to the selector and does not limit it to a specific context, it makes sense to nest media queries, psuedo-elements, modifier classes.

### Only nest css when there are no other practical options.
### Only nest css when there are no other practical options

Nesting css puts our styles in highly specific contexts and makes it difficult to move components around the site. We should write anything as if it could be reused in a different context from the one it was originally designed for. This way we save precious time and energy when components pop up in different places, as designers build new pages, features, etc.

Expand Down Expand Up @@ -470,7 +470,7 @@ button {

By giving everything a class name, our styles are portable and markup-independent. It might seem difficult to give everything a class name, but the BEM convention makes this easier. Because this style of coding is so "class driven", it is makes sense to have the class attribute as the first attribute on any element.

### Write media queries within selectors.
### Write media queries within selectors

Nesting all styles within a single media query for each breakpoint causes excessive scrolling and the mental burden of remembering what the styles were at previous breakpoints.

Expand Down