Search code examples
bem

BEM. Block with modifier elements naming


I have a client entity. There are two types of clients: doctor and pharmacy. Both have "name", "address", "phone", "email" fields. But doctor has "medical specialty" and "hospital" fields in addition. Doctor and pharmacy are almost the same in style (except height and special fields of doctor).

I have the "client" block (using the original BEM notation).

.client {
    &_type_doctor {
        height: 280px;
    }
    &_type_pharmacy {
        height: 210px;
    }
    &__name {
        ...
    }
    &__address {
        ...
    }
    ...
}

And my question is how should I name special doctor fields?

.client__medical-specialty {...}
.client__hospital {...}

Or

.client_type_doctor__medical-specialty {...}
.client_type_doctor__hospital {...}

Or there should be the "doctor" block in addition and I should mix client with doctor when client is doctor?

.client {
    &__name {...}
    &__address {...}
    ...
}

.doctor {
    height: 280px;

    &__medical-specialty {...}
    &__hospital {...}
}

Solution

  • Elements always have a prefix of the block's name itself (not block with modifier). So

    .client__medical-specialty {...}
    .client__hospital {...}
    

    is the best way to go.