Виталий Першин

Зависит от ситуации, если есть возможность, лучше использовать модификатор.
БЭМ хорошо решает проблему специфичности, благодаря чему поведение становится более предсказуемое.
Например у нас есть какой-то блок(или элемент, не важно) .box__item и мы хотим первому добавить отступ слева, например так:

.box__item:first-child {
    margin-left: 10px;
 }

Все весело и прикольно пока нам не понадобилось переопределять стили... К примеру нам надо на экране выше 720px задать всем box__item одинаковые отступы:

@media (min-width: 720px) {
.box__item {
    margin-left: 20px;
 }
}

И тут то и начались проблемы, специфичность первого .box__item повышена и простой класс его не переопределит, первый блок так и останется с 10-ю пикселями, теперь нужно либо повысить специфичность всех .box__item, либо к каждому переопределению .box__item цеплять :first-child

.box__item,
.box__item:first-child {
    margin-left: 20px;
 }

Уже не так красиво? Конечно тем кто привык к вложенным селекторам это кажется обычным делом, но значит они еще не вкусили всего кайфа БЭМ, когда ты переопределяешь что хочешь и где хочешь не ожидая подвоха.
Простой модификатор может легко решить эту проблему и следующее переопределение .box__item без подводных камней задаст именно те стили какие мы хотели, можно даже не задумываться о том, что что-то пойдет не так

Если стараться максимально придерживаться БЭМ, то такой конструкции .page-y .services-section лучше избежать. Вот такого точно не должно быть .page-x .services section
Вот так тоже не правильно .page-x-services-section / .page-y-services-section вы косвенно уже привязались к какой-то из страниц.

Вы можете использовать микс:
page-x__services-section services-section
Либо модификатор:
services-section services-section_type_1

Такая конструкция .page-y .services-section имеет место быть, но лучше избегать или хотя бы не увлекаться

Не совсем понятно что в итоге вы хотите получить и что именно у вас является логотипом (картинка или все содержимое logo), такие примеры желательно рассматривать с макетом, а не гадать на кофейной гуще, но тем не менее обычно логотип это отдельный блок, который можно миксовать в зависимости от окружения, как вариант так:

<aside class="aside">
    <div class="aside__logo logo">
        <div class="logo__pic">
            <img src="logo.png" alt="logo" class="logo__img" />
        </div>
        <div class="logo__title">Заголовок</div>
        <div class="logo__ico">Иконка</div>
    </div>
</aside>

Судя по макету тут как минимум 3 варианта. Если придерживаться вашей версии, что все в одном блоке dashboard, то будет примерно такая картина с модификатром (ключ_значение):

<div class="dashboard">
	<div class="dashboard__container">
		<div class="dashboard__header">
			Your channels
		</div>
		<div class="dashboard__btn btn">
			<div class="btn__ico"></div>
			<div class="btn__content">Create a chanell</div>
		</div>
		<div class="dashboard__list">
			<div class="dashboard__item dashboard__item_type_1">
				<div class="dashboard__pic dashboard__pic_size_smal">
					<img src="" alt="" class="dashboard__img">
				</div>
				<div class="dashboard__content">
					<div class="dashboard__title dashboard__title_size_small">lorem</div>
					<div class="dashboard__url">lorem</div>
				</div>
			</div>
			<div class="dashboard__item dashboard__item_type_small">
				<div class="dashboard__pic dashboard__pic_size_smal">
					<img src="" alt="" class="dashboard__img">
				</div>
				<div class="dashboard__content">
					<div class="dashboard__title dashboard__title_size_small">lorem</div>
					<div class="dashboard__url">lorem</div>
				</div>
			</div>
			<div class="dashboard__item dashboard__item_type_small">
				<div class="dashboard__pic dashboard__pic_size_smal">
					<img src="" alt="" class="dashboard__img">
				</div>
				<div class="dashboard__content">
					<div class="dashboard__title dashboard__title_size_small">lorem</div>
					<div class="dashboard__url">lorem</div>
				</div>
			</div>
		</div>
	</div>
	<div class="dashboard__container">
		<div class="dashboard__header">
			Subscriptions
		</div>
		<div class="dashboard__list">
			<div class="dashboard__item">
				<div class="dashboard__pic">
					<img src="" alt="" class="dashboard__img">
				</div>
				<div class="dashboard__content">
					<div class="dashboard__title">lorem</div>
					<div class="dashboard_desc">lorem</div>
				</div>
			</div>
			<div class="dashboard__item">
				<div class="dashboard__pic">
					<img src="" alt="" class="dashboard__img">
				</div>
				<div class="dashboard__content">
					<div class="dashboard__title">lorem</div>
					<div class="dashboard_desc">lorem</div>
				</div>
			</div>
			<div class="dashboard__item">
				<div class="dashboard__pic">
					<img src="" alt="" class="dashboard__img">
				</div>
				<div class="dashboard__content">
					<div class="dashboard__title">lorem</div>
					<div class="dashboard_desc">lorem</div>
				</div>
			</div>
		</div>
	</div>
