add a prefix like header- or footer- for specific sections:
// Header
$header-height: 100px;
$header-background-color: $color-brand;
// Footer
$footer-height: 200px;
$footer-background-color: #aaa;
I like to keep all my variables in a single file, called _config.scss, that I include in
my primary stylesheet using the @import directive.
Global and Section-Specific Sass Files Are just Table of Contents
In other words, no styles directly in them. Force yourself to keep all styles organized into component parts.
If you find yourself using a number other than 0 or 100% over and over, it likely deserves a variable.
List Vendor/Global Dependancies First, Then Author Dependancies, Then Patterns, Then Parts
In Deployment, Compile Compressed
Comments get stripped when compiling to compressed code, so there is no cost.
Partials are named _partial.scss
Variablize All Colors
Except perhaps white and black.
In your global stylesheet, @import a _shame.scss file last.
I'd use these rules-of-thumb for when :target is a good choice:
When a "state" is needed
When the jump-down behavior is acceptable
When it's acceptable to affect the browser history