How do you use BEM?

Question

Layout

I have accumulated quite a lot of questions about BEM and would like to clarify everything. It's not about the full stack, but only about naming.

Firstly, I just now thought, why do we need elements at all if they cannot be used separately from the block? The advantage of such a naming is that the classes are independent, but is this independence really necessary if, according to the rules, an element cannot be used separately from some class, but just the same, it can be pushed into any place.

Secondly, I wonder how much do you think small sites (landing page level) need to use this methodology? I looked through all the tutorials on YouTube in search of practical layout of small projects in "pure" BEM and there is emptiness! In addition, watching how a layout designer churns out a landing in 5 minutes in a cascade makes you want to forget about BEM forever, because development with it takes much longer.

And thirdly, it’s interesting how you name classes in general on some kind of landing page, where there are hundreds of blocks and they are all different. It should take at least an hour to come up with names. After all, layout designers are creative people and require that the design be varied. Well, for example, even here . There are already thousands of elements in the header.

Answer 1

1. Because more often they use all the same components (blocks), and not elements, But there are already elements in the block. That is, you make the button a block - then it can be used anywhere, it is universal. If you make a button in the footer with an animation and a photo of Pamela Anderson, then it is the only one and can be a footer element, because will not apply anywhere else. And what it will be invested in (maybe the footer itself) is a block.
2. They are only needed if it is more convenient for you / the team to work. In general, any structure always makes the code more readable and simpler. BEM it or other arrangements - it is not important.
3. Yes, everything is taken from the head. If you don’t have enough knowledge, you climb into the translator and take the shortest and most understandable of the options.

Answer 2

I'm like this. And everyone wants to use it. According to the separators, only options are the sea. There are also many in terms of structure. The main thing is to understand the meaning itself:
1) Module components retain their appearance when manipulating the markup within it.
2) Element positioning and placement styles are separated from appearance styles, which are better to be transferred to a separate folder and inherited by a "silent" class (%) in the presence of a preprocessor.
3) Appearance styles can be inherited by any component of any module.
4) Elements that differ in appearance by a small number of parameters must be inherited by the same class of rules, but with different modifiers. For this, they are needed.

Answer 3

First, elements are needed when block styles alone are not enough. If you have a desire to reuse a block element in another place, then this element should be placed in a separate block. Ideally, element styles only make sense in the context of a block.
Secondly, BEM provides benefits in the long run. If you hand over a landing page and forget it forever, you can do some coding, but usually projects (even landing pages) have to be supported for some time. With BEM, you don’t have to deal with a forgotten project every time and worry that new changes could break something somewhere.
As for the speed of development - use preprocessors and templating engines, the speed will only increase. I'm successfully using csssr-project-template, where the BEM + stylus + jade combination seems to me ideal for layout.
Thirdly, as already mentioned, use a translator if you can’t come up with a name. As for repeating sections - yes, numbering if there is nothing else to catch on, this is a feature of landing page layout. Actually, even without BEM, you will have to number if each section has its own characteristics.

Answer 4

https://www.youtube.com/watch?v=vXW7w3ym8hg

Answer 5

To understand whether it makes sense to use BEM, you need to remember that this technology stack was created for large projects with a bunch of pages and a bunch of developers. It solves two main problems:
1) More or less explicit block isolation. This is necessary first of all so that newbies do not break anything in an existing project when writing new functionality;
2) Introduces a unified class naming scheme.
At the same time, BEM has its disadvantages:
1) CSS code grows a lot, it becomes redundant due to block isolation;
2) It is difficult for programmers to work with long class names, it worsens the readability of the code and increases the volume of the page.
If the team is small, then you can use a few key principles instead of the entire BEM stack:
1) The page is divided into blocks. Styles for block elements are written with an indication of the block class;
2) Common styles are moved to template selectors with %.
If experience allows, then this can be combined with a classic cascade.

Answer 6

The strength of BEM is that you can write a style library once and drag it from project to project, making individual edits. And this is from the kitchen of Yandex, when several dozen people work on a project and it is necessary to follow the same rules for writing code. Designing a landing page in this way is a waste of time.