Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Simple updates #9

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Simple updates #9

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
7 changes: 6 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -423,7 +423,7 @@ The overall structure of a SCSS rule should follow the below order:
}
```

As a rule of thumb, avoid unnecessary nesting in SCSS. **At most, aim for three levels.** If you cannot help it, step back and rethink your overall strategy (either the specificity needed, or the layout of the nesting). This prevents overly-specific CSS selectors.
As a rule of thumb, avoid unnecessary nesting in SCSS. **At most, aim for three levels.** If you cannot help it, step back and rethink your overall strategy (either the specificity needed, or the layout of the nesting). This prevents overly-specific CSS selectors. These also greatly increase the final file size.

<a name="rule-selector-property-formatting"></a>
### Rule/Selector/Property Formatting
Expand Down Expand Up @@ -849,6 +849,9 @@ Pre-formatted comment chunks can be setup within most IDEs and tied to a keyboar
* Avoid excessive and arbitrary shorthand notation. `.btn` is useful for button, but `.s` doesn't mean anything.
* Use meaningful names; use structural or purposeful names over presentational.
* It's also useful to apply many of these same rules when creating SCSS variable names.
* A valid name should start with a letter, an underscore, or a hyphen (-) which is followed by any numbers, hyphens, underscores, letters.
* A name should be at least two characters long.
* A name can not start with a digit, two hyphens or a hyphen followed by a number.

<a name="block-element-modifier-bem"></a>
### Block Element Modifier (BEM)
Expand Down Expand Up @@ -904,6 +907,8 @@ data-subnav="container"
data-subnav="toggle"
```

If for some reason you have to use id's or classes you should always prefix them with somehting like `js-`, so you can avoid conflicts as much as possible.

_Use your best judgement or ask a fellow developer if your namespacing makes sense. TL;DR Naming is hard._

#### State Classes
Expand Down