Nesting

CSS should be compiled with a pre/post processor today. This enables nested declarations that don’t exist in the CSS spec.

There are only two cases it’s acceptable to use nesting in CSS.

  1. Pseudo-classes
  2. Pseudo-elements

Nesting should never be used for other selectors.

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. Since this relationship is implied and immovable, nesting provides ideal context.

.icon {
    @include image-replacement;

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

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