search

bem-site / bem-forum-content-en

Content BEM forum for English speak users
3 stars 0 forks source link

Bootstrap container and row class #52

Open mrttl opened 7 years ago

mrttl commented 7 years ago

How does BEM work with Bootstrap´s .container and .row classes? Say if I have a block called .design-news with a background image that spans the entire page and then a .container and .row under that block which would center my content, can I just keep the default classes or does it have to be .design-news__container and .design-news__row?

tadatuta commented 7 years ago

You may keep default classes, consider them as separate blocks.

mrttl commented 7 years ago

OK so they not considered part of the block then right? Just so I understand you correctly.

<div class="design-news">
  <div class="container">
    <div class="row">
      <div class="design-news__foo">foo</div>
      <div class="design-news__bar">bar</div>
    </div>
  </div>
</div>

Is the OK way with BEM?

tadatuta commented 7 years ago

yes, they are blocks by them selves.

but you may mix them to semantic blocks as well:

<div class="design-news container">
    <div class="design-news__item row">
      <div class="design-news__foo">foo</div>
      <div class="design-news__bar">bar</div>
  </div>
</div>
mrttl commented 7 years ago

Perfect! Thank you so much for the awesome help!