There are 2 modal windows

<div class="modal_show_prises"> <p class="modal_show_prises__text"></p> </div> <div class="modal_show_certificate"> <p class="modal_show_ertificate__text"></p> </div>

both units are ideal in style

I always thought that reusing blocks in BEM, I wrote the code for one element and then use it for other elements, but in my example it turns out that we need to style the styles for both blocks

There is a way out - to assign a more general class, for example modal, but whereas in the structure, it is determined that one window is responsible for showing prizes, the second is for showing certificates

 <div class="modal"> <p class="modal__text"></p> </div> <div class="modal"> <p class="modal__text"></p> </div>

    2 answers 2

    In this case, you can use the inheritance and simultaneous use of several classes. That is, by specifying the answer by your example, you can do this:

     <div class="modal show_prises"> ... </div> <div class="modal show_certificate"> ... </div>

    Next, you set the CSS style for the modal class, so all modal will inherit this style, but you can also "expand" the description by adding styles for show_prises , show_certificate .

    PS If it is necessary to distinguish blocks from each other, then as an option each can be given an id by which it is already possible to determine the field.

    PPS Also with information on classes and the use of several classes can be found here .

    • Work on karma with a lack of knowledge, the norm for the community. - user192664

    To use BEM, you need to register more than 1st class. Specifically in your case

     <div class="modal modal_show modal_show_prises"> <p class="modal_show_prises__text"></p> </div> <div class="modal modal_show modal_show_certificate"> <p class="modal_show_ertificate__text"></p> </div>

    On modal you can hang general styles and display: none; on modal_show - display: block; , and the difference on modal_show_prises and modal_show_certificate respectively.