1. ホーム
  2. Web制作
  3. CSS

[CSSチュートリアル】QQtabBarからCSS命名規則BEMの詳細を見る

2022-01-21 08:52:38

QQtabBarからのBEM

まず、BEMとはどういう意味でしょうか?
BEMとは、ブロック、エレメント、モディファイアの意味で、CSSの命名規則としてYandexチームが提唱したフロントエンドの命名方法である

Weui-primary_loading__dot: ライブラリ名-コンポーネント名-状態名-要素名
ライブラリ名:各社で一般的に合意されている。
コンポーネント。一般的に、特定のタグを修正するための個別のCSSを作成するために使用されます。
状態。一般に、タグが置かれている状態、または相互作用できる効果にちなんで名付けられる
要素名:一般にタグの役割の説明から命名される。

BEMのメリット

使いやすさ BEMを使いたい場合、BEMの命名規則を採用すればよい。

BEMについてもう少し詳しく

B(ブロック):ブロック

ブロック 再利用可能な、機能的に独立したページ構成要素
ブロック名は、その状態(赤やサイズ)ではなく、目的("それは何ですか"機能ライブラリやコンポーネント)を説明します。

  • ブロックはその環境に影響を及ぼしてはいけません。つまり、ブロックに外部ジオメトリ(エッジ)や位置決めを設定してはいけないということです。
  • BEMを使用する場合、CSSタグやIDセレクタも使用してはならない

E(要素):要素

要素(ELement):ブロックの合成部分。要素は文脈に依存する:属するべきブロックの文脈の中にあるときのみ意味を持つので、単独では使用できない。
要素名は、その状態("どのようなタイプか、またはどのように見えるか?"赤い、大きいなど)ではなく、何に使われるか("これは何か?" アイテム、テキストなど)を説明するものです。

M(モディファイア):モディファイア

ブロックや要素の外観、状態、動作を定義する実体
どのように見えるかを記述する("どのサイズ?"や"どのテーマ?など)

BEMを理解したら、どのように使うべきかを考える必要があります。

  1. ブロックの作成:コードの一部が再利用可能で、他のページコンポーネントの実装に依存しない場合。
  2. 要素を作成:コードの中で役割を果たす説明の下に作成したブロックの下で使用します。
  3. モディファイアの作成:要素の特性を変更する必要がある場合。qqアプリのバー構造を解析する

全体として、彼は4つの小さなブロックを含む大きなブロックで、それぞれが3つの要素を含んでいます。

ブロック appBar
小型ブロックアイテム
アイコンアイコン
タグデスク
ドットポインタ

<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">message</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">contact</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">watch</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">dynamic</p>
        </a>
    </div>

* {
            padding: 0;
            margin: 0;
        }

        a:link {
            color: #b0b3bf;
        }

        a:vistied {
            color: #b0b3bf;
        }

        a:hover {
            color: #2ec4fc;
        }

        a:active {
            color: #2ec4fc;
        }
        a i.iconfont {
            display: inline-block;
           
            width: 36px;
            height: 36px;
            overflow: hidden;
            margin-bottom: 3.5px;
            font-size: 36px;
        }
        a i.icon_on{
            color: #2ec4fc;
        }
        

        .qqui-appBar {
            display: flex;
            position: absolute;
            bottom: 0;
            width: 100%;
            z-index: 500;
            background-color: #f9f9f9;
        }

        .qqui-appBar .qqui-appBar__item {
            flex: 1;
            text-align: center;
          
            padding-top: 25px;
            font-size: 0;
            color: #b0b3bf;
            text-decoration: none;
        }
        .qqui-appBar__item>span{
            display: inline-block;
            position: relative;
            margin-bottom: 9px;
        }
        .qqui-appBar .qqui__desc {
            font-size: 18px;
            text-align: center;
            line-height: 18px;
            margin-bottom: 13px;
        }
        .qqui-appBar .qqui__desc_on{
            color: black;
        }

        .qqui-appBar .qqui__pointer{
            position: absolute;
            top: -2px;
            right: -2px;
            width: 20px;
            height:20px;
            display: inline-block;
            line-height: 18px;
            color: white;
            border-radius: 50%;
            font-size: 10px;
        }
        .qqui-appBar .qqui__pointer_on{
            
            background-color: #F43539;
        }
        .qqui-appBar .qqui__pointer_oOn{
            width: 12px;
            height: 12px; 
            line-height: 12px; 
            background-color: #F43539;
         
        }

最終結果画像

上記のアイコンは、Aliアイコンライブラリから引用しています: https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=16472
ダウンロード方式で、上記URLからダウンロードしてください。そして、cssとして持ってきて、クラス名で追加します。

QQtabBarのCSS命名規則BEMについては、この記事がすべてです、より関連するCSS命名規則BEMの内容は、スクリプトハウスの過去の記事を検索するか、次の関連記事を閲覧を続けてください、あなたは将来的にもっとスクリプトハウスをサポートしてくれることを願っています!。