Ein CSS-Rasierer

Ein „Rasiermesser“ in der Philosophie ist ein methodisches Prinzip, das hilft, komplexe Entscheidungen zu vereinfachen, indem unnötige Hypothesen oder Optionen eliminiert werden.

Das bekannteste davon ist Occams Rasiermesser, das dazu rät, Entitäten oder Hypothesen nicht über die Notwendigkeit hinaus zu vervielfachen: Wählen Sie die einfachste Erklärung, die funktioniert.

Angewandt auf CSS würde diese Idee vorschlagen, unsere Auswahl an Stileigenschaften zu optimieren, um Seiten auf einfache und effektive Weise zu gestalten und Techniken anzuwenden, die Layoutprobleme ohne unnötige Komplexität lösen.

Um den philosophischen Rasiermesser auf CSS anzuwenden, geht es darum, die einfachsten und effektivsten Lösungen zur Lösung von Layoutproblemen auszuwählen, ohne den Code mit unnötigen Regeln zu überladen. So können Sie Ihre Auswahl an CSS-Eigenschaften effizient strukturieren und dabei einen progressiven Ansatz verfolgen, um die Einfachheit beizubehalten und gleichzeitig komplexe Layoutanforderungen zu bewältigen:

Priorisieren Sie den normalen Fluss

Der normale Ablauf ist die natürliche Art und Weise, wie HTML-Elemente ohne besonderen Eingriff auf der Seite angeordnet werden. Es ist die einfachste Grundlage und sollte Ihr Ausgangspunkt für die Erstellung eines Layouts sein.

• Blöcke: Elemente auf Blockebene (z. B.
  ,

  ,

  usw.) werden vertikal gestapelt und nehmen die gesamte verfügbare Breite ein.

• Inline: Inline-Elemente (wie , ) werden nebeneinander angeordnet und folgen dem horizontalen Textfluss.

Beginnen Sie immer damit, zu prüfen, ob das grundlegende Layout einfach durch die Arbeit mit diesen natürlichen Verhaltensweisen erreicht werden kann. Zum Beispiel:

• Passen Sie die Abmessungen mithilfe der maximalen Breite oder maximalen Höhe für Container oder Bilder erst an, nachdem der Inhalt vorhanden ist.
• Verwenden Sie Typografieeigenschaften (Schriftgröße, Zeilenhöhe usw.), um Inhalte zu organisieren.

Wechseln Sie bei Bedarf zu Flexbox oder Grid

Wenn der normale Ablauf nicht ausreicht, sind Flexbox und CSS Grid leistungsstarke Tools für die Handhabung komplexerer Layouts. Verwenden Sie sie mit Bedacht und vermeiden Sie unnötige Komplexität in der Struktur:

• Flexbox ist ideal für eindimensionale Layouts (entweder eine Zeile oder eine Spalte):

  • Um beispielsweise ein Element sowohl horizontal als auch vertikal innerhalb eines Containers zu zentrieren, verwenden Sie display: flex und justify-content: center; align-items: center; wird ausreichen.
  • Flexbox zeichnet sich durch einfache Layouts aus, bei denen die Beziehung zwischen Elementen linear ist (z. B. Navigationsleisten, ausgerichtete Karten usw.).

• CSS Grid eignet sich besser für zweidimensionale Layouts (Anordnen von Elementen in Zeilen und Spalten):

  • Verwenden Sie Grid für komplexere Layouts wie Bildergalerien oder Datentabellen.
  • Grid ist leistungsfähiger als Flexbox für Layouts, bei denen Sie sowohl Zeilen als auch Spalten gleichzeitig steuern müssen.

Die Idee besteht darin, Flexbox oder Grid nur dann einzuführen, wenn Sie die Grenzen des normalen Ablaufs erreichen, und zu vermeiden, sie überall ohne wirkliche Notwendigkeit anzuwenden.

Weitere Informationen finden Sie in diesen hervorragenden Leitfäden von Josh Comeau:

• Eine interaktive Anleitung zu Flexbox.
• Ein interaktiver Leitfaden zum CSS-Grid.

Griffabstand mit Polsterung und Rand

Um die Abstände zwischen Elementen zu organisieren, ist es wichtig, die Unterschiede zwischen Polsterung und Rand zu verstehen und diese Eigenschaften methodisch anzuwenden:

• Padding: Verwaltet den Abstand innerhalb des Elements zwischen seinem Inhalt und seinem Rand. Verwenden Sie Polsterung, um Platz zwischen dem internen Inhalt und dem Rand eines Containers zu schaffen, z. B. bei einer Schaltfläche oder einer Karte.

• Rand: Verwaltet den Abstand außerhalb des Elements, zwischen dem Rand des Elements und den umgebenden Elementen. Verwenden Sie den Rand, um Elemente innerhalb des Flusses voneinander zu trennen.

