Hi Freunde der Webentwicklung. In Zeiten von Responsive Webdesign und Mobile First müssen wir als Frontend Developer in verschiedenen Geräten und Auflösungen denken. Hier stellt sich dann die Frage wie die Stylesheets organisiert und strukturiert werden. Gerade in größeren Projekten mit einer wachsenden Codebasis möchte man ja eine gewisse Ordnung schaffen. Ich stelle euch einmal die gängigen Praktiken vor und ihr könnt die für euch interessanteste Lösung herauspicken.
Lineare Media Queries
Die wohl zunächst einfachste Variante: Einfach die Deklarationen wie gehabt notieren und dann am Ende des Stylesheets die einzelnen Breakpoints und Media Queries definieren. Hierin können wir den Elementen Eigenschaften wegnehmen, um sie für mobile Geräte fit zu machen. Das können z. B. Schriftgrößen und Abstände sein die im Standard-Sytle noch deutlich größer bemessen sind. Dieser Lösungsansatz entspricht jedoch weniger dem Mobile First Gedanke: Die oben festgelegten Styles sind eher für Desktops gedacht. Nun kann der Web Worker das Prinzip hinter dieser Variante auch umkehren und erst mobile Styles definieren um dann in den Breakpoints die Eigenschaften für größere Screens zu setzen.
Wie man es auch dreht und wendet - diese Art des Organisierens wird auf Dauer, je mehr Code die Media Queries umfasst, unübersichtlich. Einzelnen Bausteine, Inhaltselemente sind in den Queries schwer zu finden.
Vertical Media Queries
Bei vertikalen Media Queries legt der Frontend Entwickler standardmäßig nur die grundlegenden Styles fest und fügt dann in den Breakpoints für die einzelnen Geräteklassen Eigenschaften für räumliche Beschaffenheit des Objekts fest. Bspw. für Überschriften:
h1 {
font-family: Arial;
font-weight: bold;
}
@media (max-width: 320px) {
h1 {
font-size: 12px;
line-height: 18px;
}
}Diese Art des Codings ist
- übersichtlicher
- baut Komplexität ab
- schneller beim Rendering - gerader größerer Stylesheets
- und es ist für den Entwickler einfacher Eigenschaften hinzuzufügen statt ständig welche zu entfernen
Media Queries Splitting
Hierbei werden pro Inhaltselement und Inhaltsgruppe Media Queries angelegt. Das erhöht zwar die Anzahl der Media Queries, steigert aber wiederum die Übersichtlichkeit, da sonst nach bestimmten Inhalten in den Queries gesucht werden muss. Das kann wie folgt aussehen:
@media (max-width: 320px) {
/* Style fuer Empfehlungen */
[...]
}
@media (max-width: 320px) {
/* Style fuer den Warenkorb */
[...]
}
@media (max-width: 480px) {
/* Style fuer Empfehlungen */
[...]
}
@media (max-width: 480px) {
/* Style fuer Warenkorb */
[...]
}Conditional Stylesheets
Zum Schluss noch die Möglichkeit Stylesheets je nach Displaygröße einzubinden. Es ist nämlich möglich im media-Attribut des einzubindenden Stylesheets Breakpoints zu definieren:
<link rel="stylesheet" media="screen and (max-width: 950px)" href="max950.css">
Das ist natürlich auch eine interessante Lösung - so werden nur jene Stylsheets geladen, die überhaupt nur benötigt werden. Ähnlich wie Conditional Loading von JavaScript-Modulen.
Und, welche Variante bevorzugt ihr so und warum?