In my practice I use БЭМ + pug and sass .
БЭМ allows you to conveniently break elements into blocks. Each block is a directory that contains pug and sass files. This allows on the one hand to use blocks in different projects, I just copy the directory I need, insert it into the project and everything works.
It looks like this:
It is also very convenient because when I inspect the layout, I can very quickly by the class name understand where to look for the necessary style code.
Suppose I want to correct the styles in the block-text__title
And I instantly find the code I need.
But, quite often there is a situation when literally 2-3 elements form a block, while this block does not make sense outside the parent.
For example, like this:
request will always be inside the pop-up and at the same time the child elements of the request , I will not call pop-up__icon and pop-up__content , because I may have __icon and __content directly related to pop-up .
At the same time, it is not worthwhile to invent any other naming of these blocks, except for __icon and __content , a confusion may arise. I just know that all icons have __icon and that's it.
You can make a request separate block, but does it make sense? 2 elements, for the sake of them to create a separate reusable block, despite the fact that I know for sure that this block will be only within the framework of pop-up . Also in my opinion does not make sense.
You can also simply write request styles in the same file as pop-up styles.
.pop-up &__content display: block // Какие-то стили .request &__content display: table // Какие-то стили But this causes confusion, when I want to correct the request styles, and I don’t find such a separate file, I have to look at what block the request , look at the parent structure, making sure that the given parent is the desired block, search inside its styles. In a word, confusion and waste of time.
You can use a different approach.
Do not create a separate reusable block in which there will be both a pug file and a sass file. And to create a block in which there will be only a sass file. So I quickly find the styles I need.
But this method has a disadvantage:
Suppose I want to use pop-up from the past project in a new project. Naturally, I do not keep in mind that request separately. I will copy the directory containing the pop-up files and find that the request styles have not connected. And it is good if there is only one block separately ( request ), and if there are 50 of them? There is a tedious job of viewing block styles and finding the right blocks that are not connected.
Advise how best to structure the work and how to use БЭМ at the same time? Thank!
