Recommended (S)CSS Guidelines

Recommended (S)CSS guidelines - this is how I have successfully managed stylesheets in my projects. 
P.S. If your css follows these guidelines then I can help you much faster and ship lots more code...

# normalizer over reset
# don't use IDs
# lowercase class names
# put classes in alphabetical order (actually alpha-order as many things possible)
# color variable names: color first, then shade
-- example: $blue, $blue-light, $blue-dark. If you really need to, you can do $blue-lighter $blue-darker. 
# don't reassign color variables. take the time to learn them. it will become second nature. promise.
# have a WIP scss file - everyone who doesn't really know what's going on can put new stuff there
-- it's like having an inbox. it works really well. 
# make the component have its name as a class name and then scope the css to that component. 
-- example: my-button component gets the class name .my-button and then the classes can be scoped in the scss. 
# write the CSS in a mobile-first way, and scope the media query/queries inside the class.  
-- example: 
.my-button {
  width: 100%;
  padding: 0.1em;
  border: 1px solid $blue;
  @media screen and (min-width: 768px) {
    width: 50%;
  }
  @media screen and (min-width: 992px) {
    width: 25%;
  }
 }
# put your base font size and line height in your body css. use font-size: 16px and a unitless line-height of 1.2. 
-- example: 
body {
  font-size: 16px;
  line-height: 1.2;
}
# for the rest of the CSS, declare font-sizes in ems. (you can use rems but Mel prefers ems bc she doesn't have to stop and think about it. but do pick ONE, define it, and stick with it)
# use autoprefixer because no one has time for that. 
# I like helper classes bc it keeps things more flexible. There's a rather standard set you can use and once everyone learns them, it's pretty much second nature.