Haupt / Software

So strukturieren Sie Medienabfragen in Sass

Praktisch jede Site wird jetzt mit mindestens einer Anspielung auf reaktionsschnelles Webdesign erstellt. Die Art und Weise, wie wir diese reaktionsschnellen Stile strukturieren, hängt direkt davon ab, wie komplex das Projekt in Zukunft sein wird, wenn Aktualisierungen vorgenommen werden und das Projekt an Größe zunimmt.

Trotzdem scheint es, als ob ein allgemein akzeptierter Ansatz, wie und wo diese Reaktionsstile zu strukturieren sind, von den Entwicklern noch konsequent übernommen werden muss. Obwohl dies bei weitem nicht so schlimm ist wie in den alten Zeiten von CSS, führt dies vor Präprozessoren und Benennungsmethoden zu einem inkonsistenten und oft chaotischen Ansatz bei der Strukturierung der Reaktionsstile für Elemente.

Beginnen Sie gerade mit Ihrer Website? Wähle ein Top Webseitenersteller und Web-Hosting Bedienung. Mit einem großen Team arbeiten? Stellen Sie sicher, dass Ihre Cloud-Speicher hält alle mit Ihrem Design-System auf dem Laufenden.

Was ist Sass?

CSS in der Vergangenheit

Um das Problem zu verstehen, mit dem wir konfrontiert sind, kehren wir zum Anfang zurück. Einer der Gründe, warum CSS-Präprozessoren wie Sass oder LESS überhaupt erst erstellt wurden, ist, dass CSS extrem chaotisch werden kann und bekanntermaßen schwer zu warten ist. Früher stellten wir fest, dass selbst kleine Websites nach einer Weile Zeilen für Zeilen mit CSS-Stilen aufwiesen, nur weil der Entwickler nicht sicher war, ob dies erforderlich war oder ob die Reste eines entfernten Features oder veralteten Elements gelöscht werden konnten.

Nehmen Sie das folgende Szenario als Beispiel:

