Skip to content

Commit 573d2d1

Browse files
authored
Update README.md
1 parent 72a6a50 commit 573d2d1

File tree

1 file changed

+24
-23
lines changed

1 file changed

+24
-23
lines changed

README.md

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ goals.
6363

6464
Here are our rules for managing whitespace in Sass files:
6565

66-
- Use soft indents (spaces).
66+
- Use hard indents (tabs).
6767
- Use 2 characters for the indentation level.
6868
- **Never** mix spaces and tabs for indentation.
6969
- Wrap at 80 characters wide.
@@ -88,7 +88,7 @@ If you use Sublime Text editor then install [this package](https://github.com/Su
8888

8989
```
9090
"tab_size": 2,
91-
"translate_tabs_to_spaces": true,
91+
"translate_tabs_to_spaces": false,
9292
"trim_automatic_white_space": true,
9393
"trim_trailing_white_space_on_save": true,
9494
"word_wrap": true,
@@ -100,7 +100,8 @@ This is optional:
100100
```
101101
"rulers":
102102
[
103-
80
103+
80,
104+
100
104105
],
105106
```
106107

@@ -351,22 +352,26 @@ For reference here is an anatomy of a rule set:
351352

352353
### Declaration order
353354

354-
Declarations should be ordered alphabetically.
355+
Declarations should be grouped by relationship where possible.
355356

356357
Example:
357358

358359
```
359360
.selector {
360-
background-color: #000;
361-
bottom: 0;
362-
box-sizing: border-box;
363-
color: #fff;
364-
display: inline-block;
365-
font-family: sans-serif;
366-
font-size: 1em;
367-
height: 100px;
368-
text-align: right;
369-
width: 100px;
361+
position: absolute;
362+
bottom: 0;
363+
364+
display: inline-block;
365+
box-sizing: border-box;
366+
height: 100px;
367+
width: 100px;
368+
369+
background-color: #000;
370+
371+
color: #fff;
372+
font-family: sans-serif;
373+
font-size: 1em;
374+
text-align: right;
370375
}
371376
```
372377

@@ -427,7 +432,7 @@ If you use Sublime Text editor then install [this package](https://github.com/at
427432

428433
## Naming conventions
429434

430-
Always ensure classes are sensibly named; keep them as short as possible but as long as necessary. Ensure any utilities are very vaguely named (e.g. `.u-display-block`, `.u-divider`) to allow for greater reuse. Don’t worry about the amount or length of classes in your markup; gzip will compress well written code incredibly well.
435+
Always ensure classes are sensibly named; keep them as short as possible but as long as necessary. Ensure any utilities are very vaguely named (e.g. `.text-center`, `.clearfix`) to allow for greater reuse. Don’t worry about the amount or length of classes in your markup; gzip will compress well written code incredibly well.
431436

432437
**ID's cannot be used as style hooks**, [see](http://cssguidelin.es/#ids-in-css).
433438

@@ -442,13 +447,13 @@ Kickoff's naming convention is similar to BEM, it is a methodology for naming an
442447
The naming convention follows this pattern:
443448

444449
```
445-
.block{}
446-
.block-element{}
447-
.block--modifier{}
450+
.block {}
451+
.block-element {}
452+
.block--modifier {}
448453
```
449454

450455
- `.block` represents the higher level of an abstraction or component.
451-
- `.block-element` represents a descendent of `.block` that helps form `.block` as a whole.
456+
- `.block-element` represents a descendent/child of `.block` that helps form `.block` as a whole.
452457
- `.block--modifier` represents a different state or version of `.block`.
453458

454459
[Further reading](http://trykickoff.com/learn/css.html#namingscheme).
@@ -520,10 +525,6 @@ Example:
520525
<div class="pagination l-container u-text-align-center js-paginate test-pagination ga-pagination">
521526
```
522527

523-
524-
525-
526-
527528
## Comments
528529

529530
We should document and comment our code as much as we possibly can, what may seem or feel transparent and self explanatory to you may not be to another dev. Write a chunk of code then write about it.

0 commit comments

Comments
 (0)