CSS-Benennung: BEM, Scoped CSS, CSS-Module und CSS-in-JS erklärt

Der Anwendungsbereich von CSS ist global. Wenn das Projekt immer größer wird und mehr Leute daran beteiligt sind, wird die Benennung zum Problem. Hier sind einige Lösungen für das Benennungsproblem.

1. BEM

Der Name hat die Form .block__element--modifier. Der Name hat eine Bedeutung. Block kann als Modul betrachtet werden und hat einen bestimmten Umfang.

Beispiele

.dropdown-menu__item--aktiv

2. CSS mit begrenztem Umfang

Referenz: vue-loader.vuejs.org/zh/guide/sc…

Ziel: Der aktuelle Komponentenstil hat keine Auswirkungen auf andere Komponenten

Fügen Sie dem DOM-Knoten der Komponente ein eindeutiges Attribut hinzu und konvertieren Sie das CSS im Style-Tag so, dass es dem Attribut entspricht. Dadurch wird der CSS-Bereich eingeschränkt.

Beispiele

<Stilbereich>
.Beispiel {
  Farbe: rot;
}
</Stil>
 
<Vorlage>
  <div class="example">hallo</div>
</Vorlage>

Konvertierungsergebnisse:

<Stil>
.beispiel[data-v-f3f3eg9] {
  Farbe: rot;
}
</Stil>
 
<Vorlage>
  <div class="example" data-v-f3f3eg9>hallo</div>
</Vorlage>

3. CSS-Module

Referenz: vue-loader.vuejs.org/zh/guide/cs…

Konvertieren Sie den CSS-Selektor in eine eindeutige Zeichenfolge und wenden Sie ihn auf das DOM an. Die Benennung erfolgt nach Algorithmen, wobei die Zuordnungstabelle von der menschlichen Benennung zur Algorithmusbenennung aufgezeichnet wird

Beispiele

<Stilmodul>
.Rot {
  Farbe: rot;
}
</Stil>
<Vorlage>
  <p: Klasse = "$style.red">
    Das sollte rot sein
  </p>
</Vorlage>

Konvertierungsergebnisse:

<Stilmodul>
._1yZGjg0pYkMbaHPr4wT6P__1 {
  Farbe: rot;
}
</Stil>
<Vorlage>
  <p Klasse="_1yZGjg0pYkMbaHPr4wT6P__1">
    Das sollte rot sein
  </p>
</Vorlage>

4. CSS in JS

Referenz: github.com/styled-comp…

Drücken Sie den CSS-Inhalt mit einem eindeutigen Selektor aus. Gleich wie CSS-Module, die mithilfe eines Algorithmus benannt werden. Behandeln Sie CSS als eine JS-Zeichenfolge und geben Sie CSS mehr Möglichkeiten

Beispiele

<Vorlage>
  <css-in-js></css-in-js>
</Vorlage>
 
<Skript>
  Importieren Sie Stile aus „Vue-Styled-Components“.
  Standard exportieren {
    Komponenten:
      cssInJs: styled.div `
                Farbe: rot;
            `
    }
  }
</Skript>

Konvertierungsergebnisse:

<Vorlage>
    <div Klasse="gXTzCp"></div>
</Vorlage>
<Stil>
.gXTzCp {
    Farbe: rot;
}
</Stil>

V. Fazit

1. BEM sorgt für eine regelmäßige und sinnvolle Benennung. Blöcke können als Module betrachtet werden und haben einen gewissen Umfang.
2. Scoped CSS begrenzt den Umfang von CSS, unabhängig von der Benennung. Anpassung an mehrere Themen nicht möglich
3. CSS-Module verwenden eine algorithmische Benennung, die Namenskonflikte vermeidet und den Umfang von CSS begrenzt. Anpassung an mehrere Themen nicht möglich
4. CSS-in-JS verwendet algorithmische Benennung und bietet die Vorteile von CSS-Modulen. Gleichzeitig wird CSS als eine Zeichenfolge von JS betrachtet, was CSS mehr Fähigkeiten verleiht

Dies ist das Ende dieses Artikels über CSS-Benennung: BEM, CSS mit Gültigkeitsbereich, CSS-Module und CSS-in-JS. Weitere relevante Inhalte zur CSS-Benennung finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!