Eingehende Verständnis ALL: Rückkehr: Isolieren Sie die Wirkung des universellen CSS-Selektors auf die Komponentenbibliotheksstile effektiv

In diesem Artikel werden die gemeinsamen CSS-Selektoren (z. B. * oder Div) in der Front-End-Entwicklung versehentlich überschrieben, wie sich die Bibliotheksstile von Drittanbietern überschreiben. In Anbetracht der Einschränkungen traditioneller Lösungen beschreibt der Artikel das All: Attribut als elegante und leistungsstarke Lösung, die die CSS -Attribute eines Elements auf die Standardwerte für übergeordnete oder Benutzeragenten zurücksetzt, die Bibliotheksstile effektiv isolieren, die normale Anzeige von Komponenten bereitstellen und Beispielcodes und Browser -Kompatibilitätsanweisungen bereitstellen.

Herausforderungen von Universal CSS -Selektoren

Die Integration von Komponentenbibliotheken von Drittanbietern ist eine gängige Praxis in der modernen Front-End-Entwicklung. Diese Bequemlichkeit wird jedoch auch von einem potenziellen Konfliktproblem in einem potenziellen Stil begleitet: Projekte oder benutzerdefinierte universelle CSS-Selektoren wie Wildcard-Selektoren* oder Elemente-Selektor-Divs können versehentlich die Elementstile in der Komponentenbibliothek überschreiben, wodurch Komponenten-Display-Ausnahmen oder Funktionsfehler verursacht werden.

