为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

慕码人8056858 2019-03-13 15:14:22
如上图,需要做成这样,我用的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 回答

?
慕少森

TA贡献2019条经验 获得超9个赞

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


查看完整回答
反对 回复 2019-03-27
?
宝慕林4294392

TA贡献2021条经验 获得超8个赞

决定了用如下的,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>


查看完整回答
反对 回复 2019-03-27
  • 2 回答
  • 0 关注
  • 493 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信