How to implement BEM blocks for jade (pug), stylus?

Question

HTML

Hello
I'm using jade, stylus and using the gulp build system.
I would like to be able to use previously re-created blocks.
For example, with such a structure

We use in jade
include blocks/top-menu
When building, the rest of the block is automatically collected in stylus is added to the main style file, js is added to the main script file.
Are there similar plugins and/or technologies? Or something similar?

Answer 1

Perhaps I would advise the following:
1) Have helpers in jade, a variable with the name of a block of type b, a modifier of type mod(b, 'name', 'val'), a variable content (I have an object with toString()) with the contents of the block , etc.
2) Do not use include at all, so that you can build a tree, calculate dependencies in realtime, and even collect assets for the page. For example, through some helpers, again. With a large division into blocks, everything will hang, of course, but you need to learn how to cache them smartly.
3) At the input, try to submit a bemjson-like structure with modifications for yourself. In our project now, this is the data field, which contains any data needed for the block. Pulling up the inner blocks (and their subsequent rendering) we do either in the templates themselves, or from the content object, if the content consists of an array of blocks and lines.
4) If you need to drag the block into an element somewhere, teach the block/element helpers from (2) to mix data when calling the helper directly.
5) If everything is fine - at the end, all the collected assets can be in the header (css) and in the footer (js) of the page, having previously run through uglifyjs, csso, but only in production, where they are cached on nginx.
We have it all in php with smart (so the stars have developed), but it is quite suitable for js runtime with jade. Works great.
But in general, if you are using js, then it is more convenient to use fresh bemhtml with js syntax. The doc has not been updated on bem.info yet, but the basic blocks in the library itself describe the syntax quite well. There will be a bonus - the templates are self-sufficient, and on the face they will not require additional loading. libraries can be run as is. You can also embed their assembly in the gulp.

Answer 2

Here ( https://ru.bem.info/forum/-155/) a friend shows and talks about such a ( https://github.com/kizu/bemto/) thing. Although the question with a beard is sure you will find it useful if the question is relevant

Answer 3

I haven't read it, but I'll add it too.
Make blocks as in csssr - template https://github.com/CSSSR/csssr-project-template/tr
...

Answer 4

I ran into the same issue with Jade (now Pug). I had to write my own library. Recently posted on Github, connect to the development. https://github.com/bigslycat/pbem