chharvey
commented
9 years ago The reason &:extend() is great is that it reduces repeated code. If a bunch of classes have a similar property (e.g., border-bottom-width: 1px;), it's more efficient for them to share that property.
This philosophy works only up to a point. While it is more efficient for the selectors to share, it causes specificity issues. If one class were to extend another class with a different border-bottom-width, then the width that would get applied would depend on where the extended classes were defined in the source.
Thus use the following rule: If a class represents a "superclass" or "type" of object, then it's okay to &:extend() it, so long as the classes that extend it are truly special cases of the superclass.
Do _not_ use the extend mechanism on repeated site-wide patterns solely for the sake of efficiency. For instance, say a bunch of Objects have margin-top: 24px;. Then it IS okay to create an interface .margin-top-rem {margin-top: 24px;} and include that interface (as a mixin) in all those different Objects. But unless all these Objects are subclasses of some bigger superclass, this does NOT mean that you can use &:extend(.margin-top-rem). This is because .margin-top-rem {} is not a "type" of Object. Its just simply a pattern that many Objects share, perhaps coincidentally.
When deciding whether to use :extend verses include (mixins): ask yourself:
Do these Objects all share this property because they are all special cases of one major type? Or do they just have the same property by coincidence?
Remove all
&:extend()from Less. Use mixins only. Extends are not worth all the specificity issues.