1. Introduction of BEM

BEM — Front-end naming methodology

BEM is a front-end naming methodology developed by the Yandex team. BEM is a very useful, powerful and simple naming convention that makes your front-end code easier to read and understand, easier to collaborate with, easier to control, more robust and unambiguous and more rigorous.

BEM naming convention pattern

.block{}
.block__element{}
.block--modifier{}Copy the code

Among them

Block: represents an abstract block, or a separate component. Block__element: Element is a child of. Block, indicating that the element belongs to a. Block, used to form a complete. Block overall, __ refers to the modifier: Indicates the status of a node

2. Wechat personal page practice

In order to better understand the naming method of BEM, I copied the personal page of wechat, in which the icon comes from Iconfont vector icon library, and the icon is named directly using its original name

At the beginning of my design OF HTML, AT this time I have some knowledge of BEM, but there are still some problems with the use, at this time, I will see the whole page as a module divided into three parts: page__hd, page__bd, page__ft

<div class="page me">
    <div class="page__hd">
        <div class="page__hd__title"<div > <div class="page__hd__functionIcon">
            ***
        </div>
    </div>
    <div class="page__bd">
        <div class="bd__userInfo">
            <div class="userInfo__img">
                ***
            </div>
            <div class="userInfo__content right">
                <div class="userInfo__content__detail">
                    ***
                </div>
                <div class="userInfo__content__QR">
                    ***
                </div>
            </div>
        </div>
        <div class="page__bd__list">
            <ul>
                <li class="item item--top">
                    ***
                </li>
                <li class="item">
                    ***
                </li>
                ***
                <li class="item item--bottom">
                    ***
                </li>
            </ul>
        </div>
    </div>
    <div class="page__ft">
        <div class="section__first">
            ***
        </div>
        <div class="section__second">
            ***
        </div>
        <div class="section__third">
            ***
        </div>
        <div class="section__fourth">
            ***
        </div>
    </div>
</div>Copy the code

However, when there are too many parts in a module, such as the element inside page__bd, I feel that MY naming is a bit confusing, and I have to translate baidu to name it. Moreover, WHEN I write the CSS after naming it, I find that I still don’t know its position, and after writing the CSS, I find that there are still some class names that haven’t been used, such as.right

I modified my HTML name, feel the structure is more clear and observed wechat page, the head and bottom are unchanged, each page is the same, and page__bd__list in page__bd is also available in wechat discovery page, so the name is easier to reuse.

<! --> <div class="page me">
    <div class="page__hd">
        <div class="page__title"<div > <div class="page__hd__icon--right">
            <i class="iconfont icon-weixinsousuoicon"></i>
            <i class="iconfont icon-yiqiatongweixinduanICON_jiahao"></i>
        </div>
    </div>
    <div class="page__bd">
        <div class="page__bd__header">
            <img src="./static/images/user.jpg" alt="" class="bd__header__img">
            <div class="bd__header__info">
                <div class="info__content--left">
                    <p class="username">EIVE</p>
                    <p class="wxnumber">w1074418022</p>
                </div>
                <div class="info__content--right">
                    <i class="iconfont icon-erweima"></i>
                </div>
            </div>
        </div>
        <div class="page__bd__list">
            <ul>
                <li class="list__item list__item--top">
                    <i class="iconfont icon-qianbao"></ I >< a> wallet </a> </li> <li class="list__item">
                    <i class="iconfont icon-0021"</a> </li> <li class="list__item">
                    <i class="iconfont icon-xiangce-copy"></ I >< a> </a> <li >< li class="list__item">
                    <i class="iconfont icon-qiabao"></ I >< a> card package </a> </li> <li class="list__item">
                    <i class="iconfont icon-xiaolian"></ I >< a> </a> </li> <li class="list__item list__item--bottom">
                    <i class="iconfont icon-shezhi"> < / I > < b > Settings < / a > < / li > < / ul > < / div > < / div > < div class ="page__ft">
        <div class="ft__item">
            <i class="iconfont icon-qipao"></ I >< p> wechat </p> </div> <div class="ft__item">
            <i class="iconfont icon-tongxunlu"></ I >< p> Contacts </p> </div> <div class="ft__item">
            <i class="iconfont icon-find"></ p> <p> </div> <div class="ft__item ft__item--focus">
            <i class="iconfont icon-wo1"</p> </div> </div>Copy the code

3. Summarize my feelings about using BEM

  • First: make your code easier to read and understand, you can clearly point out which block a node belongs to, the hierarchy is more obvious, but also try to avoid using the content of the node to define the node, so as to better reuse a module
  • Second: the degraded relationship of BEM does not need to be used urgently, for examplepage__hdWithin the.titleBecause there is only one pagetitle, so usepage__titleYou don’t need to use itpage__hd__title
  • Third: BEM is used to make our code clearer and more maintainable, if it makes your code harder to maintain, harder to understand, and less confusing

Github project address: github.com/EIVE/wx_hom… Segmentfault articles address: segmentfault.com/a/119000001…

The above is my experience of learning BEM, and I hope you can gain something. There may be some inappropriate places, and I hope you can give me some suggestions