Zum Beispiel könnte eine globale CSS -Regel wie folgt sein:

 * {{
   Schriftfamilie: Arial; /* Erzwingen Sie alle Elemente, um Arial -Schriftart zu verwenden*/
}

Oder gemeinsame Regeln für bestimmte Elemente:

 div {
   Grenzboden: 1PX Solid; /* Unteren Rand für alle Divs hinzufügen*/
}

Sobald diese scheinbar harmlosen globalen Regeln auf die DOM -Struktur der Komponentenbibliothek angewendet werden, können sie die voreingestellten Schriftarten, Ränder und andere Arten der Bibliothek zerstören, was zu Verwirrung in der Schnittstelle führt und sogar die interaktive Logik der Komponente beeinflusst. Traditionelle Bewältigungsmethoden, wie z. B. manuell umgeschriebene Stile für alle Elemente in der Bibliothek, sind nicht nur riesig und schwer zu pflegen, sondern es auch noch schwieriger zu bewahren, wenn CSS -Attribute weiter zunehmen.

Dilemma und Missverständnisse aller Eigenschaften

Um solche Stilkonflikte zu lösen, haben Entwickler versucht, alle CSS -Eigenschaften von Elementen mithilfe der CSS alle Eigenschaften zurückzusetzen. Mit dem All-Attribut können Sie alle CSS-Attribute mit Ausnahme von Richtung und Unicode-Bidi auf einen Schlüsselwortwert gleichzeitig zurücksetzen. Zu den gängigen Schlüsselwörtern gehören Erb, Erbe, Uneingestellte und Rückkehr.

Einige gemeinsame vorläufige Lösungen führen jedoch häufig zu neuen Problemen:

• Das alles: Uneinig; : Nicht festgelegte Schlüsselwort setzt Eigenschaften auf ihren Erbenwert (wenn die Eigenschaften vererbbar sind) oder Anfangswert (wenn die Eigenschaften nicht vererbt sind) zurückgesetzt. Dieser Ansatz kann zwar lockerer als initial sein, aber möglicherweise die kritischen Stile, die die Komponentenbibliothek selbst benötigt, weiterhin entfernen, da er nicht zwischen Autorenstilen und Benutzeragentenstilen unterscheidet.
• All: Initial! Wichtig; : Diese Methode wird als "Ultimate CSS Reset" bezeichnet, wodurch alle Eigenschaften auf ihre Anfangswerte (Browser -Standardeinstellungen) und verwendet! Wichtig, um die Priorität zu erhöhen. Wenn jedoch in der Komponentenbibliothek angewendet wird, wie z. B. terminal * {alle: initial! Wichtig; }, es löscht alle Stile der Bibliothek selbst vollständig, wodurch die Bibliothek nicht in der Lage ist, normal zu rendern, da alle Stile in den Standardzustand des Browsers zurückkehren, und! Wichtig ist, dass diese Standardwerte schwierig sind, durch nachfolgende Bibliothek selbst -Stile überschrieben zu werden.

Das Problem bei diesen Methoden ist, dass sie zu radikal sind, um zu unterscheiden, welche Stile benutzerdefinierte allgemeine Stile sind und welche von der Komponentenbibliothek selbst benötigt werden. Wir brauchen einen intelligenteren Reset -Mechanismus, mit dem die Stile der Komponentenbibliothek bei gleichzeitiger Isolierung externer gemeinsamer Stile wirksam werden können.

ALL: Lösungsdetails zurückkehren

Das Rückkehrschlüsselwort von CSS wurde erstellt, um solche Probleme zu lösen. Das Rückkehrschlüsselwort ist insofern eindeutig, als es den Wert eines Attributs auf einen von dem Benutzeragenten -Stylesheet (d. H. Der Browser -Standardstil) ermittelte Wert, der Vererbungswert (falls das Attribut vererbbar ist) oder Autorenstylesheet (falls zuvor definiert) zurückgesetzt wird. Kurz gesagt, es "rollt zurück" zur vorherigen aussagekräftigen Stilquelle, anstatt einfach alle Stile zu entleeren.

Wenn alles: zurückkehren; wird auf ein Element und seine untergeordneten Elemente angewendet, seine Verhaltenslogik lautet wie folgt:

1. Bevorzugter Autorstil: Wenn ein von einem Entwickler geschriebenes CSS (Autorstil) eine Eigenschaft für dieses Element oder seinen Vorfahren festgelegt hat, rollt zurück den Eigenschaftswert auf den vom Autorenstil definierten Wert.
2. Vererbungsattribut: Wenn das Attribut vererbt und es keine Definition des Autorenstils gibt, wird es auf den berechneten Wert seines übergeordneten Elements zurückkehren.
3. Benutzeragentenstil: Wenn keine der oben genannten Situationen erfüllt ist, das heißt, es gibt keine Definition des Autorenstils, und die Attribute sind nicht vererbbar, rollt zurück zum Browser -Standardstil (User Agent Style).

Dieser intelligente Rollback-Mechanismus sorgt für eine ideale Wahl für die Isolierung von Komponentenbibliotheksstilen von Drittanbietern. Es kann effektiv verhindern, dass externe universelle Selektoren (z. B. * oder Div) den internen Elementstil der Komponentenbibliothek beeinträchtigen und gleichzeitig den eigenen Stil der Komponentenbibliothek normal wirken lassen.

Anwendungsbeispiel

Angenommen, wir haben eine Komponentenbibliothek namens. Terminal, deren interne Elemente für externe gemeinsame Div -Stile anfällig sind. Wir können alle verwenden: zurückkehren ;:

 

<kopf>
<title> cs
<styles>
  /* Externer gemeinsamer Stil, der alle Divelemente beeinflusst*/
  div {
     Grenzboden: 1PX Solid Blue;
     Schriftfamilie: Sans-Serif;
  }

  /* Verwenden Sie alle: Zurück zu isolieren, um. Terminal und seine Kinder*/////////////
  /* Dies führt zu Elementen im Inneren. Terminal, um externe gemeinsame Stile zu ignorieren,
     und rollen Sie zurück zu seinem eigenen Stil oder Browser -Standardstil. */
  .terminal, terminal * {
      ALL: Rückkehr;
  }

  /*. Terminal eigene Stile, diese Stile werden normal wirksam*///
  .terminal {
    Hintergrund: Schwarz;
    Farbe: #CCC;
    Schriftfamilie: Monospace;
    Polsterung: 10px; /*. Terminal der von sich selbst definierte Stil*/
    Grenze: 2px Festgrau; /*. Terminal der von sich selbst definierte Stil*/
  }

  /*. terminale spezifische Stile der internen Divs haben Vorrang vor Browser -Standardstilen*/
  .terminale div {
    Farbe: grün;
    Randboden: 5px;
  }




  <div> Dies ist ein Div, das von externen gemeinsamen Stilen betroffen ist. </div>
  <br>
  <div class="terminal">
    <div> Dies ist der DIV im. Terminal und wird nicht vom externen gemeinsamen Div -Stil beeinflusst. </div>
    <br>
    <span> Dies ist die Spannweite im .terminalen. </span>
  </div>


</styles>
</title></kopf>

Das obige ist der detaillierte Inhalt vonEingehende Verständnis ALL: Rückkehr: Isolieren Sie die Wirkung des universellen CSS-Selektors auf die Komponentenbibliotheksstile effektiv. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!