Klassenbenennungskonvention

Für Anfänger wie html ist es ein Problem, Stilnamen zu den html-Tags hinzuzufügen. Sie wissen nicht, wie sie die Tags benennen sollen, oder benennen sie nur beiläufig. Dies kommt im täglichen Leben sehr häufig vor. Heute werde ich die Klassenbenennungskonvention in HTML zusammenfassen.

Gemeinsame Klassenschlüsselwörter:

Layoutklasse: Kopfzeile, Fußzeile, Container, Hauptinhalt, Nebeninhalt, Seite, Abschnitt
Wrap-Klasse: Wrap, Inner
Blockklasse: Region, Block, Box
Struktur Klasse: hd, bd, ft, oben, unten, links, rechts, Mitte, Spalte, Zeile, Raster, Spanne
Listenklasse: Liste, Element, Feld
Primäre und Nebenkategorien: Primär, Sekundär, Sub, Minor
Größenkategorie: s, m, l, xl, groß, klein
Statuskategorie ：aktiv, aktuell, geprüft, schweben, fehlgeschlagen, erfolgreich, warnen, Fehler, ein, aus
Navigationsklasse：nav, prev, next, breadcrumb, vorwärts, zurück, Anzeige, Paging, zuerst, letzte
Interaktionsklasse: Tipps, Warnung, Modal, Pop, Panel, Tabs, Akkordeon, Folie, Scrollen, Overlay,
Sternklasse: Bewertung, Stern
Trennungsklasse: Gruppe, getrennt, Teiler
usw. Klassifizierung: voll, halb, drittel, viertel
Tabellenklasse: Tabelle, Tr , td, cell, row
Bildkategorie: img, Miniaturansicht, Original, Album, Galerie
Sprachkategorie: cn, en
Forumklasse : Forum, BBS, Thema, Beitrag
Richtungsklasse: oben, unten, links, rechts
Andere semantische Klassen: btn, close, ok, cancel , wechseln; Link, Titel, Info, Intro, mehr, Symbol; Formular, Bezeichnung, Suche, Kontakt, Datum, E-Mail, Benutzer; Laden...
Nachdem wir die Schlüsselwörter haben, machen wir es zuerst Machen Sie ein paar einfache Regeln.
Machen Sie einfache Regeln:
werden mit Bindestrichen verbunden, z. B. .item-img
Verwenden Sie zwei Bindestriche, um eine Spezialisierung anzuzeigen, z. B. .item-img.item-img- -small bedeutet, die Statusklasse
basierend auf .item-img zu spezialisieren und Wörter direkt zu verwenden, z. B. .active, .checked. Dem Symbol
wird icon- vorangestellt (das Schriftartsymbol verwendet .icon). - Methode „font.i-name“).
Module werden mit Schlüsselwörtern wie .slide, .modal, .tips, .tabs benannt. Die Spezialisierung wird durch die beiden Bindestriche oben dargestellt, wie zum Beispiel .imgslide--full, .modal--pay, .tips--. up, .tabs--simple
JS-Operationsklassen sollten mit dem js-Präfix
vereinheitlicht werden. Verwenden Sie nicht mehr als vier Klassen in Kombination, wie z. B. .a.b.c.d
modifizierte Schlüsselwörter:
Am Beispiel des Headers können wir Präfixe hinzufügen, um verschiedene Header darzustellen, z. B. Block header.block-hd (hd ist die Abkürzung für header), modaler header.modal-hd und Artikel header.article-hd.
Derselbe Titel kann auch in Seitentitel.page-tt (Abkürzung des Titels), Blocktitel.block-tt usw. unterteilt werden.
In ähnlicher Weise kommen wir zur zweiten Frage: Was sollen wir tun, wenn wir eine Klasse spezialisieren möchten?
Spezialisierte Klasse:
Am Beispiel des obigen TT gibt es wahrscheinlich drei Methoden:
Das erste Verbrechen: Ändern Sie die Klasse direkt und ändern Sie .page-tt in .page- user-tt (Sie können % von scss verwenden, um zuerst gemeinsam genutzten Code zu definieren).
Zweite Methode: Fügen Sie gemäß den oben definierten Regeln eine Klasse zu .page-tt hinzu, um .page-tt.page-tt--user zu werden . Es handelt sich nicht um eine unabhängige Klasse, sie basiert auf .page-tt.
Die dritte Methode: Verwenden Sie die übergeordnete Klasse und geben Sie ihr einen Bereich, um so .page-user .page-tt zu bilden.
Im Allgemeinen verwenden wir die zweite und dritte Methode, da beide das gleiche .page-tt haben, was die Steuerung einiger grundlegender gemeinsamer Stile erleichtert.
Mit der dritten Methode der Steuerung durch übergeordnete Klassen betreten wir das dritte zu diskutierende Thema, die hierarchische Struktur

Ebene
Das am besten geeignete Beispiel für Hierarchie ist nichts Besseres als die ul>li-Struktur, wie zum Beispiel die folgende Struktur:

<ul>
    <li>
        <a href="#"><img src="" alt=""></a>
        <h3><a href="#"></a></h3>
        <p></p>
    </li>
</ul>

Im Allgemeinen haben wir auch zwei Möglichkeiten, Ebenen zu definieren: die erste ist Vererbung und die zweite sind Schlüsselwörter.

// 继承式
ul.card-list
    li.list-item
        a.item-img-link>img.item-img
        h3.item-tt>a.item-tt-link
        p.item-text

// 关键词式
ul.card-list
    li.item
        a.field-img-link>img.field-img
        h3.field-tt>a.field-tt-link
        p.field-text

Aus dem Obigen ist ersichtlich, dass die Vererbungsformel im Allgemeinen dem letzten Wort des untergeordneten Elements des übergeordneten Elements folgt, z. B. li, gefolgt von der Liste von ul und den untergeordneten Elementen von li Folgen Sie dem Element von li; die Schlüsselwortformel besteht vollständig aus Schlüsselwörtern, die zur Darstellung von Ebenen verwendet werden, und list>item>filed bildet genau drei Ebenen.
Schließlich geben wir unsere letzte Frage aus unserer Hierarchie ein, wie wir den Umfang des Stils steuern können.

Verwandte Empfehlungen:

Was ist der Unterschied zwischen Klasse und Ausweis

Die Attributklasse, die den Klassennamen eines Elements in HTML angibt

Beispielanalyse, wie CSS ID und Klasse verwendet, um den Elementstil zu steuern

Das obige ist der detaillierte Inhalt vonKlassenbenennungskonvention. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!