BEM and asp.net mvc

Question

Can someone faced with integration of asp.net mvc and bem (http://bem.info/)? Can introduce examples or links to tutorials?

Answer 1

I cannot provide you with code examples, since I do not use asp.NET. But in case my theoretical answer can help, here it is:

First of all, you can use CSS & file system parts of BEM. I mean that you can separate CSS code for your block components and store them in their individual files.

blocks/
    button.css
    footer.css
    header.css
    login.css

Then, you can gather this files into CSS files for pages with @import. To flatten the files, use borschik (https://github.com/bem/borschik). BTW, you might be interested in recently released borschik sever https://github.com/bem/borschik-server , a dev tool.

Then, if you are ready to go further, you can also provide JavaScript files for your individual components and store such files together with CSS files of the components.

blocks/
    button/
        button.css
        button.js
    footer/
        footer.css
    header/
        header.css
    login/
        login.css
        login.js

Similar to CSS, you can use these pieces of JavaScript for your per-page JavaScript bundles. Of course, there is no keyword in JavaScript similar to the @import. But here again the borschik can help. If you have page.js file with the content like following:

borschik:include:blocks/login/login.js
borschik:include:blocks/button/button.js

Run borschik over this file and you will get your _page.js file with the content inlined. For further information I recommend an article about Borschik on bem.info http://bem.info/articles/borschik/

If you are bored with linking every block to a CSS file of the page and then again to a JS file of the page, there is a way to unify that. You can use bem tools https://github.com/bem/bem-tools. With them it is possible to create what we call a page declaration in JSON. Then, according to the declaration bem tools will bundle up both CSS and JavaScript files for your pages. And actually other techs, if you need them. The comment already gets quite long. So, I won't describe using bem tools here. But if the documentation is not enough, please ask.

The last point is a templating system. I guess asp NET has one, doesn't it? If it is razor, it must be very similar to TT2 (perl). I met such projects and can describe what they did.

They use 2 'layers' of templating. The first one is native embedded templating system. But its output is not HTML as usual but BEMJSON page description. When, due to having node.js bindings, it is possible to run server-side JavaScript over this JSON. In server-side JavaScript they use BEMHTML templates. You can get a taste of it with the 'Quick start` article http://bem.info/articles/start-with-project-stub/ or with this tutorial http://bem.info/articles/bemhtml-intro/