Umgang mit z-index

Das Verwalten von z-index über große Websites hinweg kann eine echte Qual sein. CSS ist schwer zu testen, daher ist es notorisch einfach, eine Änderung vorzunehmen, die dazu führt, dass beispielsweise eine wichtige Benutzeroberfläche unter etwas Verstecktes verschwindet.

Wenn Sie einen CSS-Präprozessor verwenden, können wir es vielleicht auf eine spezielle Weise handhaben.

Eine Idee aus der Spieleprogrammierung

Die vertikale Stapelreihenfolge ist nicht nur ein Problem für das Webdesign, sondern auch ein Hauptproblem für Spieleentwickler. Sie arbeiten in noch dynamischeren Umgebungen, in denen es entscheidend ist, welche Dinge über anderen erscheinen.

In einem kurzen Gespräch mit Ryan Campbell, der sich in die Welt der Spiele einarbeitet, sagte er, dass die übliche Methode eine Enum-Variable (ähnlich einem benannten Array von Konstanten) sei, auf die man dann bei Bedarf verweist.

Hier ist ein Beispiel für Code, den er verwenden könnte

typedef enum : uint16_t {
  WorldLayerGround             = 100,
  WorldLayerBelowCharacter     = 200,
  WorldLayerAboveCharacter     = 400,
  WorldLayerTop                = 800,
  WorldLayerCount              = 1600
} WorldLayer;

Das ist in einer Datei definiert, die der Deklaration von Konstanten für das Spiel gewidmet ist. Beachten Sie, wie

1. Sie sind alle zusammen deklariert
2. Zwischen den Zahlen ist Platz gelassen

Es ist ziemlich üblich, dass Leute auch im Webdesign z-index in Hunderterbereichen nummerieren. Die Idee ist, dass man später etwas dazwischen schieben könnte, wenn nötig, was bei 1, 2, 3 usw. nicht möglich wäre, da z-index keine Dezimalzahlen unterstützt. Aber selten sieht man z-index so gruppiert deklariert. Klingt für mich nach einer cleveren Idee!

Gruppierung

Die Idee ist, dass der gesamte Code, der die vertikale Stapelung steuert, an einem Ort ist. Sie könnten all diese Dinge zusammenlegen.

.modal {
  z-index: 9000;
}
.overlay {
  z-index: 8000;
}
.header {
  z-index: 7000;
}

Aber davon bin ich kein großer Fan. Ich mag es nicht, Selektoren in Stylesheets zu duplizieren, nur zur Organisation. Nur eine persönliche Vorliebe. Wenn ich finde, wo eine Klasse definiert ist, sind dort alle Dinge, die diese Klasse tut.

Vielleicht können wir dasselbe tun, aber nur mit den Werten...

Ein z-index Partial

Vielleicht ist die mit Abstand nützlichste Funktion von Präprozessoren die Möglichkeit, Includes zu nutzen. Mehrere Dateien zu einer einzigen Ausgabedatei zusammenzufügen. Das bedeutet, Sie können Ihr CSS so organisieren, wie es für Sie am sinnvollsten ist, was fast sicher bedeutet, es in kleine, modulare Teile zu zerlegen.

Vielleicht haben Sie bereits eine variables.styl oder constants.less oder so etwas. Sie könnten noch modularer werden und eine Datei nur zur Verwaltung von z-index haben. In SCSS beginnen die typischen Namenskonventionen für Dateien, die nur zum Einbinden gedacht sind, mit einem Unterstrich, also würden wir eine _zindex.scss erstellen.

In dieser Datei würden Sie Variablen deklarieren, die alle z-index-Werte enthalten, die Sie auf der gesamten Website verwenden.

$zindexModal   : 9000;
$zindexOverlay : 8000;
$zindexHeader  : 7000;

Dann haben Sie in Ihrer globalen Sammlung von Includes für andere SCSS-Dateien immer Folgendes verfügbar

@import "zindex";

Und verwenden Sie sie nach Bedarf

.header {
   z-index: $zindexHeader;
}

Die Idee wäre, **diese Sache voll durchzuziehen**. Deklarieren Sie z-index nirgendwo, ohne dafür eine Variable zu erstellen und sie im Stack in der Datei _zindex.scss zu platzieren.

Maps könnten sauberer sein

Gleiche Idee, aber unter Verwendung einer Sass-Map anstelle einzelner globaler Variablen

$zindex: (
  modal     : 9000, 
  overlay   : 8000,
  dropdown  : 7000,
  header    : 6000,
  footer    : 5000
);

.header {
  z-index: map-get($zindex, header);
}

---

Ich denke, ich werde Websites auf dieses System umstellen. Ich sehe keine Nachteile und viele Vorteile.