Correct way to write according to BEM methodology for following markup?

Question

Which is the correct way to write per BEM methodology for the following markup:

HTML:

<div class="col-sm-12 header">
    <div class="logo">
        <img class="logo__img" src="images/logo.png" />
    </div>
</div>

CSS:

header {}
logo{}
logo__img{}

Or:

HTML:

<div class="col-sm-12 header">
    <div class="header__logo">
        <img class="logo__img" src="images/logo.png" />
    </div>
</div>

CSS:

header {}
header__logo{}
logo__img{}

Answer 1

You have two blocks: header and logo. Logo has an element - image. Basic structure is:

header {}
logo {}
logo__image {}

At first you should decide is wrapping div is really needed? Maybe you can just write:

<img class="logo" src="images/logo.png" />

Anyway.
If logo in header has some custom styles, for example margins or different sizes, you should add modificator logo_modificator to customise logo in header.

logo {}
logo_modificator {}
logo__image {}
logo_modificator logo__image {}

What's more I recommend you to separate col and header.

<div class="col-sm-12">
    <div class="header">
        <div class="logo">
            <img class="logo__img" src="images/logo.png" />
        </div>
    </div>
</div>