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>
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:
There's nothing wrong with the scheme you suggested. Keep going with it.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With