Почему не применяются стили к popup в scss?

Question

[Caesar1337]

<div class="header__top">
	<div class="container">
		<div class="header__info info">
			<div class="info__contacts">
				<a href="#" class="info__phone">[phone]</a>
				<a href="" class="info__email">[e-mail]</a>
			</div>
			<div class="info__consultation consultation">
				<a href="#consultation__popup" class="consultation__link">Бесплатная консультация</a>
				<div id="consultation__popup" class="mfp-hide consultation__popup">
					Hello
				</div>	
			</div>
		</div>
	</div>
</div>

.header {
    &__top {
        .info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            &__contacts {

            }
            &__phone {

            }
            &__email {

            }
            .consultation {
                &__link {
                    color: red
                }
                &__popup {
                    background-color: #fff;
                }
            }
        }
    }
}

Ну и соответственно простой javascript, который просто открывает окно. Вопрос заключается в том, почему не применяются стили к классу consultation__popup? Но применяются если вынести за все вложенности scss.

Comments

[hecby_v]

Вроде как у вас в хтмл правильный селектор .header__top .consultation__popup а в scss .header__top .info .consultation__popup

[Ankhena]

1. Сделайте песочницу codepen.io или jsfiddle.net Потому что если взять ваш код и стили, то все работает.
2. Не нужно делать такую вложенность. Вы используете типа БЭМ, а в нем вложенность вообще не нужна либо достаточно двойной.

[strelok011]

Поддержу Ankhena - зачем воротить такое вложение. Делайте изолированные компоненты, которые легко переиспользовать, и ТОЛЬКО в случае когда в конкретном месте типовой компонент должен отличаться - делайте либо модификаторы, либо сложные каскады css.