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
+4-4Lines changed: 4 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -294,7 +294,7 @@ If you must use an ID selector in the first place (and you should really try not
294
294
295
295
## Scoutside CSS Implementation
296
296
297
-
### Use BEM.
297
+
### Use BEM
298
298
299
299
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.
300
300
@@ -337,9 +337,9 @@ If this h1 style is used in a new context, we need to do extra work to locate an
337
337
}
338
338
```
339
339
340
-
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.
340
+
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.
341
341
342
-
### Only nest css when there are no other practical options.
342
+
### Only nest css when there are no other practical options
343
343
344
344
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.
345
345
@@ -470,7 +470,7 @@ button {
470
470
471
471
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.
472
472
473
-
### Write media queries within selectors.
473
+
### Write media queries within selectors
474
474
475
475
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.
0 commit comments