@mixin or @extend, that is the question.

Hi Cameron,

Having too many selectors grouped together is a very common problem issue in Sass not because of extends but because most developers don't follow the inception rule which is more of a guide but it states that you should never have selectors nested more than 3 levels deep, some developers even push that further and say never go more than 2 levels deep but 3 is nice and clean too.

Now to the question at hand and what a question it is, in my experience either works given the circumstance in which you require that CSS for. Let's go with an analogy.

Say you have 10 selectors that require :before and :after pseudo elements, the best way to get the base CSS going in most peoples minds would be to use a placeholder and extend it to all the children that need it but that's wrong as you end up with selector garbage, a much better option is to create a class and assign the base pseudo styles to it and then assign the class to the parent in the HTML that needs it; this not only removes the selector garbage but gives clarity to the CSS that's generated. From there all you need to do is assign the specific CSS to the children.

Now you might have read that and thought what about single responsibility principle, well I'm a firm believer that CSS should hold the master key, both your HTML and CSS need to share the responsibility as it will result in cleaner code and remove a lot of CSS that the Sass compiler generates.

mixins vs extend?

Extends are great if you are using for defining modular parts of a website that can be re-used throughout your CSS; without that many selectors bound to them which makes them extremely useful in that regard but as I said above you you can easily end up with selector garbage.

Mixins are perfect for the times when you have blocks of code that changes based on the given input, browser prefixed properties, media queries etc.

At the end of the day both have their uses and neither is better than the other but they have their own jobs to do, from my perspective it comes down to a project level that determines which you need to use as every project is unique and more often then not carries different requirements which results in a far different code base.