CODEWITHSUNDEEP
htmlcsssassbem
Y.R
Y.R

Reputation: 210

Why setting div class font-size doesn't set the p element font size?

Here is my html file. I want to change the font size of all p element in the div. So I change the font size of the div containing all paragraphs but it doesn't work. Why? 

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

Here is my SCSS file-

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

    &__left{
        font-size: 1.5rem;

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

Upvotes: 3

Views: 1005

Answers (2)

codeth
codeth

Reputation: 567

As pointed out by @Ale_info, your compiled CSS means that your p tags will inherit font-size: 5rem from .footersection__left--address. Or you have something else in your stylesheets setting the font-size on all p tags.

I also wanted to take the opportunity to tell you that you're using BEM wrong.

-- defines a Modifier class, which should modify an existing Element class, thus should be appended to it. You're using a modifier on its own without the actual base styles for the element.

This is bad BEM:

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

This is good BEM:

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

Upvotes: 1

Alessandro_Russo
Alessandro_Russo

Reputation: 2211

The CSS generated from this SCSS:

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

    &__left{
        font-size: 1.5rem;

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

Is this CSS:

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

As you can see the p take the font size of the last selector .footersection__left--address.

Look at this CodePen.

Upvotes: 2

Related Questions