Using Bootstrap with itscss

Question

Having seen BEM naming conventions.

I would really like to use bootstrap sass with these methods.

Is it possible to extend bootstrap to use BEM style class names?

.block {}
.block__element {}
.block--modifier {}

For example, how would I go about naming a typical bootstrap nav using BEM?

       <header className="container-fluid">
            <nav className="navbar navbar-default navbar-static-top">
                <div className="container">
                    <div className="navbar-header">
                        <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                                aria-expanded="false" aria-controls="navbar">
                            <span className="sr-only">Toggle navigation</span>
                            <span className="icon-bar"></span>
                            <span className="icon-bar"></span>
                            <span className="icon-bar"></span>
                        </button>

What would be involved and how should I go about it?

score 2 · Answer 1 · edited May 23 '17 at 12:32

Yes, you can definitely do that using @extend and @include as demonstrated in this article - "BEM, SASS and Bootstrap: how to mix everything up in a smart way?"

The general idea is that you can apply the CSS properties of Bootstrap classes to your own classes. For example, your own navigation block (.my-navigation) can get all of the CSS styles of .navbar:

.my-navigation {
    @extend .navbar;
 }

That way you can use class="my-navigation" in stead of using class="navbar".

Of course, in order to be able to do that you have to work with the SASS files of Bootstrap - not the compiled CSS. Here are some pointers - Bootstrap Sass Installation and Customization.

Another important thing to point out is that including/extending all Bootstrap classes simply because you would love to use BEM might not be the best approach. There is this sweet spot that you have to find out for yourself and the project that you are working on. Here are some links where this is discussed:

Why You Should Avoid Sass @extend
Does sass harm performance?
A Tale of Front-end Sanity: Beware the Sass @import

Using Bootstrap with itscss

1 Answers1