BEM and document level

[glaszczyk]

Hello,
I would like to know how should I use BEM with document level (i.e. tag). Should I make something like and next add parts like header, content, footer etc. as elements (i.e. <header class="page__main-header")?

How should I nest block to make them flexible? Should I make i.e.
Idea-1.

<header class="page__main-header>
    <div class="main-header">
    </div>
</header>

and style

.page__main-header {
     width: 512px;
}
.main-header {
    width: 100%;
}

or just
Idea-2.

<header class="main-header">

</header>

with style

.main-header {
     width: 512px;
}

Idea 1 seems more flexible, because my block is flexible. Drawback is I need additional element to control each block and parent block needs elements for each nested block inside.

Thank you,
Greg