How to properly use modifiers in BEM methodology?

Question

css

Get used to getting to the right element with a variety of CSS tools without using the BEM methodology. But how do you get to an element using this methodology when you need, for example, the first or last element, or even or odd elements, or specific elements? Well, if necessary, select the first and last element, then of course you can hang the modifier as an additional class, but I don’t know if this is right. And what about in other cases?

Answer 1

It depends on the situation, if possible, it is better to use a modifier.
BEM solves the problem of specificity well, making behavior more predictable.
For example, we have some block (or element, it doesn’t matter) .box__item and we want to add an indent to the left first, like this:

.box__item:first-child {
    margin-left: 10px;
 }

Everything is fun and cool until we need to redefine the styles... For example, on the screen above 720px we need to set all box_item to the same padding:

@media (min-width: 720px) {
.box__item {
    margin-left: 20px;
 }
}

And then the problems started, the specificity of the first .box__item is increased and a simple class will not override it, the first block will remain with 10 pixels, now you need to either increase the specificity of all .box__item , or chain :first-child to each .box__item override

.box__item,
.box__item:first-child {
    margin-left: 20px;
 }

Not so beautiful anymore? Of course, for those who are used to nested selectors, this seems like a common thing, but it means they have not yet tasted the full buzz of BEM when you redefine what you want and where you want without expecting a catch.
A simple modifier can easily solve this problem, and the next .box__item override without any pitfalls will set exactly the styles we wanted, you don’t even have to think about the fact that something will go wrong

Answer 2

It is quite normal to use :first-child, etc. for an element. If we are talking about a block, then it should no longer know about its location.