css

.header { // tags, classes and ids should always have a gap between them and the previous property or tag

    h1 {
      color: red;
      
      // DO
      padding: 20px; // this is fine-ish
      padding: 10px 20px 10px 20px; // this is prefered T, R, B, L
      padding-left: 5px; // this is also fine when adjusting one value

      // DON'T DO
      padding: 20px 20px; // not like this :'( TB, RL
      padding: 20px 20px 20px; // not like this :'( T, B, RL
      
      @media #{$small-only}{ // media queries need gap too but must be before any child or this element classes
        color: green;
      }
        
      @include example(); // these need a gap much like a tag, mainly for legibility, also group all @includes together if possible
    
      &.first-class,
      &.second-class,
      &.third-class { // if you are referencing more than one element they must be on seperate lines
        background: green;
      
        &:hover {
          background: red;
        }
      }
    }
  }// .header

  // above: nice closing brackets, no real need for carrage returns here, optional comment at the end of blocks ie // .header

  @mixin example(){
    //empty example
  }

  @mixin font_regular(){}

  //lets have one reference for all typography areas, can also throw vars at these if required
  @mixin nav_typography(){
      @include font_regular();
      //other styles
  }

  // Failure to comply with these rules will result in severe punishment.
  // Punishments range from minor rollicking to death by bludgening.