Perhaps I misunderstand BEM, but
.box .box__header {}
seems to be against the spirit of it -- my understanding is that this naming convention exists to prevent needing to nest style rules?
I agree with your edit; global styles are probably not the best here, however tempting they may be to reduce wrapper markup and make everything simpler (to begin with)
BEM would work in this case. It's just that I wouldn't use .sidebar as the starting container for the related elements, it would be .box instead.
In this example .sidebar just happens to be the container to hold other elements being placed into it. I would make .box be the actual true container of the widget I am placing inside whatever container happens to need it. My CSS would be built so that .box is the foundation and it could exist anywhere on the page.
<div class="sidebar"><div class="box"><h4 class="box__header">Header</h4></div></div> will produce green text.
Both will have the 20px font-size.
It all depends on how you plan out the HTML structure and CSS selectors.
EDIT: I would also say if you are placing HTML like this into the page in several places, then the CSS for it should be self-contained and totally separated fron the rest of the page. I would be reluctant to use default CSS on a container such as that. But I can see it would depend on the nature of the container.