Union Coding Standards - SASS

standards.scss

.MyModule {
    // attributes (alphabetical)
    background: blue;
    
    // pseudo
    &:before {
    }
    
    // tag children (alphabetical)
    div {
        background: orange;
    }
    
    // non state class children (alphabetical)
    .someClass {
        font-size: 12px;
    }
    
    // single dash (alphabetical)
    &-myComponent {
        color: yellow;
    }
    
    // state classes (alphabetical)
    &.is-someState {
        color: yellow;
    }
    
    // double dashes (alphabetical)
    &--myModifier {
        color: red;
    }
    
    // media queries (smallest to largest)
    @media (max-width: 600px) {
        .facet_sidebar {
            display: none;
        }
    }
}