Почему установка font-size класса div не устанавливает размер шрифта элемента p?

Question

Вот мой html файл. Я хочу изменить размер шрифта всех элементов p в div. Поэтому я изменяю размер шрифта div, содержащего все абзацы, но он не работает Почему?

 <div class="footersection__left--address">
         <p>2</p>
         <p>Melano Park,</p>
         <p>CA</p>
         <p>USA</p>
 </div> 

Вот мой файл S CSS -

.footersection {
    background-color: #FFF;
    padding: 6rem;

    &__left{
        font-size: 1.5rem;

        &--address{
            font-size: 5rem;
            color: aqua;
        }
    }
}

Answer 1

CSS, сгенерированный из этого S CSS:

.footersection {
    background-color: #FFF;
    padding: 6rem;

    &__left{
        font-size: 1.5rem;

        &--address{
            font-size: 5rem;
            color: aqua;
        }
    }
}

Это CSS:

.footersection {
  background-color: #FFF;
  padding: 6rem;
}
.footersection__left {
  font-size: 1.5rem;
}
.footersection__left--address {
  font-size: 5rem;
  color: aqua;
}

Как видите, p берет шрифт размер последнего селектора .footersection__left--address.

Посмотрите на это CodePen .

Answer 2

Как указывает @Ale_info, ваш скомпилированный CSS означает, что ваши p теги будут наследовать font-size: 5rem от .footersection__left--address. Или у вас есть что-то еще в ваших таблицах стилей, устанавливающих размер шрифта для всех тегов p.

Я также хотел бы воспользоваться возможностью, чтобы сказать вам, что вы используете BEM неправильно.

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

Это плохо БЭМ:

<div class="footersection">
  <div class="footersection__left--address"></div>
</div>

Это хорошо БЭМ:

<div class="footersection">
  <div class="footersection__left footersection__left--address"></div>
</div>