Anmerkungen zu Josh Comeaus#039; Custom CSS Reset

Kürzlich haben wir über Elad Shechters neue CSS -Reset gesprochen, genau gefolgt von Josh Comeas aufschlussreichem Blog -Beitrag zu diesem Thema. Dies markiert eine Verschiebung der CSS -Reset -Landschaft. Die signifikanten Browser -Stylingunterschiede in der Vergangenheit sind weniger weit verbreitet, und oft werden viele Standardstile ohnehin überschrieben. Daher entwickeln sich "moderne" CSS -Resets zu kuratierten Sammlungen von Standardstilen, die praktische Vorteile für neue Projekte bieten.

Bei der Untersuchung von Joshs Ansatz scheint es genau zu sein, dass: eine Zusammenstellung von Stilen, die von Natur aus nicht designorientiert sind, sondern das Design unterstützen, indem sie häufig gewünschte Projektmerkmale bereitstellen. Lassen Sie uns seine Entscheidungen mit einigen Kommentaren analysieren.

 *, *:: vor, *:: nach {
  Kastengrößen: Border-Box;
}

Eine weithin anerkannte Praxis. Während sein Dienstprogramm mit dem zunehmenden Einsatz von Gitter- und Flexbox -Layouts leicht vermindert sein könnte, bleibt es ein bevorzugter Ansatz für eine konsistente Größe. Im Idealfall sollte ein CSS -Reset die Vererbung für leichtere Überschreibungen auf Komponentenebene nutzen.

 * {{
  Rand: 0;
}

Eine kurze Möglichkeit, Standardmargen zu beseitigen. In einigen Situationen potenziell hartnäckig, erzwingt es explizite Margenerklärungen, wodurch die Klarheit verbessert wird. Kombinieren Sie dies mit padding: 0; Würde Standardlisten -Elementpolster adressieren.

 html, Körper {
  Höhe: 100%;
}

Eine nützliche Strategie, um sicherzustellen, dass prozentuale Höhen korrekt funktionieren, um ein unerwartetes Hintergrundverhalten zu verhindern. Während body { height: 100vh; } mag ausreichend erscheinen, es fehlt die gleiche Zuverlässigkeit, möglicherweise aufgrund von iOS -Safari -Macken.

 Körper {
  Linienhöhe: 1,5;
  -Webkit-font-shoothing: Antialias;
}

Die Eigenschaft -webkit-font-smoothing Objekt kann zu übermäßig dünner Typografie führen. Während ein wertvolles Werkzeug ist, ist die globale Anwendung nicht immer ideal. Verwalten der globalen typografischen Größe über den html Selektor, das die Anpassung der Root-Schriftgröße mit Medienabfragen, bietet mehr Kontrolle. Eine Zeilenhöhe von 1,5 ist ein angemessener Ausfall, obwohl ein Wert näher an 1,4 von einigen bevorzugt werden kann. Es werden jedoch häufig Überschriftenanpassungen erforderlich. Joshs kluge Alternative:

 * {{
  Linienhöhe: Calc (1EM 0,5REM);
}

Dies passt dynamisch die Linienhöhe basierend auf der Schriftgröße an und bietet eine skalierbare Lösung. Diese Technik, die von Jesús Ricartes Arbeit zur optimalen Berechnung der Linienhöhe inspiriert ist, ist eine Erkundung wert.

 IMG, Bild, Video, Leinwand, Svg {
  Anzeige: Block;
  Max-Breite: 100%;
}

Eine solide Aufnahme. display: block; eliminiert Linienhöhenprobleme und max-width: 100%; verhindert, dass Medienelemente ihre Container überfließen. Während der Aufnahme von<picture></picture> ist fraglich, hinzugefügt<iframe></iframe> Und<object></object> würde die Vollständigkeit verbessern.

 P, H1, H2, H3, H4, H5, H6 {
  Überlaufwerk: Breakwort;
}

Essentiell, dass lange Wörter (wie URLs) Layouts stören. Die Anwendung dieser auf einen breiteren Selektor wie .text-content ermöglicht eine Kaskadierung, aber es ist akzeptabel, bestimmte Elemente zu zielen. Erwägen Sie das Hinzufügen<li> Anwesend<dl></dl> Anwesend<dt></dt> , Und<blockquote></blockquote> Für umfassende Linienverpackung. Die optimale Kombination von Leitungswechseleigenschaften bleibt ein Thema laufender Diskussion.

 #Root, #__Next {
  Isolation: Isolat;
}

Dieser React/Next.js spezifische Snippet erstellt einen Stapelkontext. Obwohl der genaue Nutzen nicht sofort ersichtlich ist, führt sie keine offensichtlichen Probleme.

Insgesamt ist Joshs Reset ein gut überlegter Ansatz. Es ist immer vorteilhaft, verschiedene CSS -Reset -Strategien zu untersuchen und zu vergleichen.

Das obige ist der detaillierte Inhalt vonAnmerkungen zu Josh Comeaus#039; Custom CSS Reset. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!