How to reset browser styles in BEM, how to correctly create modifiers, independent blocks?

Question

BEM

Hello.
I'm learning BEM and I can't find answers to some questions:
1) How to reset default browser styles?
According to BEM

The block should not affect its environment, i.e. the block should not be given external geometry (in the form of padding, borders that affect dimensions) and positioning.

What if we have blocks or , which have a default browser margin ? Each time to mix with the class of the element (for example, ) and already set the margin to zero on it ? On the site https://en.bem.info/ for .nav they just set margin: 0 , which goes against their own rules. 2) How to put styles into modifiers correctly? Example: there is such a code for a button<ul class="nav"><button class="button"><ul class="parent__nav nav">

.button {
  padding: 20px;
  ...
  тут много других правил
}

After some time, it became necessary to make the same button, but smaller. Initially, when laying out the layout, I would do this:

.button {
  ...
  тут много других правил
}
.button_size_large {
  padding: 20px
}
.button_size_small {
  padding: 10px
}

But now we have two options:
1 - rewrite the styles as above, find all the old buttons in html and add the button_size_large modifier to them ;
2 - make only the button_size_small class , which will redefine the old padding for .button , while you need to make sure that the class in the style sheet is below .button , or increase the specificity, which is not according to BEM.
With constant such improvements, the code turns into a pile of garbage, and it looks normal only after the initial layout before any edits. What is the advantage of BEM over the usual writing of styles with nesting, !important, etc., or am I doing something wrong?
3) According to BEM, blocks are independent, you can change their position on the page in any way, while they should look correct.
Suppose there is a heading with a font size of 30px. I know that at the time of template development it is used only in .content (width: 80%) and looks fine there. Should I think that in the future the heading might be placed in .sidebar (width: 20%) and 30px will obviously be a lot.
Or the color of the header in .content is red, while the .sidebar has a red background, and if you add it there, the text will not be readable.
The same goes for the adaptive.
How should I ensure that the block is independent of the context of use?
4) No matter how much I searched, I never found a template made up according to the BEM methodology, which would be 100% consistent with their approach. Do these even exist?
The same https://ru.bem.info as I wrote above resets the margin for the BEM block. And then everything is fine, until there is a need to use this menu somewhere else with a different indentation.
I often see posts like

BEM is not a set of strict rules, but only a recommendation...

And then wherever you look, everyone has their own BEM, with their own exceptions and rules, which are known only to the author.