Is it correct to use the modifier like this?

Question

css

I'm using BEM (trying) to name classes, by Gallocher:
.block
.block__elem
.block__elem--modif
I don't quite understand how to use blocks on different pages using a modifier.
For example, I have a .form pop-up form
I need to use a modified version of it on another page.
I can just give it a class "form form--on-page"
And style it like this
Or is this the wrong way?

Answer 1

Yes, it's quite a viable option.

Answer 2

Yes that's right. The only thing I would recommend is to think about the format of class names. Using double dashes and double underscores doesn't seem like the best idea to me. It looks very cumbersome, especially when one element has several similar classes.

.block__elem {}
.block__elem--modif {}

In addition, there is often a problem with the same names (there are not enough additional namespaces / prefixes). Therefore, I recommend to think and adjust the bam for yourself. Remember the problems you are working on now and will be working on in the future, and solve them in the simplest, most readable and convenient way for you (and your team). Here, for example, is how I name bam classes . I've been using this approach for several years now. Development has become very enjoyable.