What technologies to implement component layout (like BEM)?

Question

css

Once again, swearing, redoing the layout of the page, I am more and more convinced of the convenience of the approach offered by the guys from Yandex (BEM): creating independent, reusable components.
Soon, at work, I will have to make up a lot of landing pages, so the following question arose: how best to organize the working environment and what technologies to choose. And if everything is quite simple with styles (create a css / less file for each block / element / modifier, and then collect them into one style file), then there are difficulties with the markup of the elements itself.
What you want:
Independence from a template language. It is easy to do such a thing in any template language within one framework: the same JSF initially involves the creation of components, Jinja2 has macros, etc. However, it is not always necessary to use a framework, sometimes you just need to lay out a static page. Ideally, you want to compile the block code for popular template engines from a certain structure.
Good development environment support . Not all editors can work well with some template engines, so I want to choose something popular.
Not too much complexity of the tools . Some solutions are quite difficult to learn and use, especially for layout designers who are not familiar with programming languages. I want something simple.
Flexibility. Some blocks (for example, menus) may contain different elements: in one project, these are just 5 link buttons, in another, they will be complex elements, etc. I would like to be able to describe the block abstractly, while using template tags in the final page (if you plan to use a template engine)
What options I considered myself:
bem-tools. Alas, this is a rather complicated tool. It will be quite difficult for a layout designer to understand all the nuances of using this thing. In addition, the documentation for them now lags behind the current version (I tried to do as described on the site, but in response I get warnings about the deprecated API, and there is no documentation for API v2 yet). Yes, and the tools themselves are sometimes quite raw, some parts are in the development status. Plus, not all layout designers will find it convenient to type in an unusual "JSON-style".
gulp-file-include is a pretty handy thing: you describe pieces of markup in html, then you just insert them in the right places. Cons - lack of support in the IDE, you have to put down all classes for modifiers manually.
jade+jade ​​mixins. There is a nice mixin for jade that makes it easy to describe blocks, elements inside them, and modifiers. However, there are difficulties when you want to make a certain block flexible, which arise due to jade's limitations in terms of multiblocks within mixins. There are crutches, but they are uncomfortable. And the syntax itself is unusual. Plus, this option is difficult to use with other template engines (in django, for example).
XSLT . In Yandex, it is used in BEM itself, however, it is a little cumbersome, and most likely you will need to write your own bike to build the project, since bem-tools is no longer available.
ReactJS/JSX . Minus - the description of the components in JS (albeit with extended syntax). Makers will be uncomfortable.
So what are your suggestions?

Answer 1

Well, or the notorious Polymer from Google.
I would personally look in the direction of jade mixins, but this is already a matter of taste or the specifics of the project.
It is difficult to say how things are going with integration into the IDE, since I use Sublime Text 3 and the AutoFileName plugin for similar purposes.
At your leisure, you can read about atomic design .