Selector Hierarchy

gistfile1.txt

.selector {
    // extend is the very first incase you wish to overwrite
    @extend %overlay;
    
    // alphabetical order of rules
    text-align: right;
    
    // z-index in increments of 5
    z-index: 5;
    
    // includes next whether this be media query of include
    @include mobile-first(400px) {
    
    }
    
    // pseudo-classes
    &:after {
    
    }
    
    &:before {
    
    }
    
    // modifier classes
    &--modifier {
    
    }
    
    .touch & {
    
    }
    
    // grouped child elements in order of markup-ish
    // E.G, li will follow ul
    ul {
    
    }
    
    li {
    
    }
    
    p {
    
    }
    
    // finish off with classes
    .child-class {
    
    }

}