Die beste Methode, einen „Wrapper“ in CSS zu implementieren

Manchmal ist das erste HTML, das wir in einem neuen Dokument schreiben, ein Element, das alles andere auf der Seite umschließt. Der Begriff Wrapper ist dafür gebräuchlich. Wir geben ihm eine Klasse, und diese Klasse ist dafür verantwortlich, alle visuellen Elemente auf der Seite zu kapseln.

Ich habe immer mit der besten Methode zur Implementierung gerungen. Ich habe einen verwandten Thread auf StackOverflow gefunden, der mehr als 250.000 Aufrufe hat, also bin ich offensichtlich nicht der Einzige, der sich fragt! Ich werde meine neuesten Gedanken in diesem Artikel zusammenfassen.

Bevor wir uns damit beschäftigen, untersuchen wir zunächst den Unterschied zwischen „Wrapper“ und „Container“.

„Wrapper“ vs. „Container“

Ich glaube, es gibt einen Unterschied zwischen Wrapper- und Container-Elementen.

In Programmiersprachen wird das Wort Container im Allgemeinen für Strukturen verwendet, die mehr als ein Element enthalten können. Ein Wrapper hingegen ist etwas, das ein einzelnes Objekt umschließt, um ihm mehr Funktionalität und eine Schnittstelle zu bieten.

Daher ist es meiner Meinung nach sinnvoll, zwei verschiedene Namen zu haben, da sie unterschiedliche Funktionen beabsichtigen.

Apropos Wrapper, es ist üblich, an ein <div> zu denken, das den Rest des HTML-Dokuments enthält. Ich bin sicher, viele von uns haben eine Zeit erlebt, in der wir es auf 960 Pixel Breite eingestellt und all unseren Hauptinhalt zentriert ausgerichtet haben. Wrapper werden auch für Dinge wie die Anwendung eines sticky Footers verwendet.

Der Container hingegen beabsichtigt normalerweise eine andere Art der Einschließung. Eine, die manchmal notwendig ist, um ein Verhalten oder Styling mehrerer Komponenten zu implementieren. Er dient dazu, Elemente sowohl semantisch als auch visuell zu gruppieren. Als Beispiel hat Bootstrap „Container-Klassen“, die sein Grid-System beherbergen oder verschiedene andere Komponenten enthalten.

Die Begriffe Wrapper und Container können je nach Entwickler und dessen Absicht auch dasselbe bedeuten. Es mag auch andere Konventionen geben, daher ist der beste Rat normalerweise, das zu implementieren, was für Sie am sinnvollsten ist. Aber denken Sie daran, Benennung ist einer der grundlegendsten und wichtigsten Teile von Entwickleraktivitäten. Namenskonventionen machen unseren Code lesbarer und vorhersagbarer. Wählen Sie sorgfältig!

Hier ist ein Beispiel für einen allgemeinen Seiten-Wrapper

/**
 * 1. Centers the content. Yes, it's a bit opinionated.
 * 2. See the "width vs max-width" section
 * 3. See the "Additional Padding" section
 */
.wrapper {
  margin-right: auto; /* 1 */
  margin-left:  auto; /* 1 */

  max-width: 960px; /* 2 */

  padding-right: 10px; /* 3 */
  padding-left:  10px; /* 3 */
}

width vs max-width

Wenn Sie die width eines Block-Level-Elements festlegen, verhindern Sie, dass es sich bis zum Rand seines Containers ausdehnt (gut für Dinge wie lesbare Zeilenlängen). Daher nimmt das Wrapper-Element die angegebene Breite ein. Das Problem tritt auf, wenn das Browserfenster schmaler als die spezifische Breite des Wrappers ist. Dies löst eine horizontale Scrollleiste aus, was fast immer unerwünscht ist.

Die Verwendung von max-width stattdessen ist in dieser Situation für schmalere Browserfenster besser. Dies ist wichtig, wenn Sie eine Website auf kleinen Geräten benutzerfreundlich gestalten möchten. Hier ist ein gutes Beispiel, das das Problem veranschaulicht.

Sehen Sie den Pen CSS-Tricks: Die beste Methode, einen CSS-Wrapper zu implementieren von Kaloyan Kosev (@superKalo) auf CodePen.

In Bezug auf die Responsivität ist max-width die bessere Wahl!

Zusätzliches Padding

Ich habe viele Entwickler gesehen, die einen bestimmten Sonderfall vergessen. Nehmen wir an, wir haben einen Wrapper mit max-width auf 980 Pixel gesetzt. Der Sonderfall tritt auf, wenn die Bildschirmbreite des Geräts des Benutzers genau 980 Pixel beträgt. Der Inhalt klebt dann genau an den Rändern des Bildschirms, ohne Spielraum zu lassen.

