BEM实战之QQtabbar个人页面

BEM命名规范

BEM是三个单词的缩写：Block（块）代表更高级别的抽象或组件，Element（元素） Block的后代，以及Modifier（修饰） 不同状态的修饰符。
通过BEM的命名规范我们可以达到一个什么目的呢？就是有一个清晰的描述，从上面的代码中我们可以看到一层一层的清晰明了，而且有一个清晰的结构。

block 代表一个更高级别的抽象或者是一个组件，它仅仅作为一个边界

block__element{}是block的后代，用于形成一个完整的block的整体

block__element{}--modifier{}:block的不同状态

稍微了解BEM之后,我们应该去考虑如何运行BEM?

创建块

创建元素

创建修饰符

从整体来看 该导航栏为一个大块包含着四个小块
大块appbar
小块item
图标icon
下标内容desc
小红点pointer

<div class="qqui-appBar">
        <a href="#" class="qqui-appBar__item qqui-appBar__item_on">
            <span>
                <i class="iconfont icon-icon-test1 icon_on"></i>
                <span class="qqui__pointer qqui__pointer_on">1</span>
            </span>
            <p class="qqui__desc qqui__desc_on">消息</p>
        </a>
        <a href="#" class="qqui-appBar__item">
            <span>
                <i class="iconfont icon-icon-test2"></i>
                <span class="qqui__pointer"></span>
            </span>
            <p class="qqui__desc">联系人</p>
        </a>
        <a href="#" class="qqui-appBar__item">
            <span>
                <i class="iconfont icon-icon-test"></i>
                <span class="qqui__pointer"></span>
            </span>
            
            <p class="qqui__desc">看点</p>
        </a>
        <a href="#" class="qqui-appBar__item">
            <span>
                <i class="iconfont icon-icon-test3"></i>
                <span class="qqui__pointer qqui__pointer_oOn"></span>
            </span>
            
            <p class="qqui__desc">动态</p>
        </a>
    </div>

上图图标皆来自阿里图标库： www.iconfont.cn/collections… 使用方式为下载方法，从上面网址下载。然后将其以css引入，使用类名进行添加。