A couple a days ago someone in my team raised the following questions: "To add a new version of a button, should we use BEM modifiers or create a mixin to add the basic styles of the button to a new class?". This led to a very interesting discussion.

I bit of context

The project started almost a year ago, most than 12 developers have put their hands on it, and let's face it, css it's commonly underestimated. The idea was to follow BEM, but since sass was also used, suddenly mixins and BEM modifiers started to mixed up. A couple on months ago, i entered the project with the idea to organize the css a bit when time's right.

It all brings us to the question and the following discussion. Which approach to handle different version of the same component is better: BEM modifiers or mixins?

Let's imagine we have a button component and there's two different version: primary and secondary. Let's see how we can accomplish this.

The discussion


If you take a look at the compiled css in that pen, you will notice that there are 3 classes with the same base styles: .button, .button-primary, .button-secondary. Note that the .button class is not really necessary, since the important ones are the version of the component, but that can be mitigated by using sass placeholders.

As you can see, the html only has one class for each variation, and you give the css the responsibility to apply the required styles for each variation.


Note that i purposely didn't use any sass feature, so to make clear that no preprocessor is required for BEM.

As you can see, it is more verbose, and the html can easily bloat. But, that verbosity it is an advantage for me: you can see clearly what classes are necessary to get the element look like you need it.

The verdict

Well, i personally like better BEM. It's verbosity make really clear which classes you need to apply. While mixins do that under the hood, with BEM you have to specify it yourself. You don't end up applying things you need because you know what you're applying, and that's a good thing. But the most important advantage of using BEM over mixins is that BEM is an architecture, a paradigm if you will, while mixins are just a tool, and as a general rule, you should never rely solely in tools.

All in all, is just a matter of preference. If you're faced to such a question, just choose what feels good for you and your team and stick to it.

1,676 2 10