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

https://img2.mukewang.com/5c9b206400010d4904740455.jpg

如上图,需要做成这样,我用的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>


慕码人8056858
浏览 494回答 2
2回答

慕少森

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

宝慕林4294392

决定了用如下的,bem推荐的方式,创建新的块来解决现在就是两个block了,ranks为一种块 rank为一种块错误&nbsp; &nbsp; <section class="comments">&nbsp; &nbsp; &nbsp; &nbsp; <h2 class="comments__title"></h2>&nbsp; &nbsp; &nbsp; &nbsp; <article class="comments__comment">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3 class="comments__comment-title"></h3>&nbsp; &nbsp; &nbsp; &nbsp; </article>&nbsp; &nbsp; &nbsp; &nbsp; <article class="comments__comment">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3 class="comments__comment-title"></h3>&nbsp; &nbsp; &nbsp; &nbsp; </article>&nbsp; &nbsp; </section>正确 comments块和comment块&nbsp; &nbsp; <section class="comments">&nbsp; &nbsp; &nbsp; &nbsp; <h2 class="comments__title"></h2>&nbsp; &nbsp; &nbsp; &nbsp; <article class="comment">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3 class="comment-title"></h3>&nbsp; &nbsp; &nbsp; &nbsp; </article>&nbsp; &nbsp; &nbsp; &nbsp; <article class="comment">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3 class="comment-title"></h3>&nbsp; &nbsp; &nbsp; &nbsp; </article>&nbsp; &nbsp; </section>
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript