GravDept uses CSS processors. This enables nested declarations, which aren’t in the CSS spec.

Acceptable nesting

There are only three cases it’s acceptable to use nesting in CSS. These relationships are implied and immovable, so nesting provides ideal context and readable code.

Pseudo-classes

.cake-list_item {
    border-top: 5px dotted pink;

    &:first-child {
        border-top: 0;
    }
}

Pseudo-elements

The ::before and ::after pseudo-elements only exist in relation to their parent.

.icon {
    @include image-replacement;

    &::before {
        content: '';
    }
}

.icon--cake::before {
    @include icon (cake);
}

State modifiers

A state class or attribute only exists in relation to itself.

.element {
    &.is-active {
        // Something
    }

    &[data-value='true'] {
        // Something
    }
}

Banned nesting

Never use nesting for other selectors. Example:

.footer {
    .social-icons {
        a {
            &.facebook {
                background: url(../img/icon/facebook.svg);
            }
        }
    }
}

Why not?