.heading { background: #000000; }; .title { font-size: 16px; };  .title_small { font-size: 14px; } .title_alt { font-family: sans-serif; }

Obwohl Sie vielleicht denken, dass es sicher ist anzunehmen, dass das .title-Element in diesem Kontext der Titel für das .heading-Element ist, können Sie tatsächlich nicht ganz sicher sein, dass es nicht zum Stylen eines anderen title-Elements auf der Site verwendet wird . Wo wird die .title_alt-Klasse verwendet und wird sie noch benötigt oder verwendet? Sie können sehen, dass es selbst mit einem so einfachen Beispiel zu einer zeitaufwändigen Übung werden kann, all dies zu überprüfen, bevor Sie Änderungen vornehmen.

Aus diesem Grund würden viele Entwickler Zeit sparen, indem sie dem Element eine neue Klasse hinzufügen oder einen komplexeren CSS-Selektor verwenden, um die gewünschten Änderungen vorzunehmen, was wiederum die Komplexität des CSS für das nächste Mal erhöht, wenn eine Änderung erforderlich ist .

Präprozessoren, Namenskonventionen und modulares CSS

Dank der Möglichkeit, Stile zu verschachteln, Variablen zu verwenden, andere Klassen zu erweitern und vieles mehr, haben Präprozessoren die Art und Weise, wie wir CSS erstellen und verwalten, revolutioniert. Leider lösen sie das Problem der chaotischen, veralteten Stile, die sich im Laufe eines Projekts ausbreiten und wachsen, wenn es wie eine Infektion altert, nicht vollständig.

Es folgten Namenskonventionen und CSS-Methoden wie GUT , die, wenn sie angewendet werden, Stilen einen viel größeren Kontext verleihen.

In Kombination mit Variationen, Modifikationen und Stilen verschachtelter Elemente, die mithilfe von in sich geschlossen sind CSS-Module , ein wirklich starker Weg, um Ihre Stile zu strukturieren, wurde geboren.

Unten sehen Sie, wie diese Verbesserungen die Probleme lösen können, die bei unserem früheren Codebeispiel aufgetreten sind:

.heading { 	background: $black; }  .heading__title { 	font-size: 16px;  	&.heading__title--small { 		font-size: 14px; 	} }  .post__title--alt { 	font-family: sans-serif; }

Es ist sofort klar, dass die Titelstile hier speziell im Überschriftenelement enthalten sind. Sie können diese sicher entfernen / bearbeiten, ohne andere Elemente beeinflussen zu müssen. Sie können auch sehen, dass der kleine Titel eine Variation des Header-Titels war, der Alt-Titel-Stil jedoch für ein anderes Element.

Wenn Sie dieser Kombination aus Struktur und Benennungsmethode folgen, ist es meiner Meinung nach ziemlich einfach, saubere, leicht zu wartende CSS-Stile zu erstellen. Der Kontext kann schnell wiederhergestellt werden und in sich geschlossene CSS-Module können kopiert und in andere Projekte eingefügt oder problemlos geändert und entfernt werden.

Es scheint, als ob das Problem des unordentlichen und nicht wartbaren Codes gelöst wurde. Aber als Responsive Design immer relevanter wurde, stellte sich heraus, dass wir viele unserer Fehler immer wieder wiederholten und schlecht strukturierte, übermäßig komplexe Ansätze für die Erstellung von Responsive Websites entwickelten.

Bei der Lösung dieses Problems kommt das Sprudeln von Medienabfragen ins Spiel.

Responsive Style-Standorte

Dank der erwähnten Verbesserungen in unserem Ansatz zur Erstellung von CSS erlebe ich heutzutage immer dann, wenn ich ein Projekt erbe oder zusammenarbeite, selten die Angst oder Sorge, dass ich mich öffne, um in ein Feuer der Hölle der Spezifität oder der von mir verwendeten strukturellen Desorganisation zu geraten in solchen Situationen zu haben. Ich weiß jetzt, dass ich dank Benennungsmethoden relevante Klassen und Stile schnell finden und verstehen und dank Modular CSS meine Änderungen ohne unvorstellbare Konsequenzen für andere Elemente vornehmen kann.

Leider ist eine der Hauptursachen für Frustration, dass Reaktionsstile im gesamten Projekt immer noch uneinheitlich sind. Sie können durchaus in einer modularen Struktur enthalten sein und in einer Benennungsmethode entsprechend benannt werden, aber Projekt für Projekt sehe ich viele verschiedene Möglichkeiten, wie Entwickler ihre Reaktionsstile einbeziehen.

Einige erstellen beispielsweise einen separaten Sass-Teil mit dem Namen _mobile.scss oder _tablet.scss. Einige platzieren Medienabfragen am Ende der entsprechenden Datei in aufsteigender oder absteigender Reihenfolge, andere platzieren sie nur zufällig zwischen Stilen für andere Elemente. Bei diesem Ansatz tippe ich zwischen Dateien und scrolle zum oberen und unteren Rand von Dateien, um ein umfassendes Verständnis der Stile eines Elements über verschiedene Haltepunkte hinweg zu erhalten.

Medienabfrage sprudelt

Wie Sie sehen, gibt es viele Probleme, die zusammen dazu führen, dass der Entwickler mehr Zeit mit Änderungen / Ergänzungen verbringt, als tatsächlich benötigt wird.

Es dupliziert Stile und erschwert das Verwalten und Finden aller relevanten Stile für eine Komponente. Sie müssen an mehreren Speicherorten oder Dateien suchen, um ein vollständiges Bild der Stile eines Elements zu erhalten.
Das Element ist nicht mehr in sich geschlossen. Sie können es nicht einfach in einem anderen Projekt wiederverwenden oder sicher löschen / ändern, ohne dass nachteilige Auswirkungen oder verbleibender Code verbleiben.
Für jedes neue Projekt wird Zeit verschwendet, um herauszufinden, wie sich dieses Projekt den Reaktionsstilen nähert.
Das Wechseln zwischen Projekten wird schwieriger, da Sie in Ihrem Kopf zwischen Ansätzen wechseln müssen. Dies kann dazu führen, dass Projekte versehentlich eine Mischung von Ansätzen haben, was wiederum zu chaotischem CSS führt.

Die Lösung, die ich implementieren möchte, um dies zu beheben, heißt Media Query Bubbling. Der einfachste Weg, dies zu erklären, besteht darin, Medienabfragen als jede andere Variante Ihres modularen Elements zu betrachten. Das Gleiche wie eine BEM-Variationsklasse von .heading__title ist .heading__title - Variation. Dies bedeutet, dass die Medienabfrage genau wie Ihre Änderungsklassen darin verschachtelt sein sollte. Sehen Sie sich den folgenden Code als Beispiel an:

.header { background: $black; @media only screen and (min-width: 640px) { background: $white; } }

In diesem Beispiel können Sie an einer Stelle deutlich erkennen, dass der Hintergrund für die Kopfzeile bei 640 Pixel oder höher weiß wird. Indem Sie die Medienabfrage zusammen mit den Stilen des Elements in sich geschlossen haben, haben Sie erneut ein vollständig in sich geschlossenes Modul erstellt, das sicher wiederverwendet oder bearbeitet werden kann. Es ist nicht erforderlich, eine _mobile.scss-Datei zu überprüfen oder das Projekt nach anderen Erwähnungen der Klasse zu durchsuchen, um sicherzustellen, dass Sie alle Haltepunkte abgedeckt haben.

Verschachtelte Medienabfrage sprudelt

Wieder habe ich viele Variationen gesehen, wie Entwickler die Reaktionsstile ihrer Elemente strukturieren. Dies sollte nicht anders als das Stylen des übergeordneten Elements betrachtet werden, und alle Medienabfragen und -stile sollten in sich geschlossen sein. Siehe folgendes Beispiel:

.heading__title { 	font-size: 16px;  	@media only screen and (min-width: 640px) { 		font-size: 18px; 	}  	&.heading__title--small { 		font-size: 14px;  		@media only screen and (min-width: 640px) { 			font-size: 16px; 		} 	} }

Sie können sehen, dass die Schriftgröße für den Titel 'Überschrift__' größer wird, wenn das Ansichtsfenster 640 Pixel oder größer ist, und wie sich die kleinere Variation des Überschriftentitels ebenfalls vergrößert, aber als kleiner als Standard definiert wird. Bei dieser Technik ist es sehr wichtig, die BEM-Methode stark anzuwenden, um sicherzustellen, dass Sie nicht mehrere Ebenen tief verschachteln. Stellen Sie beispielsweise sicher, dass das Element .heading__title ein in sich geschlossenes CSS-Modul ist, das nicht unnötig im Element .heading verschachtelt ist.

Sauberere Reaktionsstile

Indem wir das, was wir aus den Vorteilen von BEM und Modular CSS gelernt haben, auf Medienabfragen innerhalb derselben Struktur anwenden, verhindern wir, dass wir die Fehler unserer Vergangenheit wiederholen.

Wenn Sie auf diese Weise mit Medienabfragen arbeiten, müssen Sie keine völlig neue Methodik oder Struktur für Ihre Stile erlernen. Grundsätzlich verwenden wir den modularen CSS-Ansatz und wenden ihn auf unsere Medienabfragen an, die sich ziemlich natürlich anfühlen sollten.

Wir erstellen außerdem saubereres CSS mit weniger doppelten CSS-Klassen über Dateien hinweg und sparen Entwicklungszeit, da bei Änderungen nicht mehr mehrere Speicherorte überprüft werden müssen.

Dieser Artikel wurde ursprünglich in veröffentlicht Netz , das Magazin für professionelle Webdesigner und Entwickler. Abonnieren Sie net hier .

Zum Thema passende Artikel: