CODEWITHSUNDEEP
csstwitter-bootstrapbem
bernk
bernk

Reputation: 1165

How to properly mix Bootstrap and BEM?

I'm looking at slowly refactoring a pretty big project that is built on Angular / Bootstrap that has just over 16,000 lines of CSS. Yay!

I've been looking more and more into BEM and believe it would be a good way to go for this. There is also a strong possibility that we will be moving to React, which I don't know much about yet, but it seems to me the modularity of both React and BEM would mesh nicely.

For now, I'm looking purely at the CSS, and wondering how I can combine BEM's methodology with the layout and presentational classes we use from Bootstrap (e.g. .container, .row, .col-m-12, etc.).

I'm aware of the practice of using @extend or @include to add the styles of these layout classes to blocks or modules, but I personally don't think it's a good one. This practice makes it impossible to tell what is happening by looking at the html alone and makes it very difficult to maintain/debug/refactor.

Is there anything wrong with simply doing something like the following?

<div class="nav container">
   <div class="row">
      <div class="nav__item col-sm-2">…</div>
      <div class="nav__item col-sm-2">…</div>
      <div class="nav__item col-sm-2">…</div>
      <div class="nav__item col-sm-2">…</div>
      <div class="nav__item col-sm-2 col-sm-offset-2">…</div>
   </div>
</div>

Upvotes: 7

Views: 9643

Answers (4)

Volker
Volker

Reputation: 9

I was also thinking about this topic (mixing BEM and bootstrap) and I have used a similar approach like your code in past projects. So generelly, yes, your code is working. You are mixing 2 approaches (component-based/BEM and utility classes). BEM in its "strict philosophy" would not allow utility classes. But mostly, in a more straightforward approach, it ends up by mixing BEM (for your own components) and utility classes (provided by the framework). What I would recommend is using a prefix for your own components/blocks (so ".myproject-nav" instead of ".nav") to avoid naming conflicts of bootstrap and your own components.

Upvotes: 0

Stephen Brown
Stephen Brown

Reputation: 43

I would put the nav__item after col-sm-2 as I would want the BEM to override the nav_item in most cases. col-sm-2 would be the base class and nav_item would add to it or amend it.

Upvotes: 0

Paleo
Paleo

Reputation: 23752

I'm aware of the practice of using @extend or @include to add the styles of these layout classes to blocks or modules, but I personally don't think it's a good one. This practice makes it impossible to tell what is happening by looking at the html alone and makes it very difficult to maintain/debug/refactor.

You're right.

You could consider to use an alternative syntax for BEM in order to prevent naming conflicts:

Upvotes: 5

tadatuta
tadatuta

Reputation: 2025

There's nothing wrong with the scheme you suggested. Keep going with it.

Upvotes: 1

Related Questions