How to implement BEM correctly?

Question

Layout

In an attempt to come to uniform agreements on projects, I tried to use BEM, so far I settled on the basic principles and naming. Questions that arise in the process:

1. How to correctly / adequately combine naming with Bootstrap?
We use something like block__element_mod col-md-6, but it looks somehow not comme il faut. Should I use the "EMMlened" version of bootstrap or is there any convention for such a case?
2. When using em, I came to the conclusion that for a truly independent use of blocks, you need to define font-size in px at the block level each time and inherit from it. Is this approach normal, mb there are more adequate options?
3. When laying out "mega-designer" landings, I often come across the fact that essentially identical blocks use different fonts in different places. Redefine fonts as modifier resp. element?
And the following moment - respectively, all modifiers (from different blocks) in the future are added to the same section of block styles?
4. When working with existing projects, especially on CMS, ready-made classes are used, in some cases, the classes come from the core (for example, the menu in WP, and many things in it). Those. for good, in order to comply with one style, in this case, you will have to write additional. the code. forming a template with the classes I need? Or the very case when "it works, don't touch it"?)
5. I use the classic naming option as a basis, but occasionally I meet two-dashes-style.
Is the classic still popular?

Answer 1

I will try to answer you point by point, since I myself once asked the same questions.
1. If we talk about convenience, readability is lame, but this does not go directly against the methodology. If there is a "beamed" Bootstrap and it is not inferior in any way - use it. This is a truly thoughtful and modern component library that complies with accessibility standards. I don't know of any specific agreements.
For myself, I decided to abandon Bootstrap so that the eye does not twitch nervously when looking at "vinaigrette" from different names. I compensate for this by developing a library of my own components, guided by the same Bootstrap and best practices.
2. Regarding the use of em: I recommend that you read this article.
It's time to say goodbye to the px unit of measurement
For blocks, you do not need to separately assign font-size in px. Try to use rem correctly, taking as a constant that it should be 16px by default. If necessary, I will answer in more detail.
Personally, I use em in media expressions and when absolutely necessary in blocks.
3. In the case of pure BEM - create a block with one font and another and use it as a mix.
4. To be honest, you can try to use ready-made CMS solutions, but I would not recommend it. When I worked with WP, I was customizing classes and template output all the time. On Bitrix, this is easier, you can even assign your own class to the WISYWIG editor.
The question is whether you can afford such customization or not. If it requires extra resources - it's not worth it.
5. I use an alternative naming convention that works best in English speaking countries .block__element--modifier. In my opinion it is more readable.
In general, to expand your BEM horizons, I recommend reading these articles
More Transparent UI Code with Namespaces
Battling BEM CSS: 10 Common Problems And How To Av...
In my work at the moment I use an extended BEM, the so-called BEMIT (BEM + ITCSS ). For ordinary sites - this is more than enough, in the case of a modern reactive frontend, it requires discussion with the team and a deeper understanding of the design of the NSA (absolutely independent block).
I hope that I was able to help you, because I myself spent a long time on solving these issues.

Answer 2

1. Leave it as it is
2. The block should not be influenced by the "external environment"
3. Beat the designers in the head so they don't do that. Yes, make modifiers for fonts.
4. Do not touch
5. - among the bourgeoisie, _ in the CIS. In general, use what you are comfortable with.