Денис Инешин

Первый вариант более правильный. Суть в том чтобы не пихать всё в одну корзину.
Так гораздо проще поддерживать код и читать его. Можно всё положить в разные папочки и быстро находить.

К тому же первый вариант позволит вам переиспользовать логотип в другом месте, например в подвале сайта или еще где-то.

2 предпочтительней. Так как навигация вынесена в отдельную сущность.

В 1 варианте header__list и header__item - вообще непонятно что. Как понять что это меню? Названия еще и смысл должны нести.

Да сходу можно кучу вспомнить:
.header, .footer, .menu, .content
.logo, .products, .contacts, .gallery, .list, .news

Но зачем вам какой-то список? Думайте логически, называйте блоки так, чтобы было понятно и вам и тем кто придет после вас.

Суть БЭМ не только в таком именовании, но и в том, что вы можете в любой момент взять любой блок, в любом сочетании и перенести в другое место и все будет работать. Никаких конфликтов, никаких коллизий имен, никаких зависимостей от областей видимости. В этом его сила.

Ну а избыточность описания легко исправляется инструментами сборки, которые сами соберут все эти длинные имена.

То что вы предлагаете, конечно тоже имеет право на существование. Используйте в своих проектах, если вам это подходит.

Вообще это не общепризнанная практика генерировать HTML таким образом. Посмотрите на другие решения:

Препроцессоры
Jade, Haml

Шаблонизаторы:
habrahabr.ru/post/219873

Можно например так:

.block {
    color: #fff;
    .title {
        color: #fff;
    }

    header &, footer & {
        color: #000;
        .title {
            color: #000;
        }
    }
}