</div>

Второй вариант это миксовать с родителем:

<div class="dashboard">
	<div class="dashboard__container subscribers">
		<div class="dashboard__header">
			Your channels
		</div>
		<div class="dashboard__btn btn">
			<div class="btn__ico"></div>
			<div class="btn__content">Create a chanell</div>
		</div>
		<div class="dashboard__list subscribers__list">
			<div class="dashboard__item subscribers__item">
				<div class="dashboard__pic subscribers__pic">
					<img src="" alt="" class="dashboard__img">
				</div>
				<div class="dashboard__content">
					<div class="dashboard__title subscribers__title">lorem</div>
					<div class="dashboard__url">lorem</div>
				</div>
			</div>
		</div>
	</div>
	<div class="dashboard__container subscribtions">
		<div class="dashboard__header">
			Subscriptions
		</div>
		<div class="dashboard__list">
			<div class="dashboard__item">
				<div class="dashboard__pic">
					<img src="" alt="" class="dashboard__img">
				</div>
				<div class="dashboard__content">
					<div class="dashboard__title">lorem</div>
					<div class="dashboard_desc">lorem</div>
				</div>
			</div>
			</div>
		</div>
	</div>
</div>

3-й вариант и порой самый уместный это не обращать внимание на то что блоки якобы похожи. Это разные блоки по своему назначению, а значит их смело можно делать разными и в разметке. Ведь если у них разное предназначение, значит возможны и значительные отличия в будущем:

<div class="dashboard">
	<div class="dashboard__subscribers subscribers">
		<div class="dashboard__header">
			Your channels
		</div>
		<div class="dashboard__btn btn">
			<div class="btn__ico"></div>
			<div class="btn__content">Create a chanell</div>
		</div>
		<div class="subscribers__list ">
			<div class="subscribers__item">
				<div class="ubscribers__pic">
					<img src="" alt="" class="subscribers__img">
				</div>
				<div class="subscribers__content">
					<div class="subscribers__title">lorem</div>
					<div class="subscribers__url">lorem</div>
				</div>
			</div>
		</div>
	</div>
	<div class="dashboard__subscribtions subscribtions">
		<div class="dashboard__header">
			Subscriptions
		</div>
		<div class="subscribtions__list">
			<div class="subscribtions__item">
				<div class="subscribtions__pic">
					<img src="" alt="" class="subscribtions__img">
				</div>
				<div class="subscribtions__content">
					<div class="subscribtions__title">lorem</div>
					<div class="subscribtions_desc">lorem</div>
				</div>
			</div>
			</div>
		</div>
	</div>
</div>

Каждый из этих вариантов можно еще доработать

использоваться без некоторых своих элементов,

Конечно, блок может быть вообще без элементов

ИЛИ с изменённой последовательностью этих самых элементов

Конечно можно, а если невозможно изменить что-либо не нарушив стандартное поведение, применяется модификатор или микс.

например вложенный блок в одном месте является так же и элементом (микс)

Да, любой блок может быть миксом другого блока или элемента.

В данном примере я использовал названия блоков "header-top" и "header-bottom", является ли это ошибкой?

Тут конечно нужно изучать в контексте, но header-1 и header-2 будет значительно практичнее. Если поменять местами header-top и header-bottom, что по сути должно быть возможным хотя бы в теории, то из-за таких названий будет полный диссонанс, в то время как абстрактные имена header-1 и header-2 ни к чему нас не обязывают и ни чем не ограничивают.

