Eine detaillierte Einführung in die CSS-Namensspezifikation BEM von QQtabBar

BEM von QQtabBar

Zunächst einmal: Was bedeutet BEM?
BEM steht für Block, Element, Modifier. Es handelt sich um eine vom Yandex-Team vorgeschlagene Front-End-Benennungsmethode und eine CSS-Benennungsspezifikation.

weui-primary_loading__dot: Bibliotheksname-Komponentenstatus__Elementname Bibliotheksname: wird grundsätzlich von jedem Unternehmen vereinbart.
Komponente: Wird im Allgemeinen verwendet, um separate CSS zum Ändern bestimmter Tags zu erstellen.
Status: Im Allgemeinen nach dem Status des Tags oder dem Effekt benannt, mit dem interagiert werden kann. Elementname: Im Allgemeinen nach der Beschreibung der Funktion des Tags benannt.

Vorteile von BEM:

Benutzerfreundlichkeit Wenn Sie BEM verwenden möchten, müssen Sie nur die BEM-Namenskonvention übernehmen. Einheitliche unabhängige Blöcke und CSS-Selektoren können Ihren Code wiederverwendbar und einheitlich machen. Flexibilität Nach der Verwendung von BEM können Methoden und Tools nach Ihren Wünschen organisiert und konfiguriert werden.

Eine ausführliche Einführung in BEM

B (Block)

Block: Eine wiederverwendbare, funktionale und unabhängige Seitenkomponente. Der Name des Blocks beschreibt seinen Zweck („Was ist das?“ – eine Bibliothek oder Komponente), nicht seinen Zustand (Rot oder Größe).

• Blöcke sollten ihre Umgebung nicht beeinflussen. Dies bedeutet, dass Sie für Blöcke keine externe Geometrie (Kanten) oder Positionierung festlegen sollten.
• Wenn Sie BEM verwenden, sollten Sie keine CSS-Tags oder ID-Selektoren verwenden.

E (Element): Element

Element: Ein zusammengesetzter Teil eines Blocks. Elemente sind kontextabhängig: Sie sind nur im Kontext des Blocks sinnvoll, zu dem sie gehören, und können daher nicht isoliert verwendet werden.
Der Name eines Elements beschreibt seinen Zweck („Was ist das?“, Element, Text usw.), nicht seinen Zustand („Um welchen Typ handelt es sich oder wie sieht es aus?“, rot, groß usw.).

M (Modifikator): Modifikator

Eine Entität, die das Erscheinungsbild, den Status oder das Verhalten eines Blocks oder Elements definiert. Es beschreibt sein Erscheinungsbild („welche Größe?“ oder „welches Design?“ usw.).

Nachdem wir BEM verstanden haben, müssen wir darüber nachdenken, wie wir es verwenden sollten.

1. Blöcke erstellen: Wenn ein Teil des Codes wahrscheinlich wiederverwendet wird und nicht von der Implementierung anderer Seitenkomponenten abhängt.
2. Erstellen Sie ein Element: Verwenden Sie es in dem von Ihnen erstellten Block, wie im Code beschrieben.
3. Modifikatoren erstellen: wenn Sie die Eigenschaften eines Elements ändern müssen. Analysieren Sie die QQ-Anwendungsleistenstruktur

Insgesamt handelt es sich um einen großen Block, der vier kleine Blöcke enthält, und jeder kleine Block enthält drei Elemente.

AppBar blockieren
Kleiner Artikel
Symbol
Schlagwortedesc
Kleiner Punktzeiger

<div Klasse="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">Nachricht</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">Kontakt</p>
        </a>
        <a href="#" class="qqui-appBar__item">
            <span>
                <i Klasse = "Iconfont-Icon-Icon-Test"></i>
                <span class="qqui__pointer"></span>
            </span>
            
            <p class="qqui__desc">Highlights</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">Dynamisch</p>
        </a>
    </div>

* {
            Polsterung: 0;
            Rand: 0;
        }

        ein:link {
            Farbe: #b0b3bf;
        }

        a:besucht {
            Farbe: #b0b3bf;
        }

        ein:schweben {
            Farbe: #2ec4fc;
        }

        a:aktiv {
            Farbe: #2ec4fc;
        }
        ein i.iconfont {
            Anzeige: Inline-Block;
           
            Breite: 36px;
            Höhe: 36px;
            Überlauf: versteckt;
            Rand unten: 3,5px;
            Schriftgröße: 36px;
        }
        ein i.icon_on{
            Farbe: #2ec4fc;
        }
        

        .qqui-appBar {
            Anzeige: Flex;
            Position: absolut;
            unten: 0;
            Breite: 100 %;
            Z-Index: 500;
            Hintergrundfarbe: #f9f9f9;
        }

        .qqui-appBar .qqui-appBar__item {
            biegen: 1;
            Textausrichtung: zentriert;
          
            Polsterung oben: 25px;
            Schriftgröße: 0;
            Farbe: #b0b3bf;
            Textdekoration: keine;
        }
        .qqui-appBar__item>span{
            Anzeige: Inline-Block;
            Position: relativ;
            Rand unten: 9px;
        }
        .qqui-appBar .qqui__desc {
            Schriftgröße: 18px;
            Textausrichtung: zentriert;
            Zeilenhöhe: 18px;
            Rand unten: 13px;
        }
        .qqui-appBar .qqui__desc_on{
            Farbe: Schwarz;
        }

        .qqui-appBar .qqui__pointer{
            Position: absolut;
            oben: -2px;
            rechts: -2px;
            Breite: 20px;
            Höhe: 20px;
            Anzeige: Inline-Block;
            Zeilenhöhe: 18px;
            Farbe: weiß;
            Randradius: 50 %;
            Schriftgröße: 10px;
        }
        .qqui-appBar .qqui__pointer_on{
            
            Hintergrundfarbe: #F43539;
        }
        .qqui-appBar .qqui__pointer_oOn{
            Breite: 12px;
            Höhe: 12px; 
            Zeilenhöhe: 12px; 
            Hintergrundfarbe: #F43539;
         
        }

Der endgültige Effekt

Die oben stehenden Symbole stammen alle aus der Alibaba Icon Library: https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=16472
Die Verwendungsmethode ist die Download-Methode; laden Sie es von der oben genannten URL herunter. Importieren Sie es dann als CSS und fügen Sie es unter Verwendung des Klassennamens hinzu.

Dies ist das Ende dieses Artikels über die detaillierte Einführung der CSS-Namensspezifikation BEM von QQtabBar. Weitere relevante Inhalte zur CSS-Namensspezifikation BEM finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!