Heim >Web-Frontend >CSS-Tutorial >Verwenden von Helferklassen zum Trocknen und Skalieren von CSS
Verwenden von Helferklassen zum Trocknen und Skalieren von CSS
- Jennifer AnistonOriginal
- 2025-02-25 19:47:15318Durchsuche
Sie starten ein neues Webprojekt und suchen nach einer neuen CSS -Methodik, mit der Sie Ihren Code skalieren können. Eine wachsende Reihe von Techniken zum Schreiben modularer CSS ist verfügbar, einschließlich SMACSS, BEM und einer Reihe anderer ähnlicher Methoden, die alle auf objektorientiertem CSS (OCSS) basieren. Wie Sie sehen können, gibt es viele Techniken zum Schreiben und Organisieren von CSS.
Neben all diesen Methoden gibt es etwas, das uns helfen kann, trockene weniger wiederholte Code zu schreiben: Helferklassen (auch Dienstprogrammklassen genannt).
Dieses Konzept wurde vor einiger Zeit in Thierry Koblentz 'Artikel über das Smashing Magazine diskutiert, aber ich dachte, ich würde die Methode in meinen eigenen Worten hier erklären.
Key Takeaways
- Helferklassen oder Dienstprogrammklassen können dazu beitragen, die Wiederholung in CSS zu entfernen, indem eine Reihe abstrakter Klassen erstellt werden, die wiederholt für HTML -Elemente verwendet werden können. Dies macht den Code wiederverwendbarer und skalierbarer für zukünftige Ergänzungen.
- Helferklassen sind dafür verantwortlich, einen Job zu erledigen und ihn gut zu machen. Beim Erstellen einer neuen Komponente müssen Sie lediglich einige Klassen miteinander kombinieren, um sie zu erstellen.
- Helferklassen können zum Verwalten von Rändern und Polsterung, Breite und Höhe, Position und Z-Index verwendet werden, Elemente, Typografie, Farben, Listen, Ränder und Anzeigewerte ausrichten. .
- Helferklassen können in Kombination mit CSS -Präprozessoren wie Sass oder weniger verwendet werden, um diese Klassen zu erstellen und zu verwalten.
- Während Helferklassen viele Vorteile bieten, können sie zu HTML -Blähungen führen, da Sie möglicherweise mehrere Klassen auf ein einzelnes Element anwenden. Dadurch kann Ihr HTML -Code schwieriger zu lesen und zu warten.
Was sind Helferklassen?
Helferklassen können dazu beitragen, Wiederholungen zu entfernen, indem eine Reihe abstrakter Klassen erstellt werden, die immer wieder bei HTML -Elementen verwendet werden können. Jede Helferklasse ist dafür verantwortlich, einen Job zu erledigen und ihn gut zu machen. Wenn Sie dies tun, wird Ihr Code für viele Funktionen, die in Zukunft hinzugefügt werden, wiederverwendbarer und skalierbarer. Wenn Sie also eine neue Komponente erstellen möchten, müssen Sie nur einige Klassen miteinander kombinieren, um sie zu erstellen.
„Code wie LEGO behandeln. Brechen Sie den Code in die kleinstmöglichen kleinen Blöcke ein. “ - @csswizardry (über @stubbornella) #BTConf - Smashing Magazine (@SmashingMag) 27. Mai 2013 Sehen wir uns ein einfaches Beispiel dafür an, wie Nutzklassen aussehen und wie wir sie verwenden können. Schauen Sie sich den folgenden Codeausschnitt an:
<span><span>.left</span> { float: left; }
</span><span><span>.right</span> { float: right; }
</span>
<span><span>.text-left</span> { text-align: left; }
</span><span><span>.text-right</span> { text-align: right; }
</span><span><span>.text-center</span> { text-align: center; }</span>
Hier haben wir eine Reihe von CSS -Regeln erstellt, die wir später beim Erstellen neuer Komponenten verwenden können. Wenn Sie beispielsweise einige Inhalte nach links ausrichten möchten, können Sie die Text-Links-Klasse verwenden. Ebenso können Sie die linken oder rechten Klassen verwenden, um Elemente in die erforderliche Richtung zu schweben.
Sehen wir uns ein weiteres Beispiel für eine Box an, die sich links mit dem inneren Inhalt befinden muss.
wir machen normalerweise so etwas:
<span><span><span><div</span> class<span>="box"</span>></span> </span><span><span><span></div</span>></span></span>
mit diesem CSS:
<span><span>.left</span> { float: left; }
</span><span><span>.right</span> { float: right; }
</span>
<span><span>.text-left</span> { text-align: left; }
</span><span><span>.text-right</span> { text-align: right; }
</span><span><span>.text-center</span> { text-align: center; }</span>
Stattdessen können wir dasselbe mit wiederverwendbaren und Einzelverantwortlichen Helferklassen erreichen:
<span><span><span><div</span> class<span>="box"</span>></span> </span><span><span><span></div</span>></span></span>
Beachten Sie, wie ich die Boxklasse entfernt habe, und fügte stattdessen unsere vordefinierten Klassen links und textzentriert hinzu.
Wenn Sie den Float und die Ausrichtung der Anweisungen ändern möchten, können Sie andere Helferklassen verwenden:
<span><span>.box</span> {
</span> <span>float: left;
</span> <span>text-align: center;
</span><span>}</span>
Das Gittersystem ist ein gutes Beispiel für die Verwendung von Helferklassen. Hier ist ein Beispiel aus der Stiftungsraster:
<span><span><span><div</span> class<span>="left text-center"</span>></span> </span><span><span><span></div</span>></span></span>
Foundation bietet zahlreiche Klassen, die verwendet und kombiniert werden können, um ein Gittersystem mit unterschiedlichen Breiten für verschiedene Bildschirmgrößen zu erstellen. Diese Flexibilität hilft Entwicklern, schneller neue individuelle Layouts zu erstellen, ohne CSS für das Netz selbst zu bearbeiten. Zum Beispiel:
- .Small-2 und .Large-4-Klassen setzen die Breite eines Elements basierend auf der Bildschirmgröße.
- Die .Row -Klasse legt die Breite des Behälters fest, der die Spalten enthält.
- Die .Columns -Klasse legt die Polsterung und Schwimmer ein.
Jetzt, da Sie verstehen, welche Helferklassen sind, schauen wir uns einige wiederverwendbare Klassen an, die wir zu unseren Projekten hinzufügen können, die unten in verschiedenen Kategorien dargestellt werden. Beachten Sie auch, dass das Beispiel einige SASS -Variablen verwendet, aber natürlich sind diese nicht erforderlich.
Margen und Polster
Margen und Polsterung sind wahrscheinlich die am häufigsten verwendeten Eigenschaften in unserem CSS. Hinzufügen einiger abstrakter Klassen, die damit umgehen können, wird unseren Code trocknen.
Wir beginnen mit der Definition einer Variablen (mit SASS) für die Basisraumeinheit für unser Design. Beginnen wir mit 1EM und darüber hinaus können wir Klassen für verschiedene Raumgrößen erstellen.
<span><span><span><div</span> class<span>="right text-right"</span>></span> </span><span><span><span></div</span>></span></span>
Wir können alternativ kurze Klassennamen auswählen, wie im folgenden Beispielcode aus Basscss
<span><span><span><div</span> class<span>="row"</span>></span> </span> <span><span><span><div</span> class<span>="small-2 large-4 columns"</span>></span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="small-4 large-4 columns"</span>></span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="small-6 large-4 columns"</span>></span><span><span></div</span>></span> </span><span><span><span></div</span>></span></span>
Wählen Sie, was für Sie und Ihr Team funktioniert. Durch die langen Namen werden Ihre HTML -Elemente offensichtlich größer, aber sie sind im Gegensatz zu den kurzen Namen lesbarer, sodass Sie möglicherweise Ihre CSS ansehen müssen, um herauszufinden, wie die Dinge funktionieren.
Breite und Höhe
Stellen Sie sich vor, Sie möchten festlegen, dass Sie an verschiedenen Stellen auf Ihrer Website einen Abschnitt an verschiedenen Stellen aufweisen möchten. Die traditionelle Art und Weise, wie wir das getan haben, war so etwas:
<span><span>$base-space-unit: 1em;</span>
</span>
<span>// Top margin
</span><span>.margin-top-none { margin-top: 0; }
</span><span>.margin-top-quarter { margin-top: $base-space-unit / 4; }
</span><span>.margin-top-half { margin-top: $base-space-unit / 2; }
</span><span>.margin-top-one { margin-top: $base-space-unit; }
</span><span>.margin-top-two { margin-top: $base-space-unit * 2; }
</span>
<span>// Top padding
</span><span>.padding-top-none { padding-top: 0; }
</span><span>.padding-top-quarter { padding-top: $base-space-unit / 4; }
</span><span>.padding-top-half { padding-top: $base-space-unit / 2; }
</span><span>.padding-top-one { padding-top: $base-space-unit; }
</span><span>.padding-top-two { padding-top: $base-space-unit * 2; }</span>
und unser CSS:
<span><span>.m0</span> { margin: 0 }
</span><span><span>.mt0</span> { margin-top: 0 }
</span><span><span>.mr0</span> { margin-right: 0 }
</span><span><span>.mb0</span> { margin-bottom: 0 }
</span><span><span>.ml0</span> { margin-left: 0 }</span>
Für andere Abschnitte würden wir den Code wiederholen:
<span><span><span><div</span> class<span>="contact-section"</span>></span> </span> <span><!-- Content here... --> </span><span><span><span></div</span>></span></span>
und das CSS:
<span><span>.contact-section</span> { height: 100%; }</span>
Aber wir können all dies mit einer Klasse namens Vollhöhe reduzieren:
<span><span><span><div</span> class<span>="services-section"</span>></span> </span> <span><!-- Content here... --> </span><span><span><span></div</span>></span></span>
unten finden Sie einige ähnliche Beispiele, einschließlich der oben verwendeten Klasse in voller Höhe:
<span><span>.services-section</span> { height: 100%; }</span>
Position und Z-Index
positionbezogene Eigenschaften können mit anderen Eigenschaften wie Z-Index kombiniert werden, um ein komplexes Layout zu erstellen. Wir können eine Reihe von Klassen erstellen, um die genaue Position eines beliebigen Elements in Bezug auf das Ansichtsfenster oder ein Vorfahrelement (rechts, links, oben links usw.) festzulegen:
<span><span><span><div</span> class<span>="full-height"</span>></span> </span> <span><!-- Content here... --> </span><span><span><span></div</span>></span></span>
Die Helferklassen "Pin" sind von Mapboxs CSS inspiriert.
Lassen Sie uns das Beispiel in voller Höhe erweitern, um ein Element zu enthalten, das unten rechts positioniert ist.
<span><span>.left</span> { float: left; }
</span><span><span>.right</span> { float: right; }
</span>
<span><span>.text-left</span> { text-align: left; }
</span><span><span>.text-right</span> { text-align: right; }
</span><span><span>.text-center</span> { text-align: center; }</span>
Demo
Durch die Kombination von mehr als einer Klasse können wir das erforderliche Ergebnis in weniger Code erzielen. Wenn Sie das innere Element oben rechts positionieren möchten, können Sie das Pin-Top-Right anstelle des Pin-Bottom-Rechts verwenden. Möglicherweise haben Sie in dem obigen Code bemerkt, dass ich auch eine weitere Helferklasse hinzugefügt habe: Die Polster-One-Klasse stellt sicher
schwebende Elementeschwimmende Elemente links oder rechts können mit linken oder rechten Klassen durchgeführt werden. Die bekannte ClearFix-Klasse kann im übergeordneten Element zum Löschen von Floats verwendet werden, die unten unter Verwendung von Sasss übergeordnetem Selektor gezeigt werden:
<span><span><span><div</span> class<span>="box"</span>></span> </span><span><span><span></div</span>></span></span>Demo
Ausrichten von Elementen
Wir können Text und andere Inhalte mithilfe von Align-basierten Helferklassen auf eine beliebige Richtung ausrichten:
<span><span>.box</span> {
</span> <span>float: left;
</span> <span>text-align: center;
</span><span>}</span> Sichtbarkeitsklassen Sichtbarkeitsklassen steuern die Sichtbarkeit von Elementen abhängig von der Bildschirmgröße, der Geräteorientierung, dem Touchscreen oder anderen Faktoren. Diese können in reaktionsschnellen Designs nützlich sein.
Wir könnten die folgenden Klassen in unseren Medienfragen haben:
<span><span><span><div</span> class<span>="left text-center"</span>></span> </span><span><span><span></div</span>></span></span>und in unserem HTML:
<span><span><span><div</span> class<span>="right text-right"</span>></span> </span><span><span><span></div</span>></span></span>Das obige Element wird auf kleinen Bildschirmen versteckt, aber auf größeren Bildschirmen sichtbar.
Wir können diese Klassen auch verwenden, um Elemente auf Berührungsgeräten zu steuern:
<span><span><span><div</span> class<span>="row"</span>></span> </span> <span><span><span><div</span> class<span>="small-2 large-4 columns"</span>></span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="small-4 large-4 columns"</span>></span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="small-6 large-4 columns"</span>></span><span><span></div</span>></span> </span><span><span><span></div</span>></span></span>Im obigen Beispiel würde die .touch -Klasse aus den Klassen stammen, die dem Element von modernizr.
hinzugefügt wurden
Ein gutes Beispiel für Sichtbarkeitsklassen sind diejenigen,Typografie
In der Typografie können Sie Klassen für Dinge wie Schriftgewicht und Textmanipulation erstellen, wie Ellipsis -Text.
Farben
<span><span>$base-space-unit: 1em;</span>
</span>
<span>// Top margin
</span><span>.margin-top-none { margin-top: 0; }
</span><span>.margin-top-quarter { margin-top: $base-space-unit / 4; }
</span><span>.margin-top-half { margin-top: $base-space-unit / 2; }
</span><span>.margin-top-one { margin-top: $base-space-unit; }
</span><span>.margin-top-two { margin-top: $base-space-unit * 2; }
</span>
<span>// Top padding
</span><span>.padding-top-none { padding-top: 0; }
</span><span>.padding-top-quarter { padding-top: $base-space-unit / 4; }
</span><span>.padding-top-half { padding-top: $base-space-unit / 2; }
</span><span>.padding-top-one { padding-top: $base-space-unit; }
</span><span>.padding-top-two { padding-top: $base-space-unit * 2; }</span>
Jede Anwendung hat unterschiedliche Anleitungen und Markenregeln, die wir in Klassen definieren können, die im Wesentlichen unsere Schnittstelle „Haut“ „Haut“ definieren können. Dies würde Textfarbe, Hintergründe und mehr beinhalten.
Lassen Sie uns sehen, wie dies in Code übersetzt werden kann. Lassen Sie uns zunächst unsere Variablen mit SASS definieren:
Dann definieren wir unsere Helferklassen basierend auf den Variablen:
<span><span>.m0</span> { margin: 0 }
</span><span><span>.mt0</span> { margin-top: 0 }
</span><span><span>.mr0</span> { margin-right: 0 }
</span><span><span>.mb0</span> { margin-bottom: 0 }
</span><span><span>.ml0</span> { margin-left: 0 }</span>
Zwei gute Beispiele für die Verwendung von Farb- und Hintergrund -Helferklassen finden Sie in der MAPBOX und in den Google Web Starter Kit -Projekten.
<span><span><span><div</span> class<span>="contact-section"</span>></span> </span> <span><!-- Content here... --> </span><span><span><span></div</span>></span></span>
Ein weiterer Anwendungsfall ist die Benachrichtigungskomponente. Mal sehen, wie wir dies mit Hintergrund -Helferklassen stylen können.
<span><span>.contact-section</span> { height: 100%; }</span>
listet
Wie oft wollten Sie die Kugeln und Polsterung des UL -Elements loswerden? Eine Klasse namens List-Bare, wie in Inuitcss verwendet, kann das für Sie tun.
<span><span>.left</span> { float: left; }
</span><span><span>.right</span> { float: right; }
</span>
<span><span>.text-left</span> { text-align: left; }
</span><span><span>.text-right</span> { text-align: right; }
</span><span><span>.text-center</span> { text-align: center; }</span>
Grenzen
Helferklassen können verwendet werden, um einem Element Grenzen hinzuzufügen, sei es für alle Seiten oder eine Seite. Ihr CSS/Sass könnte also so aussehen:
<span><span><span><div</span> class<span>="box"</span>></span> </span><span><span><span></div</span>></span></span>
Werte
anzeigenDie folgenden Helferklassen geben uns die Möglichkeit, die verschiedenen Werte für die Anzeigeeigenschaft von CSS zu verwenden:
<span><span>.box</span> {
</span> <span>float: left;
</span> <span>text-align: center;
</span><span>}</span>
Schlussfolgerung
Nach diesem Prinzip der Abstraktion ist möglicherweise ein ganz anderer Ansatz als das, was Sie beim Autoring CSS gewohnt sind. Aber basierend auf meiner Erfahrung und der von anderen kann ich sagen, dass dies ein sehr guter Ansatz für Ihr nächstes Projekt ist.
Sie können alle Helferklassen aus diesem Beitrag in einer neuen Bibliothek namens CSS-Helpers ansehen.
relevante Bibliotheksverbindungen
Sie können die Struktur der folgenden Projekte lernen und untersuchen:
- MAPBOX styleGuide - Base.css
- basscss
- Foundation Utility Classs
- Bootstrap -Helferklassen
- UIKIT -Dienstprogrammklassen
Weiteres Lesen
- Herausfordernde CSS -Best Practices
- ACSS: Überdenken der CSS -Best Practices
- Medium CSS
häufig gestellte Fragen zur Verwendung von Helferklassen zum Trocknen und Skalieren von CSS
Wie hoch sind die Vorteile der Verwendung von CSS -Helferklassen?
CSS -Helferklassen bieten zahlreiche Vorteile. Sie fördern das trockene Prinzip (nicht wiederholen), was ein grundlegendes Konzept für die Programmierung ist. Durch die Verwendung von Helferklassen können Sie es vermeiden, dieselben CSS -Eigenschaften und -Werte in Ihren Stylesheets zu wiederholen. Dies macht Ihren Code nicht nur sauberer und lesbarer, sondern reduziert auch die Dateigröße, was zu schnelleren Ladezeiten führt. Darüber hinaus können Helferklassen über verschiedene Elemente und Komponenten hinweg wiederverwendet werden, wodurch die Skalierbarkeit Ihres CSS -Codes verbessert werden. Sie ermöglichen auch die leichtere Wartung und Aktualisierungen, da Änderungen nur an einem Ort vorgenommen werden müssen.
Wie erstelle ich eine CSS -Helferklasse? Sie definieren einfach eine Klasse in Ihrem Stylesheet und weisen ihm die gewünschten Eigenschaften und Werte zu. Wenn Sie beispielsweise häufig Text im Mittelpunkt stehen, können Sie eine Helferklasse wie folgt erstellen:
.Center-Text {
text-align: center;
}
Sie können diese Klasse dann auf ein beliebiges HTML -Element anwenden, um ihren Text zu zentrieren.
Dies ist ein Text.
Was ist der Unterschied zwischen Helferklassen und Dienstprogrammklassen in CSS? Beide beziehen sich auf Klassen, die eine spezifische Einzelzweckfunktion dienen. Einige Entwickler unterscheiden jedoch zwischen den beiden. Aus ihrer Sicht sind Helferklassen komplexer und können mehrere Eigenschaften enthalten, während die Versorgungsklassen einfacher sind und normalerweise nur eine Eigenschaft enthalten.
Wie kann ich Helferklassen verwenden, um meine Produktivität zu verbessern? Helferklassen können Ihre Produktivität beim Schreiben von CSS erheblich steigern. Durch die Einschränkung gängiger Stile in wiederverwendbaren Klassen können Sie die Menge an Code reduzieren, die Sie zum Schreiben benötigen, und Ihre Stylesheets leichter zu verwalten. Dies kann Ihnen viel Zeit sparen, insbesondere bei größeren Projekten. Darüber hinaus können Helferklassen Ihnen helfen, die Konsistenz in Ihrem Design aufrechtzuerhalten, da sie sicherstellen, dass die gleichen Stile auf die gleiche Weise auf verschiedene Elemente und Komponenten angewendet werden. >
Während Helferklassen viele Vorteile bieten, haben sie auch einige potenzielle Nachteile. Eine der Hauptkritikpunkte ist, dass sie zu HTML -Blähungen führen können, da Sie möglicherweise mehrere Klassen auf ein einzelnes Element anwenden. Dadurch kann Ihr HTML -Code schwieriger zu lesen und zu warten. Darüber hinaus kann die Übertragung von Helferklassen in Ihren Klassen zu einem Mangel an semantischer Bedeutung führen, wodurch Ihre Stylesheets für andere Entwickler schwieriger zu verstehen sind. ?Ja, Sie können Helferklassen mit CSS -Präprozessoren wie Sass oder weniger verwenden. Tatsächlich können diese Tools es noch einfacher machen, Helferklassen zu erstellen und zu verwalten. Zum Beispiel ermöglicht SASS Sie mit Sass Mixins, bei denen es sich um Helferklassen handelt, die Argumente akzeptieren können. Auf diese Weise können Sie flexiblere und wiederverwendbarere Stile erstellen.
Wie kann ich Helferklassen verwenden, um meinen CSS -Code zu skalieren? Durch die Einkapselung gemeinsamer Stile in wiederverwendbaren Klassen können Sie diese Stile auf verschiedene Elemente und Komponenten einfach anwenden. Dies macht Ihren Code modularer und skalierbarer, da Sie Stile hinzufügen, entfernen oder ändern können, ohne andere Teile Ihres Codes zu beeinflussen. Darüber hinaus können Helferklassen Ihnen helfen, die Konsistenz in Ihrem Design beizubehalten, wenn Ihr Projekt wächst.
Was sind einige Beispiele für häufig verwendete CSS -Helferklassen? Einige Beispiele umfassen Klassen für die Textausrichtung (z. B. .Text-Center), die Anzeigeeigenschaften (z. B. .d-Block), Rand und Polsterung (z. B. .M-0 oder .p-0) und Sichtbarkeit (z. B. ,. versteckt oder .vissibel). Diese Klassen können verwendet werden, um schnell gemeinsame Stile anzuwenden, ohne die gleichen CSS -Eigenschaften und -Werte immer wieder schreiben zu müssen.
Wie kann ich meine CSS -Helferklassen organisieren?
Es gibt verschiedene Möglichkeiten, Ihre CSS -Helferklassen zu organisieren. Ein gemeinsamer Ansatz besteht darin, sie nach Funktion zu gruppieren. Beispielsweise können Sie einen Abschnitt Ihres Stylesheet für Typografie-bezogene Klassen, einen anderen für Layoutkurse und so weiter haben. Ein anderer Ansatz ist die Verwendung einer Namenskonvention, die die Funktion jeder Klasse angibt. Zum Beispiel verwendet Bootstrap eine Namenskonvention, bei der der erste Teil des Klassennamens die Eigenschaft (z. B. „M“ für den Rand) angibt, und der zweite Teil den Wert angibt (z. B. „0“ für 0 Einheiten). Dies macht es leicht zu verstehen, was jede Klasse nur durch Betrachtung ihres Namens tut.
Das obige ist der detaillierte Inhalt vonVerwenden von Helferklassen zum Trocknen und Skalieren von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!