Suit CSS Cheat Sheet

suit.sass

.MyModule
    
    // attributes (alphabetical)
    background: blue;
    
    // pseudo
    &:before {

    }

    // tag children
    div {
        background: orange;
    }
    
    // non state class children
    .someClass {
        font-size: 12px;
    }

    // single dash
    &-myComponent {
        color: yellow;
    }

    // state classes
    &.is-someState {
        color: yellow;
    }

    // double dashes
    &--myModifier {
        color: red;
    }
    
    // media queries (smallest to largest)
    @media (max-width: 600px) {
        .facet_sidebar {
            display: none;
        }
    }
}