CSS Priority Guide

css-priority-guide.scss

.component {
  @include background(linear-gradient(top, #fff 0%, #ddd 100%)); /* Mixins */
  border: none;                      /* Overriding boilerplate */
  margin-top: 20px;                  /* Affecting layout in relation to previous elements */
  background: red;                   /* Most important styles to visual appearance */
  display: inline-block;             /*     ... to ...        */
  padding: 2px;                      /* Least important */
  margin-bottom: 10px;               /* Relevant to following components */
  position: relative;                /* Relevant to children */
  border: 1px solid rgba(#000, .3);  /* Relevant to IE override */
  html.lt-ie10 & {
    border: 1px solid #ddd;          /* IE override */
  }
  &:pseudoclass {
    position: absolute;  /* Needs the position: relative above */
  }
  .component_subcomponent {
    &.-extend {}         /* Avoid extending subcomponents if possible - extend the main component instead */
  }
  &.-extend {}
  @media (query) {}
}