When is it better to use mixins and when is it better to use generic classes?

Question

HTML

Good day everyone!
It's been a long time since I've had this doubt. I use preprocessors and try not to forget about mixins. And here, in fact, such a swing occurs often: common styles can be transferred on the one hand by a class (for example, .flex {display: flex; justify-content: space-between;), and on the other hand by a mixin. Is there any difference in terms of performance / expediency?

Answer 1

Generic CSS classes can be used if you control the setting of those CSS classes, as it is done in HTML. Naturally, in this case, the volume of the resulting CSS code will be less, but in complex cases, the logic for placing CSS classes may not be the most trivial.
In contrast, mixins affect the generated CSS. The end result will likely be more code, but it will be more isolated and less dependent on HTML control. In terms of performance, if you approach it wisely and do not build multi-level complex selectors unnecessarily, there should not be any special problems.
Also, do not forget about another way of horizontal expansion - placeholder'Oh. Their use allows you to save on the amount of CSS code due to the elimination of duplication, but may not have the most obvious consequences without understanding what exactly is behind this abstraction.