关于BEM命名的一个问题,求助

clipboard.png

如上图,需要做成这样,我用的BEM,但是每一个排行项的命名我比较纠结,每个项目是作为rank还是作为rank__item比较合理呢?


1————————————————————————

<div class="rank">
    <div class="rank__cell rank__num"></div>
    <div class="rank__cell rank__profile"></div>
    <div class="rank__cell rank__name"></div>
    <div class="rank__cell rank__amount"></div>
</div>
<div class="rank">
    <div class="rank__cell rank__num"></div>
    <div class="rank__cell rank__profile"></div>
    <div class="rank__cell rank__name"></div>
    <div class="rank__cell rank__amount"></div>
</div>

2————————————————————————

<div class="rank">
    <div class="rank__item">
        <div class="rank__cell rank__num"></div>
        <div class="rank__cell rank__profile"></div>
        <div class="rank__cell rank__name"></div>
        <div class="rank__cell rank__amount"></div>
    </div>
    <div class="rank__item">
        <div class="rank__cell rank__num"></div>
        <div class="rank__cell rank__profile"></div>
        <div class="rank__cell rank__name"></div>
        <div class="rank__cell rank__amount"></div>
    </div>
</div>
阅读 2.3k
2 个回答

rank__item你这应该是一个排名的,每一项是一个排名项

决定了用如下的,bem推荐的方式,创建新的块来解决
现在就是两个block了,ranks为一种块 rank为一种块

错误
    <section class="comments">
        <h2 class="comments__title"></h2>

        <article class="comments__comment">
            <h3 class="comments__comment-title"></h3>
        </article>

        <article class="comments__comment">
            <h3 class="comments__comment-title"></h3>
        </article>

    </section>

正确 comments块和comment块
    <section class="comments">
        <h2 class="comments__title"></h2>

        <article class="comment">
            <h3 class="comment-title"></h3>
        </article>

        <article class="comment">
            <h3 class="comment-title"></h3>
        </article>

    </section>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题