BEM too much classes?

Question

I have been following the BEM methodology and i am not sure if i am doing it right since i end up with quite a lot of classes sometimes. I wan to keep my code modular and reusable so i started to use mixins and placeholders. But in some cases i will end up with code like that :

to have the code reusable i have for example the following scss:

class specific scss file:

.l-page-width {
  display: inline-block;

  &_background_white {
    @extend %background_white;
  } 

  &_padding_bot-top {
   @extend %padding_bot-top;
  }

  &_center_absolute {
   @extend %center_absolute;
  }
}

Placeholder:

%background {
  &_white {
    background: $white;
  }
}

%padding {
  &_bot-top {
    padding-bottom: span(.35);
    padding-top: span(.35);
  }
}

%center {
  &_absolute {
    bottom: 0;
    left: 0;
    margin: auto;
    overflow: auto;
    position: absolute;
    right: 0;
    top: 0;
  }
}

HTML

<div class="l-page-width l-page-width_background_white l-page-width_padding_bot-top l-page-width_center_absolute">

<div class="c-quote c-quote_padding_lr">
            <h1 class="c-quote__title c-quote__title_outline_black">
              Title Here
            </h1>
            <p class="c-quote__content">
                content text here
            </p>
        </div>
</div>

i have been reading the bem info site again and came up with that and it makes much more sense now:

<div class="l-page-width">
    <div class="l-page-width__c-quote c-quote">
        <h1 class="c-quote__title c-quote__title_outline_black">
          Title Here
        </h1>
        <p class="c-quote__content">
            content text here
        </p>
    </div>
</div>

scss:

.l-page-width__c-quote {
  @extend %background_white;
  @extend %padding_bot-top;
  @extend %padding_lr;
  @extend %align_center;
}

I

Having all these view-specific classes you're definitely wrong. Please take a look at https://en.bem.info/methodology/quick-start/ — tadatuta, Oct 22 '16 at 13:37
i will read it again ..but i kinda got confused what would be the best way to specificy the view-specific attributes, since i dont want to and shouldnt specifiy them in the Block — HendrikEng, Oct 22 '16 at 14:06
@tadatuta thanks for ur help..i changed the code again after reading thought it again could u quickly check ifs better ? thanks a lot — HendrikEng, Oct 22 '16 at 15:09

3rdthemagical · Answer 1 · 2016-10-24T06:44:06.820

Don't try to make your code complex, don't try to use tons or helpers, mixins and so on. Try to write simple and all-sufficient code.
l-page-width__c-quote c-quote - this selector say anything about element. I can't even imagine what it is. Don't try to name classes in that way, that they describe the appearance of the element. Perfect class names are: news, news__title, news__date and so on.
Don't use your custom prefixes - no one except you don't know what does they mean.
There is nothing wrong to write the same code twice. Much worse is when you need to modify one of the two blocks made of the same mixins or placeholders or try to understand why some element has this appearance.

I did not call to abandon the mixins or placeholders. We just need to use them sparingly.

BEM too much classes?

1 Answers1