Ein Beispiel für die Verwendung von CSS-Methoden zur Erzielung von Modularität

1. Was sind CSS-Methoden?

CSS methodologies können als Entwurfsmuster oder CSS-Spezifikationen verstanden werden. Die Marktverwendung ist wie folgt:

Quelle des obigen Bildes: https://2019.stateofcss.com/technologies/

Möglicherweise nehmen Sie sich bei Ihrer täglichen Entwicklung nicht die Zeit, auf CSS-Methoden zu achten und sie zu verstehen. Mit zunehmender Erfahrung können Sie jedoch selbst denken oder den Code anderer lesen und im Internet auf ausgereifte Frameworks zurückgreifen, die mehr oder weniger einige Glanzpunkte der CSS-Methoden enthalten. Die folgenden gängigen CSS-Methoden können Ihnen dabei helfen, den Inhalt zusammenzufassen und zu sortieren.

2. Gängige CSS-Methoden

1. Außerhalb des Büros

面向對象的CSS kurz OOCSS ) wurde 2008 von Nicole Sullivan auf Grundlage ihrer Arbeit bei Yahoo vorgeschlagen.

(1) Vorschriften

1. Verwenden Sie keine ID, sondern Klasse

Verwenden Sie Klassen direkt, um Stile festzulegen. Dies erhöht nicht nur die Semantik, sondern verringert auch die Abhängigkeit von CSS von HTML.

2. Trennung von Struktur und Stil

Obwohl in den frühen Jahren von HTML und CSS die Trennung von Struktur und Stil erreicht wurde, gibt es in CSS immer noch zwei Arten von Stilen:

• Strukturstil (z. B. Länge, Breite, Abstand)
• Hautstil (z. B. Farbe, Schattierung)

Daher empfiehlt OOCSS, diese beiden Stile zu trennen.

Beispielsweise gibt es drei Schaltflächen, weiß/grün/rot, die wie folgt definiert werden können:

Klasse="btn btn-default"

Klasse="btn btn-grün"

Klasse="btn btn-rot"

Wenn Sie wirklich viele violette Schaltflächen haben, können Sie eine separate Klasse für violette Schaltflächen erstellen. Dadurch kann die Menge an CSS-Code erheblich reduziert werden.

3. Trennung von Behälter und Inhalt

Inhalte sollten nie auf einen bestimmten Container beschränkt bleiben und müssen zur Wiederverwendung freigegeben werden.

# Falsche Art, header.action zu schreiben {
}
.header .aktion .login {
}
.header .aktion .register {
}

# Richtige Schreibweise von .header{
}
.Aktion{
}
.Anmelden {
}
.registrieren {
}

Vererbte Selektoren sind nützlich, da sie durch denselben Namen bedingte Stilkonflikte reduzieren können (diese treten häufig auf, wenn mehrere Personen an einem Projekt zusammenarbeiten). Wir sollten es jedoch nicht überstrapazieren.

(2) Vorteile und Nachteile

Nutzen:

• Modular und wiederverwendbar
• Reduzieren Sie die Code-Duplizierung
• Verbessern Sie Skalierbarkeit, Wartbarkeit und Lesbarkeit

Mangel:

• Obwohl es die Anzahl der tief verschachtelten Selektoren reduziert, fügt es mehr Klassen hinzu
• Wenn Ihr Code nicht viele wiederholte visuelle Muster enthält, z. B. bei einem kleinen Projekt, ist die Anwendung von OOCSS möglicherweise nicht praktikabel.

(3) Beispiele

Bootstrap verwendet OOCSS.

Zum Beispiel:

html

 <div Klasse='Header'>
        <ul Klasse='Menü'> 
            <li class='Menüpunkt aktiv'>1</li>
            <li class='Menüpunkt'>2</li>
            <li class='Menüpunkt'>3</li>
        </ul>
        <div Klasse="Aktion">
            <button class="btn btn-login">Anmelden</button>
            <button class="btn btn-register">Registrieren</button>
        </div>
    </div>

CSS:

.header {
}
.Speisekarte {
}
.Menüpunkt {
}
.item.aktiv {
}
.Aktion {
}
.btn {
}
.btn-login {
}
.btn-register{
}

2. BEM

BEM – Blockelement-Modifikator. Geboren 2009.

(1) Inhalt

BEM besteht aus drei Teilen:

• Block - Block, z. B. Header
• Element – ​​untergeordnetes Element, z. B. ein Element unter dem Blockmenü
• Modfier - Status, z. B. .current, .active

(2) Regeln

1. Namenskonventionen

• - : Wird nur als Bindestrich verwendet, um die Verbindung zwischen mehreren Wörtern in einem Block oder einem Unterelement anzuzeigen.
• __ Unterstriche: werden verwendet, um Blöcke und ihre Unterelemente zu verbinden.
• -- Bindestrich: wird verwendet, um den Zustand eines Blocks oder eines Unterelements eines Blocks zu beschreiben.

In den Standards einiger Unternehmen (wie etwa Tencent) werden doppelte Bindestriche durch einfache Unterstriche ( _ ) ersetzt.

Beispiel: .block-name__element--modifier

Demo-HTML:

    <div Klasse='Header'>
        <ul Klasse='header__menu'> 
            <li class='header__menu-item--active'>1</li>
            <li class='header__menu-item'>2</li>
            <li class='header__menu-item'>3</li>
        </ul>
        <div Klasse="header__action">
            <button class="header__btn--login">Anmelden</button>
            <button class="header__btn--register">Registrieren</button>
        </div>
    </div>

