Search code examples
bem

How do I name these classes under the BEM methodology?

Image below is the output of my code
output

Are these names correct under BEM methodology? 

<div class="container">
    <div class="container__button-row--1">
        <div class="button-row__button--first"></div>
        <div class="button-row__button"></div>
        <div class="button-row__button"></div>
        ...
        <div class="button-row__button--last"></div>
    </div>
    <div class="container__button-row--2">
        ...
    </div>
</div>
Solution

  • Given the sample code in your question I'd suggest the following. But I would also point out that container is a bad name for a component/Block since it really general and does not indicate the purpose of the Block.

    For modifiers you should use both the element and the modifier in the class attribute e.g. block__element block__element--modifier

    <div class="container">
    <div class="container__button-row container__button-row--1">
        <div class="container__button container__button--first"></div>
        <div class="container__button"></div>
        <div class="container__button"></div>
        ...
        <div class="container__button container__button--last"></div>
    </div>
    <div class="container__button-row container__button-row--2">
        ...
    </div>
</div>