BEM in Wordpress/Boostrap

Question

I am having some dificulties to understand, how to use the BEM-methodology for Wordpress and Bootstrap.

I dont see how I can apply the file/folder structure BEM DOCUMENTATION to my stylesheet.css. The documentation tells, you need to create several stylesheet like navigation.css , footer.css, button.css etc. and import the styles with @import.

So you need to call @import, but if I do

@import url("../common.blocks/base.css"); 

localhost/wp-content/themes/common.blocks/base.css Failed to load resource: the server responded with a status of 404 (Not Found)

or

@import url("/common.blocks/base.css");

localhost/common.blocks/base/navigation.css Failed to load resource: the server responded with a status of 404 (Not Found)

Another Problem for me is to understand the build-process. Is that even possible with Wordpress and Bootstap?

If you know some tutorial/manual etc pls share with me.

Answer 1

I would highly recommend some level of build process, that will clean up the 404 issues you are having.

The build process will depend on what you are comfortable with, for a robust solution, consider something like webpack or gulp. You could also just use Codekit if you need something up and running.

Either way, generally you want everything packed down in to one file - then in Wordpress just fetch the overall (combined styled sheet)