In the first example, why set the class on the div rather than the button itself?

[FrancisVila]

Here's the text:
...we need to ensure that a modifier would affect only the block it belongs to. Let's say that we have a menu item element and a button mixed together. In HTML this construction is represented by the following markup:

In this case adding **.active** modifier to them would affect both.

Why not add the active modifier to the button, something like:

That (as I see it) would have the advantage of differentiating between formatting specific to active buttons, specific to the menu__item block, and specific to active buttons within the menu__item block.

Further, I don't see why you would use class=button instead of just the button tag selector, but that's another question.