Normalerweise möchten wir ein wenig Padding an den Rändern haben. Deshalb würde ich, wenn ich einen Wrapper mit einer Gesamtbreite von 980 Pixel implementieren müsste, dies wie folgt tun

.wrapper {
  max-width: 960px; /* 20px smaller, to fit the paddings on the sides */

  padding-right: 10px;
  padding-left: 10px;

  /* ...  */
}

Daher kann das Hinzufügen von padding-left und padding-right zu Ihrem Wrapper eine gute Idee sein, insbesondere auf Mobilgeräten.

Oder erwägen Sie, box-sizing zu verwenden, damit das Padding die Gesamtbreite überhaupt nicht verändert.

Welches HTML-Element soll gewählt werden

Ein Wrapper hat keine semantische Bedeutung. Er enthält einfach alle visuellen Elemente und Inhalte auf der Seite. Es ist nur ein generischer Container. In Bezug auf Semantik ist <div> die beste Wahl. Das <div> hat ebenfalls keine semantische Bedeutung und ist nur ein generischer Container.

Man könnte sich fragen, ob vielleicht ein <section>-Element für diesen Zweck geeignet wäre. Hier ist jedoch, was die W3C-Spezifikation sagt

Das <section>-Element ist kein generisches Containerelement. Wenn ein Element nur zu Styling-Zwecken oder zur Bequemlichkeit von Skripten benötigt wird, werden Autoren ermutigt, stattdessen das div-Element zu verwenden. Eine allgemeine Regel ist, dass das section-Element nur dann angemessen ist, wenn der Inhalt des Elements explizit in der Gliederung des Dokuments aufgeführt würde.

Das <section>-Element trägt seine eigene Semantik. Es repräsentiert eine thematische Gruppierung von Inhalten. Das Thema jeder Sektion sollte identifiziert werden, typischerweise durch die Einbeziehung einer Überschrift (h1-h6 Element) als Kindelement der section.

Beispiele für Sektionen wären Kapitel, die verschiedenen Registerkarten in einem Dialogfeld mit Registerkarten oder die nummerierten Abschnitte einer Abschlussarbeit. Die Startseite einer Website könnte in Sektionen für eine Einleitung, Nachrichten und Kontaktinformationen aufgeteilt werden.

Es mag auf den ersten Blick nicht sehr offensichtlich erscheinen, aber ja! Das einfache alte <div> eignet sich am besten für einen Wrapper!

Verwendung des <body>-Tags vs. Verwendung eines zusätzlichen <div>

Es ist erwähnenswert, dass es einige Fälle geben wird, in denen man das <body>-Element als Wrapper verwenden könnte. Die folgende Implementierung funktioniert einwandfrei

body {
  margin-right: auto;
  margin-left:  auto;
  max-width: 960px;
  padding-right: 10px;
  padding-left:  10px;
}

Und das Ergebnis ist ein Element weniger in Ihrem Markup, da Sie dieses unnötige Wrapper <div> auf diese Weise weglassen können.

Ich würde dies jedoch nicht empfehlen, aufgrund von Flexibilität und Widerstandsfähigkeit gegen Änderungen. Stellen Sie sich vor, dass in einer späteren Phase des Projekts eines dieser Szenarien eintritt

• Sie müssen einen Footer erzwingen, der am Ende des Dokuments „klebt“ (unten im Ansichtsfenster, wenn das Dokument kurz ist). Selbst wenn Sie die modernste Methode dafür verwenden können – mit Flexbox, benötigen Sie ein zusätzliches Wrapper <div>.
• Sie müssen die background-color der gesamten Seite festlegen. Normalerweise verhält sich jeder Hintergrund, den Sie auf dem <body> festlegen, so, als wäre er auf dem <html>-Element gesetzt, falls dieses nicht bereits einen Hintergrund hat. Nur eine seltsame Sache in CSS. Aber wenn Ihr <html>-Element bereits einen Hintergrund hat und Sie den Body auf etwas anderes setzen und der Body irgendwelche Beschränkungen in Bezug auf den Abstand hat, werden Hintergründe seltsam. Es ist eine knifflige Sache.

Ich würde schlussfolgern, dass es immer noch bewährte Praxis ist, ein zusätzliches <div> zur Implementierung eines CSS-Wrappers zu haben. Auf diese Weise müssen Sie den Wrapper nicht später hinzufügen und sich mit der Umstellung der Stile auseinandersetzen, wenn sich die Spezifikationsanforderungen später ändern. Schließlich sprechen wir nur von einem zusätzlichen DOM-Element.