From CSS Wizardry:
The problems with@extendare manifold, but to summarise:
- It’s actually worse for performance than mixins are. Gzip favours repetition, so CSS files with greater repetition (i.e. mixins) achieve a greater compression delta.
- It’s greedy. Sass’
@extendwill extend every instance of a class that it finds, giving us crazy-long selector chains that look like this.- It moves things around your codebase. Source order is vital in CSS, so moving selectors around your project should always be avoided.
- It obscures the paper-trail.
@extendhides a lot of complexity in your Sass that you need to unpick more gradually, whereas the multiple class approach puts all of the information front-and-center in your markup.