Is it practicable to use BEM if I have to use Bootstrap?

[naresh274]

Recently I came across BEM methodology. And I really like it. However I haven's studied it in depth.

Before I take a plunge into BEM (put my time and attention into really learning it to effectively apply it into my projects) ; I would appreciate if somebody who is more experienced with BEM could clear nagging doubt that I am having right now.

Is it practicable to use BEM if I have to use Bootstrap for my projects? Do BEM and Bootstrap 'mix' well? Are there any pitfalls in using BEM with Bootstrap?

[sumnermic]

The way I work with Bootstrap 4 is using its SCSS files. And all I'll do is work with the SCSS variables found in Bootstrap like $font-size rather than me doing the font size. So that way I can tinker with bootstrap rather than say downloading a custom Bootstrap file. Of course, don't edit the main files of bootstrap (just in case it updates). Just work with the variables.

I use BEM to add my own components. There is no interference with BEM and a framework.

I guess you mean the specificity of Bootstrap 4 vs BEM? I do get a couple issues... But as I said you don't have to follow 1 CSS methodology religiously. You can use different ones and it's okay to use 2 classes e.g. .site-header .site-branding. The issue is if you are disorganised and go wild with specificity.

Maybe this article will help for you?

Kind regards,

Mic Sumner

[maciejsaw]

Keeping perfect bem might be tricky with bootstrap, because of css selectors specificity.
You can treat the bootstrap styles as basic styles and add additional overrides with BEM methodology in mind. But you need to make sure, that bem styles will take precendence over the basic bootrap components styles. The safest way is to have exactly the same selectors as bootstrap has, but append the bem class name to it.
For example in promo-table.scss file you write

input[type="text"].promo-table__input-field {
   font-size: 16px;
}

This way your component has specific style that overrides the global component style, and because the selector is not nested, but "combined" this keep all the benefits of bem.

The other approach would be to recreate all the basic boostrap styles for bem flat selectors approach, I wonder if someone did this already?

[martinfletcher]

A good approach is to just create a BEM structure for your markup, and extend the relevant bootstrap classes into your SCSS. You can then have a set of variables that are for your BEM structure, and override the bootstrap variables at your choice.

I have a blog post/tutorial in progress atm that does exactly this - It should be landing within the next 2 weeks if i get the time to finish it. I will post the link on here once up.

Using this approach will keep your html semantic, and your automation tests less fragile as you do not have the VERY verbose bootstrap html in your components.

[lougreenwood]

@martinfletcher I assume this uses Sass @extend?

[z2lai]

@martinfletcher I assume this uses Sass @extend?

Yes. Looks like someone had already written a tutorial back in 2014: BEM, SASS and Bootstrap.

[GabrielSantosLemos]

In this 2014 tutorial, Anderson Orui explains a good practice for writing css in the BEM methodology, using scss and bootstrap,
with the idea of ​​cleaning up the html and making it more readable by removing all classes from the bootstrap and inserting it directly into the CSS using the @extend and @include functions.

I recently read his tutorial, but I have a question that I didn't find the solution, the problem when I write my own classes extending the bootstrap classes, "bootstrap java script functions don't work anymore".
I am now starting to delve into SASS BEM.

I really appreciate anyone who can help me!
@z2lai @martinfletcher

Sorry for my English because I'm not very fluent "google translate kkk".

[martinfletcher]

When using this approach, you need to initialise the bootstrap js components yourself, as by convention, the bootstrap javascript looks for the bootstrap classes.

[GabrielSantosLemos]

Got it, so I have to initialize the js bootstrap components.
Guys, do you have any tips?
I've tried searching for best practices on how to do this, but I can't find anything that refers to it.

Would it be correct to change the bootstrap js modules?

because in scss it's not

I believe that the use of webpack would also be recommended, I believe that with it the modules will be compiled into a single .js file, but I don't know how to do this.

I would like guidance on the correct path I should follow.

Thank you for your help
@martinfletcher @z2lai

[martinfletcher]

@GabrielSantosLemos - Are you using bootstrap via jQuery or the ESM modules?

Take a look at the docs for info: https://getbootstrap.com/docs/5.0/getting-started/javascript/