Еще можно использовать префикс например t-header b-header, интуитивно мы можем себе представить что это top и bottom, но по факту это всего лишь абстрактное название header

Ключ-значение
block_size_small
block__element_size_small

В данном случае модификатор у нас size, а его значение может быть small, large и тд

Если отличия стилистические, то есть, можно предположить что в любом месте можно использовать один из двух вариантов, то лучше делать через модификатор с ключем и его значением. Например:
socials_theme_ligth
socials_theme_dark
где theme это ключ, а ligth и dark его значения, которые не могут быть использованы одновременно на одном блоке.
Для остальных изменений, которые необходимо внести только в footer мы применяем микс. К примеру нам нужна светлая тема, но в футере необходимо добавить отступ сверху или еще какие-то изменения в данном контексте. Выглядеть это может вот так:

<ul class="footer__socials  socials socials_theme_ligth">
...
</ul>

.socials {
  color: #000;
}
.socials_theme_ligth {
  color: #fff;
}
.footer__socials  {
  margin-top: 100px
}

Если по БЭМ, то я определяю основную группу как блок, например ico, а названия самих иконок, как его элементы и выходит что-то вроде:
ico__arrow_dir_left
ico__arrow_dir_right
или
i__check
i__check_size_small
i__check_size_big

В вашем случае я бы советовал добавить второй класс (Да, так можно и нужно) например header-top__item и описал в нем общие свойства:

<div class="header-top__language header-top__item">
<div class="header-top__contact header-top__item">
<div class="header-top__profile header-top__item">

При этом можно не просто создать 2 класса, а сделать микс блоков и элементов, что в дальнейшем позволит их переиспользовать:

<div class="header-top__item language header-top__language"></div>
<div class="header-top__item contact header-top__contact"></div>
<div class="header-top__item profile header-top__profile"></div>

В итоге:
header-top__item - Описывает ряд элементов со схожими свойствами
language, contact, profile - Независимые блоки
header-top__language, header-top__contact, header-top__profile - Модификаторы в контексте header-top (Не самое удачное название header-top но вопрос не в этом)

Да, по БЭМ, без дизайна больше не скажешь.
Единственное что, я бы точно заменил promo__text например на promo__content

Ankhena,

Но кнопка это блок.

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

Картинке не нужна обертка (разве что picture).

Все зависит от ситуации, вообще в БЭМ методологии обертки достаточно хорошая практика.

А promo__bg вообще не html тег, это либо псевдоэлемент либо просто фон.

При чем тут тег? Если это фон и возможно он будет анимироваться каким-то образом или вообще там будет динамический фон, то вполне не плохое решение.

Как по мне это абсолютно бесполезные миксы:

<div class="container  page-header__container">
<div class="row  page-header__row">

Там всего пара свойств, зачем их переопределять, создайте свои блоки по БЭМ с нужными вам свойствами, в данном случае достаточно просто убрать container и row

Вот это вообще не микс:
logo page-header__col-logo
либо так: page-header__logo
либо с модификатором ключ-значение: page-header__logo page-header__col_type_logo

Меню и мейл почти тоже самое:
либо page-header__main-nav
либо все же если акцент на col, то пара ключ-значение: page-header__col page-header__col_type_menu, а еще лучше абстрактно page-header__col_size_small смотря какие стили собираетесь вешать...

В общем даже в таком коде можно определить для себя какой-то единый стандарт, а у вас все перемешано вопреки методологии..

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

Противоречиво... С одной стороны, если вы не собираетесь это нигде переиспользовать, то можно смириться.
С другой стороны методология БЭМ как раз и нужна для того чтобы поделить сайт на части и вставлять их в любое место. Зачем объявлять блок footer-column, если он все равно по именованию является элементом footer. В данном контексте footer-column можно называть footer__column, footer-column__title можно назвать footer__title и т.д.. так как они все равно завязаны на footer. Вот если вы footer-column назовете например box то вы по всем правилам объявите независимый блок и сможете его использовать в любом месте сайта и вложенные в него элементы типа box__nav, box__item, box__url. А примиксовав к нему footer__box вы сможете задать значения зависимые от окружения

Да, допустимо. И вот собственно комментарий по этому вопросу из последнего БЭМапа https://youtu.be/sX8xQrwk6ko?t=45m30s