QQtabBar による CSS 命名仕様 BEM の詳細な紹介

<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>

* {
            パディング: 0;
            マージン: 0;
        }

        リンク
            色: #b0b3bf;
        }

        a:訪問{
            色: #b0b3bf;
        }

        ホバー{
            色: #2ec4fc;
        }

        a:アクティブ{
            色: #2ec4fc;
        }
        i.アイコンフォント{
            表示: インラインブロック;
           
            幅: 36ピクセル;
            高さ: 36px;
            オーバーフロー: 非表示;
            下部マージン: 3.5px;
            フォントサイズ: 36px;
        }
        i.icon_on{
            色: #2ec4fc;
        }
        

        .qqui-appBar {
            ディスプレイ: フレックス;
            位置: 絶対;
            下部: 0;
            幅: 100%;
            zインデックス: 500;
            背景色: #f9f9f9;
        }

        .qqui-appBar .qqui-appBar__item {
            フレックス: 1;
            テキスト配置: 中央;
          
            パディング上部: 25px;
            フォントサイズ: 0;
            色: #b0b3bf;
            テキスト装飾: なし;
        }
        .qqui-appBar__item>span{
            表示: インラインブロック;
            位置: 相対的;
            下マージン: 9px;
        }
        .qqui-appBar .qqui__desc {
            フォントサイズ: 18px;
            テキスト配置: 中央;
            行の高さ: 18px;
            下部マージン: 13px;
        }
        .qqui-appBar .qqui__desc_on{
            色: 黒;
        }

        .qqui-appBar .qqui__pointer{
            位置: 絶対;
            上: -2px;
            右: -2px;
            幅: 20px;
            高さ:20px;
            表示: インラインブロック;
            行の高さ: 18px;
            色: 白;
            境界線の半径: 50%;
            フォントサイズ: 10px;
        }
        .qqui-appBar .qqui__pointer_on{
            
            背景色: #F43539;
        }
        .qqui-appBar .qqui__pointer_oOn{
            幅: 12px;
            高さ: 12px; 
            行の高さ: 12px; 
            背景色: #F43539;
         
        }