When to use @extend versus a mixin

Use @extend for rules with explicit relationships and mixins for coincidental relationships.

An explicit relationship is something like a button, highlighted button, a disabled button.

A coincidental relationship is something like using the same color or font.

Microsoft browsers used to have a limit of 4095 selectors in a single CSS file.

@extend groups selectors together while mixins copy their body to each call site.