Style Guide _

Using BEM

Naming Examples

Block: .menu

Element: .menu__item .menu__item-with-longer-name

Modifier: .menu__item--active

CSS & Sass Guidelines

Do

Delete commented out code before submitting a PR.

Don't

Leave comments in your code unless they are references, explanations or reminders.

Do

Alphebatize your CSS properties. Select all the properties and press F9 in VSCode.

Don't

Randomly list your CSS properties.

Do

Use the color variables & typography classes already defined for consistency and modularity.

Don't

Use new hex codes or re-define typographic styles.

Do

Respect the cascading part of CSS, take the time to find a class-based solution to a styling problem.

Don't

Use !important tags.

Do

Create new page Sass files when you need custom styles.

Don't

Edit the base styles often, or for custom styles only used on one or two pages.

Do

Be flat.

Don't

Nest more than 3 levels deep. It makes it harder to override.

Do

Give specific class names, e.g. .header__mobile-navigation--dark

Don't

Give generic class names, e.g. .list__item

Do

Limit the amount of mixins we have. Not everything needs to be a mixin, and should only be used to reduce redundancy.

Don't

Make an partial into a mixin! Have mercy!

Do

Use Sass features sparingly, and only if they are the best possible solution to a problem.

Don't

Sass has many cool features, but we don't have to use all of them!