DEV Community

Discussion on: 8 SCSS Best Practices to Keep in Mind

View post
Collapse
 
adamdsherman profile image
AdamDSherman • • Edited

Thanks, this is an excellent post!

Heres a few additional things that helped me:

1Avoid naming colour variables after the colour. Go for $primary, #secondary, $light, $dark, etc. Eg:

$primary: #0000ffl
// Instead of 
$blue: #0000ff;
Enter fullscreen mode Exit fullscreen mode

You never know when a company will change it's colour scheme, and you can re-use the same colour.scss file accross multiple projects.

Another handy thing I use is creating new variables at the top of sections .scss files. For example, if I have a footer.scss file, at the top I might have:

$footerBackgroundColor: $secondary;
$footerTextColor: $pimary;

.footer {
  background-color: $footerBackgroundColor;
  color: $footerTextColor;

 a {
   color: $footerTextColor;
  }
}
Enter fullscreen mode Exit fullscreen mode

That way I don't accidentally miss changing colours.