Using Bootstrap with it

Question

Seeing the BEM naming convention.

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 can I name a named boot navigation 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 do it?

Answer 1

Yes, you can do this using @extend and @include , as shown in this article - " BEM, SASS and Bootstrap: how to mix everything smartly? "

, CSS Bootstrap . , (.my-navigation) CSS.navbar:

.my-navigation {
    @extend .navbar;
 }

class= "my-navigation" class= "navbar".

, , SASS Bootstrap, CSS. - Bootstrap Sass.

, , , / Bootstrap , BEM, , . , , . , :

Sass @extend
? : Sass @import