Skip to content

Minor Edits And Suggestions #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open
Changes from all commits
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
22 changes: 10 additions & 12 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ We use the BEM (block__element--modifier) syntax to name class selectors. Avoid
</div>
```

If a specific style is re-used on more than 3 different views or files in our app, consider making a utility class for it. Utility classes should begin with or be prepended by `u-`.
If a specific style is re-used on more than 3 different views or files in our app, consider making a utility class for it. Utility classes should begin with or be prepended by `u-`.

A utility class selector looks like:

Expand All @@ -37,36 +37,34 @@ The right way:
box-sizing: border-box;
display: block;
width: $width;
height: $height;
height: $height;
}

.block__element--modifier {
height: calc($height / 2);
height: calc($height / 2);
}

```

The wrong way:
The wrong way:

```css
.block__element{
box-sizing:border-box;
display:block;
width:$width;
height:$height;
}
.block__element--modifier{
height:calc($height / 2);
height:$height;
}
.block__element--modifier{ height:calc($height/2); }

```
### Listing CSS Properties

Organize CSS properties into groups according to how they affect the DOM or are loaded on a page. Our compiled CSS actually shows re-ordered CSS properties, so we should always base how we order them in our css files on what's easiest to search for, read, and debug.
Organize CSS properties into groups according to how they affect the DOM or are loaded on a page. Our compiled CSS actually shows re-ordered CSS properties, so we should always base how we order them in our CSS files on what's easiest to search for, read, and debug.

1. **Display properties** (or things that affect the box model of an element or object)
2. **Type** (things that affect how fonts are displayed and positioned & their corresponding Visual Styles)
3. **Decorative properties** (properties that are specific to decoration on structural [non-typographic elements)
3. **Decorative properties** (properties that are specific to decoration on structural non-typographic elements)
4. **Animations and/or element transitions**

An example:
Expand All @@ -76,7 +74,7 @@ An example:
box-sizing: border-box;
display: block;
width: $width;
height: $height;
height: $height;
margin: 0 auto;
padding: 0;

Expand Down Expand Up @@ -119,7 +117,7 @@ line-height: 1.5;

### Commenting

Commenting our CSS helps better visually distinguish groups of related blocks. Commeting also allows us to offer additional context to our teammates around styles that may affect one another.
Commenting our CSS helps better visually distinguish groups of related blocks. Commenting also allows us to offer additional context to our teammates around styles that may affect one another.

An example:

Expand Down