Zurücksetzen mit deaktiviertem CSS

In den letzten Jahren habe ich häufig das Schlüsselwort unset verwendet, um die CSS-Eigenschaften zurückzusetzen. Mir ist aufgefallen, dass ich es intuitiv verwende, um eine Eigenschaft zurückzusetzen. Aber was für mich intuitiv ist, ist für Sie möglicherweise nicht intuitiv. Lassen Sie mich das klarstellen.

Unscharf

Zum Beispiel verwende ich seit Ewigkeiten „border: none“, um den Rahmen von Elementen zu entfernen. Heutzutage verwende ich border: unset und die Ränder sind weg.

Rahmen sind einfach, da es sich um nicht vererbte Eigenschaften handelt, was bedeutet, dass das untergeordnete Element den Wert nicht von seinen übergeordneten Elementen erbt.

Das Gleiche gilt für Ränder und Abstände, die ich regelmäßig zurücksetzen muss.

Aber was ist mit geerbten Immobilien? Im Beispiel unten hat die letzte Schaltfläche eine blaue Farbe. Dies liegt daran, dass die nicht gesetzte Eigenschaft im Wesentlichen „Erben“ für die geerbte Eigenschaft „Farbe“ bedeutet, was die Schaltfläche getan und die Farbe auf Blau gesetzt hat.

Vererbung vs. Kaskade

Diese Dinge machen für mich, einen erfahrenen CSS-Entwickler, der sich mit Vererbung auskennt, Sinn. Aber für einen Anfänger sind diese Konzepte nicht trivial. Ich wage zu behaupten, dass die meisten Anfänger noch nicht einmal von vererbten und nicht vererbten Eigenschaften gehört haben oder sie vielleicht vergessen. Sie erfahren vielleicht etwas über die Kaskade, die nicht dasselbe ist.

Das endgültige Styling basiert auf Kaskade, Spezifität, Vererbung und mehr. MDN hat einen ziemlich guten Artikel über das Verständnis von Kaskade, Spezifität und Vererbung.

Auch hier ist das Konzept der Vererbung von Bedeutung, was bedeutet, dass einige CSS-Eigenschaften standardmäßig Werte erben, die auf dem übergeordneten Element des aktuellen Elements festgelegt sind, andere jedoch nicht. Dies kann auch zu einem Verhalten führen, das Sie möglicherweise nicht erwarten.

– MDN

Der letzte Satz wirkt beängstigend, weil man nicht weiß, was einen bei der Erbschaft erwartet. Es könnte hilfreich sein, wenn Sie sich daran erinnern, welche Immobilie den Wert ihrer Eltern erbt, aber das kommt mit der Zeit. Es kann mühsam sein, diese Informationen zu finden – indem Sie in den Dokumenten nachsehen oder in Ihren Notizen danach suchen. Wichtig ist zu wissen, dass die Vererbung existiert und dass sie Probleme verursachen kann, insbesondere bei Verwendung des Schlüsselworts unset.

Deaktivieren Sie diese Eigenschaften sicher

Ich dachte, es könnte nützlich sein, die Eigenschaften aufzulisten, die ich oft deaktiviere, die nicht geerbt sind und daher sicher deaktiviert werden können:

• Hintergrund (und alle seine Eigenschaften wie Hintergrundfarbe, Hintergrundbild usw.)
• border (und alle seine Eigenschaften wie border-width, border-style usw.)
• border-radius (und alle seine Eigenschaften wie border-top-left-radius, border-start-start-radius usw.)
• margin (und alle seine Eigenschaften wie margin-top, margin-block-start usw.)
• padding (und alle seine Eigenschaften wie padding-top, padding-block-start usw.)
• Mindesthöhe
• Mindestblockgröße
• Mindestbreite
• min-inline-size
• maximale Höhe
• maximale Blockgröße
• maximale Breite
• max-inline-size
• Position
• oben
• unten
• links
• richtig
• inset (und alle seine Eigenschaften wie inset-block, inset-inline usw.)
• Raster (und alle seine Eigenschaften wie Rastervorlagenspalten, Rasterspalte, Ausrichtungselemente, Zeilenabstand usw.)
• Flex (und alle seine Eigenschaften wie Flex-Basis, Flex-Richtung, Align-Items, Zeilenabstand usw.)

Abschluss

Wenn es darum geht, eine CSS-Eigenschaft zurückzusetzen, kann das Schlüsselwort unset nützlich sein. Es ist jedoch wichtig, die Vererbung der Immobilie, mit der Sie arbeiten, zu berücksichtigen.

Wenn Sie maximale Sicherheit gewährleisten möchten, ist das Deaktivieren der nicht vererbten Eigenschaften möglicherweise die beste Option. Auf diese Weise können Sie potenzielle Risiken ausschließen und sich darauf verlassen, dass Ihre Stylesheets sicher sind.

Das obige ist der detaillierte Inhalt vonZurücksetzen mit deaktiviertem CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!