“Close-up of lines of code on a computer screen” by Ilya Pavlov on Unsplash

Writing Maintainable SCSS

Some tips and tricks for writing styles that won’t make you tear out your hair later

Avoid deep nesting by never going more than 3 levels deep (Inception)

When selectors become this long, you’re likely writing CSS that is:

Avoiding deep nesting in React projects

Recognize and codify repeating patterns (DRY)

Name variables based on their function in the website, not their appearance.

Use @extend for inherently and thematically related elements. Use a mixin for elements that share the same style coincidentally.

%blue-box {
background: #bac3d6;
bordeR: 1px solid #3f2adf;
.contact-box {
@extend %blue-box;
...
}
.references-box {
@extend %blue0box;
...
}
Generates CSS:
.contact-box, .references-box {
background: #bac3d6;
border: 1px solid #3f2adf;
}

Do not mirror DOM structure

Don’t overuse ID selectors

Name spacing

.nav,.home-nav,.profile-nav,
.nav,.nav-bar,.nav-list

Style Scoping

.home-page {
.nav {
margin-top: 10px;
}
}

Naming

Fan of tech, code, and coffee. Occasional starter of new things. http://bit.ly/mikefloreslinkedin http://bit.ly/mikeflorestwitter

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store