So strukturieren Sie Medienabfragen in SASS

Sep 13, 2025

wie man

Praktisch jede Site ist jetzt mit mindestens einem Nicken zum ansprechenden Webdesign gebaut. Die Art und Weise, wie wir diese responsiven Stile strukturieren, hat eine direkte Beziehung zu dem, wie komplex das Projekt darin bestehen, in der Zukunft zu warten und zu bearbeiten, da Updates erfolgt und das Projekt in der Größe wächst.

Trotzdem scheint es, als ob er ein weithin akzeptierter Ansatz für die WIE und Woher, wohin diese responsiven Stile strukturiert werden soll, noch von Entwicklern konsequent angenommen werden muss. Obwohl nirgendwo in der Nähe so schlecht wie "die alten Tagen" von CSS, vor Präprozessoren und Namensmethoden, verursacht dies einen inkonsistenten und oft unordentlichen Ansatz, um die responsiven Stile für Elemente zu strukturieren.

Erste Schritte mit Ihrer Site? Wählen Sie eine Top Webseitenersteller und Web-Hosting Bedienung. Mit einem großen Team arbeiten? Stellen Sie sicher, dass Ihre Cloud-Speicherung. Hält alle mit Ihrem Designsystem auf dem Laufenden.

Was ist sass?

CSS in der Vergangenheit

Um das Problem zu verstehen, denen wir stehen, gehen wir zurück an den Anfang. Einer der Gründe, warum CSS-Präprozessoren wie SASS oder weniger an erster Stelle erzeugt wurden, liegt an der ersten Stelle, weil CSS extrem unordentlich werden kann und berühmt ist schwer zu warten. Wir haben festgestellt, dass nach einer Weile auch kleine Websites auf Zeilen von CSS-Stilen Linien waren, an denen der Entwickler nicht sicher war, nur weil der Entwickler nicht sicher war, ob es erforderlich war, ob es erforderlich war, oder die Überreste eines entfernten Merkmals oder des veralteten Elements, das gelöscht werden konnte.

