What is the difference between a mix and a modifier in this BEM example?

Question

css

There is a menu, in the header and in the footer, depending on where it is located, you need an indent from the parent 20px or 40px. In both cases, this is done by extending the common (universal) class selector. BUT what's the difference?

/////////////////////////////////////////////////// /////////////////////////////////////////////////// ////////

Answer 1

From a vanilla CSS point of view, there is no difference, you just add extra functionality by adding a class.
In terms of reading styles, there is a difference in where you describe what you want to achieve - in the first case (modifier) ​​the changes are described in the component itself, in the second (mix) the changes are described in the parent component (header, footer).
In your case, you should use only the mix, using a modifier will be a mistake, because:

• creating a modifier that is needed only for use within one block is useless;
  
• changing the geometry and positioning in the modifier is bad. There are cases when this is acceptable to some extent, but not in this case.
  

In general, the menu is not a very illustrative example, it is better to consider this concept on the example of something that is used repeatedly on the site - buttons, for example.