specificationsbem

Compliance with BEM specifications


Does this code violate the BEM specification or is it a "mix?

<button class="corp-info__button-read-more button">Read More</button>

It's the class button that interests me.


Solution

  • In principle it's not a problem. However:

    You might want to place the button class (it seems to define the more general styles) first and corp-info__button-read-more second (seem to represent the more specific styles).

    Always order bem classes from general to specific in your class attribute.

    Also maybe you want (although it's advice you didn't ask for) to distinguish between corp-info__button and a respective modifier corp-info__button--read-more.

    In orthodox BEM a single dash has no semantic meaning, therefore --read-more is simply a modifier name.