Nehmen Sie das folgende Szenario als Beispiel:

 .eheading {Hintergrund: # 000000; };
.Title {Schriftgröße: 16px; };
.Title_small {Schriftgröße: 14px; }
.title_alt {font-familie: sans-serif; }

Obwohl Sie denken, dass es sicher ist, dass es angenommen wird, dass das .title-Element in diesem Zusammenhang der Titel für das. Kopf-Element ist, können Sie tatsächlich nicht ganz sicher sein, dass es nicht verwendet wird, dass es nicht verwendet wird, um kein anderes Titelelement auf der Website zu stylen . Wohin ist auch .Title_alt-Klasse verwendet und ist es noch erforderlich oder verwendet? Sie können sehen, wie selbst mit einem solchen einfachen Beispiel es zu einer zeitaufwendigen Übung werden kann, um das All dies zu überprüfen, bevor Sie Änderungen vornehmen.

Aus diesem Grund sparen viele Entwickler Zeit, indem er dem Element eine neue Klasse hinzugefügt oder mit einem komplexeren CSS-Selektor verwendet wird, um die Änderungen, die sie gewünscht haben, die die Komplexität der CSS zum nächsten Mal erhöhte, wenn eine Änderung erforderlich war .

Präprozessoren, Namenskonventionen und modulare CSS

Dank der Fähigkeit zur Nest-Styles, verwenden Sie Variablen, erweitern Sie andere Klassen und mehr, revolutionierten Vorverarbeitungsfristen die Art und Weise, wie wir CSS erstellen und aufrechterhalten. Leider lösen sie das Problem unordentlicher, veralteter Styles nicht vollständig, die sich im gesamten Projekt ausbreiten und wachsen, da es sich um eine Infektion ändert.

Entlang kamen Namenskonventionen und CSS-Methoden wie BEM. , die beim Anwenden ein viel größerer Kontext der Stile ergibt.

In Kombination mit Variationen, Modifikationen und den Arten von verschachtelten Elementen, die von der Verwendung in sich enthalten sind CSS-Module. Eine wirklich starke Art, Ihre Stile zu strukturieren, wurde geboren.

Nachfolgend können Sie sehen, wie diese Verbesserungen die Probleme lösen können, die wir mit unserem früheren Code-Beispiel angetroffen haben:

 .eheading {
Hintergrund: $ schwarz;
}

.eheading__titel {
Schriftgröße: 16px;

& amp; .eheading__title - klein {
Schriftgröße: 14px;
}
}

.Post__title - Alt {
Schriftfamilie: Sans-Serif;
}

Es ist sofort klar, dass die Titelstile hier speziell innerhalb des Überschriftselements enthalten sind. Sie können diese ohne Sorge sicher entfernen / bearbeiten, um andere Elemente zu beeinträchtigen. Sie können auch sehen, dass der kleine Titel eine Variation des Header-Titels war, aber der Alt-Titel-Stil war für ein anderes Element.

Wenn meiner Meinung nach diese Kombination von Struktur- und Namensmethodik folgen, ist es ziemlich einfach, saubere, leicht wartbare CSS-Stile zu erstellen. Der Kontext kann schnell gewonnen und in sich selbst enthaltene Module von CSS kopiert und in anderen Projekten eingefügt oder mit Leichtigkeit geändert und entfernt werden.

Es scheint, als ob das Problem des unordentlichen und unmackierbaren Codes gelöst wurde. Als responsives Design wurde jedoch immer relevanter, als er sich deutlich, dass wir viele unserer Fehler wieder wiederholten und schlecht strukturierte, übermäßig komplexe Ansätze zur Erstellung von responsiven Websites erstellen.

Das Problem dieses Problems ist, wo Medienabfragen sprudeln.

Responsive Stilstandorte.

Dank der genannten Verbesserungen in unserem Ansatz zur Erstellung von CSS, wenn ich heutzutage auf einem Projekt erbst oder arbeite, erfahre ich selten die Angst oder Sorge, dass ich mich eröffnet habe, um sich in ein Brand der Spezifität der Hölle oder der strukturellen Denorganisation zu fallen, die ich verwendet habe in diesen Situationen haben. Ich weiß jetzt, dass ich dank der Namensmethoden schnell relevante Klassen und Stile schnell finden und verstehen kann und meine Änderungen ohne unvorstellbare Konsequenzen auf andere Elemente dank modularer CSS vornehmen kann.

Leider ist eine Hauptursache für Frustration, die ich begegnet, dass reaktionsfrequente Stile im gesamten Projekt uneinheitlich liegen. Sie können in einer modularen Struktur in einer modularen Struktur enthalten sein und in einer Namensmethode angemessen benannt werden, aber Projekt durch Projekt sehe viele verschiedene Möglichkeiten, wie Entwickler ihre responsiven Stile aufnehmen können.

Einige erstellen beispielsweise ein separates SASS-Teil namens _mobile.scss oder _tablet.scss. Einige Platzieren Sie Medienabfragen am unteren Rand der relevanten Datei in aufsteigender oder absteigender Reihenfolge und andere platzieren sie einfach zufällig zwischen den Stilen für andere Elemente. Mit diesem Ansatz finde ich mich zwischen den Dateien und blättern Sie nach oben und unten von Dateien, um ein volles Verständnis für die Stile eines Elements in verschiedenen Haltepunkten zu erlangen.

Medienabfrage brubling.

Wie Sie sehen, gibt es viele Probleme damit, dass alles kombiniert, damit der Entwickler mehr Zeit damit verbringen, an Änderungen / Änderungsanträgen zu arbeiten, als tatsächlich erforderlich ist.

Es dupliziert Stile und macht den Prozess, alle relevanten Styles für eine Komponente härter zu halten und zu finden. Sie müssen an mehreren Standorten oder Dateien suchen, um ein vollständiges Bild von den Stilen eines Elements zu erhalten.
Das Element ist nicht mehr in sich selbst enthalten. Sie können es nicht problemlos in einem anderen Projekt wiederverwenden oder sicherlich ohne unerwünschte Auswirkungen oder Anhängercode löschen / ändern.
Für jedes neue Projekt wird die Zeit verschwendet, wie dieses Projekt ansprechende Stile nähert.
Das Umschalten zwischen Projekten wird schwieriger, da Sie zwischen Ansätzen in Ihrem Kopf wechseln müssen. Dies kann dazu führen, dass Projekte versehentlich mit einer Mischung von Ansätzen verfügen, was wiederum zu einem unordentlichen CSS führt.

Die Lösung, die ich gerne umsetzen möchte, um dies zu beheben, wird als Medienabfrage bezeichnet. Der einfachste Weg, um dies zu erklären, besteht darin, Medienabfragen in Betracht zu ziehen, um wie jede andere Variation Ihres modularen Elements zu sein. Das gleiche wie eine BEM-Variation-Klasse von .Heading__title ist zum Beispiel. Kopfköpfe__Title-Variation. Dies bedeutet, dass die Medienabfrage innerhalb, genauso wie Ihre modifizierenden Klassen verschachtelt werden sollte. Siehe den folgenden Code als Beispiel dafür:

 .eheHer {
Hintergrund: $ schwarz;

@Media nur Bildschirm und (Min-Breite: 640px) {
Hintergrund: $ weiß;
}
}

In diesem Beispiel können Sie an einem Ort klar sehen, dass der Hintergrund für den Header bei 640px oder höher in Weiß ändert. Durch sich selbst mit der Medienabfrage zusammen mit den Stilen des Elements haben Sie erneut ein völlig in sich geschlossenes Modul erstellt, das wiederverwendet oder mit Vertrauen bearbeitet werden kann. Es ist nicht erforderlich, eine _mobile.scss-Datei zu überprüfen oder das Projekt für andere Erwähnungen der Klasse zu suchen, um sicherzustellen, dass Sie alle Haltepunkte abgedeckt haben.

Verschachtelte Medienabfrage sprudelnde

Ich habe wieder viele Variationen gesehen, wie Entwickler sich entscheiden, die ansprechenden Stile ihrer Elemente zu strukturieren. Dies sollte nicht anders als das Styling des übergeordneten Elements angesehen werden, und alle Medienabfragen und -stile sollten in sich selbst enthalten sein. Siehe das folgende Beispiel:

 .eheading__title {
Schriftgröße: 16px;

@Media nur Bildschirm und (Min-Breite: 640px) {
Schriftgröße: 18px;
}

& amp; .eheading__title - klein {
Schriftgröße: 14px;

@Media nur Bildschirm und (Min-Breite: 640px) {
Schriftgröße: 16px;
}
}
}

Sie können sehen, dass die Schriftgröße für die Überschrift __Title größer wird, wenn der Ansichtsfenster 640px oder größer ist und wie die geringere Variation des Überzugstiters ebenfalls vergrößert, jedoch als kleiner als Standard definiert ist. Mit dieser Technik ist es sehr wichtig, die BEM-Methodik stark anzusetzen, um sicherzustellen, dass Sie nicht mehr als tiefe Nächsteile nisten. Stellen Sie beispielsweise sicher, dass das. Kopfkopf-__-Title-Element ein in sich geschlossenes CSS-Modul ist, das nicht unnötig innerhalb des. Kopfkennelements verschachtelt ist.

Cleaner Responsive Styles.

Indem wir, was wir von den Vorteilen von BEM und Modular CSS erfahren haben, und anwenden, um sie in Medienabfragen innerhalb derselben Struktur anzuwenden, stoppen wir uns daran, die Fehler unserer Vergangenheit wiederholen zu können.

Wenn Sie mit Medienabfragen auf diese Weise arbeiten, müssen Sie keine völlig neue Methodik oder Struktur für Ihre Stile lernen. Wir nehmen grundsätzlich den modularen CSS-Ansatz und wenden sie an unsere Medienabfragen, die sich ziemlich natürlich fühlen sollten.

Wir erstellen außerdem sauberere CSS mit weniger Duplizierungen von CSS-Klassen über Dateien und sparen Sie Entwicklungszeit, indem wir die Notwendigkeit, mehrere Standorte bei der Abgabe von Änderungen zu überprüfen, zu überprüfen.

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

Zum Thema passende Artikel:

Erstellen Sie coole UI-CSS-Animationen mit SASS
10 Dinge, die Sie nie wussten, dass Sie mit Sass tun könnten
Webdesign-Tools, mit denen Sie sügend arbeiten können

So strukturieren Sie Medienabfragen in SASS

CSS in der Vergangenheit

Präprozessoren, Namenskonventionen und modulare CSS

Responsive Stilstandorte.

Medienabfrage brubling.

Verschachtelte Medienabfrage sprudelnde

Cleaner Responsive Styles.

wie man - Die beliebtesten Artikel

10 Möglichkeiten, bessere 3D-Weltumgebungen aufzubauen

So implementieren Sie leichte oder dunkle Modi in CSS

Erstellen Sie Collage-Effekte in den Browser mit CSS

So machen Sie einen Mahlstick zum Malen

Zeichnen Sie einen Bad-Ass Geisha

8 Wesentliche WordPress-Sicherheitsgeheimnisse

So erstellen Sie Illustrator-Grafiken für After Effects

Farbe wie ein Impressionist

Kategorien