Im Allgemeinen verwenden Sie Polsterung für internen Raum und Rand für externen Raum. Oft ist es klarer, den Rand zu verwenden, um den Abstand zwischen unabhängigen Elementen zu steuern und den Abstand zu reservieren, um den Platz innerhalb von Containerelementen anzupassen.

Siehe diesen Artikel von Nathan Curtis für einen visuellen Beweis: Raum in Designsystemen.

Verwenden Sie Positionswerte für die Schichtung

Die Positionierung in CSS ermöglicht dynamischere Layouts, es ist jedoch wichtig, eine übermäßige Verwendung zu vermeiden. So wählen Sie zwischen den verschiedenen Positionswerten:

• Position: statisch (Standard): Elemente werden basierend auf dem normalen Fluss positioniert.

• Position: relativ: Das Element bleibt im normalen Fluss, kann aber von seiner ursprünglichen Position verschoben werden. Verwenden Sie es, wenn Sie ein Element leicht verschieben möchten, ohne den Fluss anderer Elemente zu beeinträchtigen.

• Position: absolut: Das Element wird aus dem normalen Fluss entfernt und relativ zu seinem ersten positionierten Vorfahren positioniert (einer mit Position: relativ, absolut oder fest). Es ist nützlich, um Elemente übereinander zu schichten oder etwas präzise in einem Container zu positionieren, ohne andere zu beeinflussen.

• Position: fest: Ähnlich wie absolut, aber das Element wird relativ zum Browserfenster positioniert und bleibt beim Scrollen fixiert (z. B. eingeklemmte Navigationsleisten, Pop-ups).

• Position: klebrig: Eine Mischung aus relativ und fest. Sie ermöglicht es einem Element, im Fluss zu bleiben, bis eine bestimmte Bedingung erfüllt ist (z. B. wenn es einen bestimmten Bildlaufpunkt erreicht wird behoben). Dies ist nützlich für Dinge wie Navigationsleisten, die nach einigem Scrollen sichtbar bleiben müssen.

Setzen Sie die Positionierung mit Bedacht in bestimmten Fällen ein, in denen der normale Fluss und Flexbox/Grid die Anforderungen nicht erfüllen können.

Ein konkretes Beispiel: Sticky Footer, gelöst durch Flexbox.

Wählen Sie geeignete Größen für ein flüssiges und ansprechendes Layout

Um sicherzustellen, dass das Layout flüssig und reaktionsfähig bleibt, verwenden Sie flexible Einheiten wie:

• %: Prozentsätze beziehen sich auf die Größe des übergeordneten Containers, sodass sich Elemente an unterschiedliche Bildschirmgrößen anpassen können.
• em und rem: Diese Einheiten sind relativ zur Schriftgröße des übergeordneten Elements (oder zur Größe des Stammelements für rem). Sie eignen sich ideal zum Erstellen adaptiver Größen, insbesondere für Abstände (Rand, Polsterung) und andere Abmessungen als 100 % (Breite, Höhe).
• vw und vh: Diese Einheiten beziehen sich auf die Größe des Browserfensters (1 vw = 1 % der Fensterbreite, 1 vh = 1 % der Höhe). Verwenden Sie sie für Layouts, die sich an die gesamte Bildschirmgröße anpassen.

Vermeiden Sie feste Einheiten wie px, es sei denn, dies ist unbedingt erforderlich, um sicherzustellen, dass das Design auf allen Geräten flüssig bleibt.

Ein toller Anwendungsfall: flüssige Typografie.

Kurz gesagt, mein CSS Razor

1. Beginnen Sie mit dem normalen Ablauf: Erstellen Sie eine Layoutgrundlage mit Block- und Inline-Elementen und passen Sie einfach Anzeige, Breite und Höhe an.
2. Verwenden Sie Flexbox oder Grid sparsam: Wechseln Sie zu Flexbox für eindimensionale Layouts oder Grid für komplexere zweidimensionale Layouts, wenn der normale Fluss nicht ausreicht.
3. Gehen Sie mit Abständen intelligent um: Verwenden Sie den Rand, um Elemente voneinander zu trennen, und den Abstand, um den Platz innerhalb von Containern zu verwalten.
4. Elemente nach Bedarf positionieren: Verwenden Sie „relativ“ für kleinere Anpassungen, „absolut“ oder „fest“ für Elemente außerhalb des normalen Flusses und behalten Sie alles andere statisch bei.
5. Fließende Einheiten priorisieren: Verwenden Sie relative Einheiten wie %, em, rem, vw und vh, um ein flüssiges und anpassungsfähiges Layout zu gewährleisten.

Wenn Sie diesem methodischen Ansatz folgen und so viel wie möglich vereinfachen, können Sie effektive Seiten entwerfen, ohne in die Fallen der Überkomplexität zu tappen und gleichzeitig die Wartbarkeit des Codes sicherzustellen.

Was ist Ihr CSS-Razor?

Das obige ist der detaillierte Inhalt vonEin CSS-Rasierer. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!