ohne Demo:

.header {
    &__Speisekarte {}
    &__Menüpunkt {}
    &__Aktion {}
    &__btn {  
        &--login {}
        &--registrieren {}
    }    
}

2. Vermeiden Sie Verschachtelung

BEM hat höchstens drei Ebenen: B+E+M.

Vermeiden Sie daher bitte das Format .block__el1__el2 und ändern Sie es direkt in .block_el2 .

Der Block hier ist einem Namespace sehr ähnlich.

(3) Vorteile und Nachteile

Nutzen:

• Die hierarchischen Beziehungen sind auf einen Blick klar und lesbar
• Es besteht keine Notwendigkeit, sich auf hierarchische Selektoren zu verlassen, um den Umfang der Einschränkungen zu begrenzen. Dadurch kann eine komponentenübergreifende Stilverschmutzung vermieden werden.

Mangel:

• Die Benennungsmethode ist lang und hässlich und unpraktisch zu schreiben (Sie können less/sass verwenden, um das Schreiben zu vereinfachen)
• Bei kleineren Komponenten kann das BEM-Format nutzlos erscheinen. Für öffentliche, globale Modulstildefinitionen wird jedoch die Verwendung des BEM-Formats empfohlen. (Insbesondere öffentliche Komponenten, die der Öffentlichkeit zugänglich gemacht werden)

andere:

Durch die BEM-Benennung wird der Klassenname länger, nach der GZIP-Komprimierung kann der Bandbreiten-Overhead jedoch ignoriert werden.

BEM erlaubt nicht die Verwendung von Tag-Selektoren. Selbst das einfachste li muss als .menu-item geschrieben werden.

(4) Praxis

Das Framework elementUI von Ele.me ist eine Art BEM, Sie können sich auch die Website company.yandex.ru/ ansehen.

3. SMACSS

SMACSS (Scalable & Modular Architecture CSS, was die Skalierbarkeit und modulare Architektur von CSS bezeichnet). Jonathan Snook kam 2011 auf die Idee, als er bei Yahoo arbeitete und CSS für Yahoo Mail schrieb.

(1) Vorschriften

1. Kategorisieren von CSS-Regeln

Es unterteilt CSS in fünf verschiedene Kategorien:

Base Basisspezifikationen

Beispielsweise „CSS zurücksetzen“ und „CSS normalisieren“.

Layout -Layout-Spezifikationen

Beispielsweise linke und rechte Spalten und Rastersysteme.

Module

Beispielsweise eine Produktliste, eine Navigationsleiste. Wiederverwendbar.

State Spezifikation

Beispielsweise der ausgewählte Status.

Theme -Stil-Spezifikationen

2. Namensregeln

Fügen Sie dem Klassennamen前綴hinzu:

Für die Basis ist kein Präfix erforderlich. Und verwenden Sie Tags anstelle von Klassen und IDs.

• l- wird als Präfix für Layout verwendet: l-inline
• m- wird als Präfix für Modul: m-callout verwendet. Sie müssen jedoch kein Präfix verwenden.
• is- wird als Präfix für den Status verwendet: is-collapsed
• Das Design erstellt normalerweise eine neue Datei theme.css und verwendet dabei die zuvor vorhandenen Klassennamen. Wenn Sie einen separaten Klassennamen verwenden möchten, können Sie theme- verwenden.

Beispiel:

<div Klasse="l-box m-profile m-profile--ist-pro-Benutzer">
  <img class="m-avatar m-profile__image" />
  <p class="m-profile__bio">…</p>
</div>

(2) Beispiele

Online-Demo: https://codepen.io/savemuse/pen/gWVpvd

4. Atomares CSS

Atomic CSS wurde ebenfalls von Yahoo vorgeschlagen und kann wörtlich als原子CSS verstanden werden.

(1) Beispiel

<div className="P(10px) M(20%) Pos(f) Start(50%) Bgc(#fff)" />

Es wird ein spezielles Atomic-CSS-Tool geben, das dabei hilft, den Klassennamen im obigen HTML in normales CSS zu analysieren. (leicht)

(2) Vorteile und Nachteile

Vorteile: Minimieren Sie CSS-Stile in Komponenten und maximieren Sie die Wiederverwendbarkeit.

Nachteil: Dies ist grundsätzlich das Schreiben im Inline-Stil, aber wir verwenden den Klassennamen, um es auszudrücken.

(3) Zusammenfassung

Dieser Ansatz ist wirklich radikal. Ich kann es im Moment nicht akzeptieren.

Abschluss

Abgesehen vom radikalen Atomic habe ich die folgenden Vorschläge für die verbleibenden OOCSS/BEM/SMACSS:

Ihre jeweiligen Ideen ergänzen sich einerseits und widersprechen andererseits, und sie können in der tatsächlichen Entwicklung in gegenseitigem Abwägen zueinander eingesetzt werden.

Sie können alle mit CSS-Präprozessoren (wie less/sass) für eine bessere Effizienz kombiniert werden

Durch Vergleichen und Zusammenfassen der oben genannten Vorteile stellen wir fest, dass das Kernproblem, das sie lösen, die Modularität ist.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.