Auf automatisch generierte Atom-CSS

Robin Wesers Erkundung des Kurzhändlers in Atomic CSS unterstreicht die Herausforderungen bei der automatischen Umwandlung von HTML und CSS in optimierte Stile. Das Kernproblem liegt in der Behandlung von Randfällen, die sich aus dem Zusammenspiel von Kurz- und Longhand -CSS -Eigenschaften ergeben, was zu potenziellen Fehlern bei der Verwendung von Frameworks wie FELA führt, die Atomklassen generieren.

Das Konzept von Atomic CSS - eine Klasse, ein Job - ist faszinierend. Betrachten Sie dieses Beispiel:

 <code>.mb-8 { margin-bottom: 2rem; }</code>

Stellen Sie sich Tausende solcher Klassen vor, die praktisch jede CSS -Möglichkeit abdecken.

Warum Atomic CSS verwenden? Es gibt mehrere überzeugende Gründe:

• Reduziertes CSS: Die Beseitigung wiederholter Eigenschaften/Wertpaare und Autorenspezifische Klassennamen verkleinert die endgültige CSS-Dateigröße erheblich. Dies ist entscheidend, da CSS eine blockierende Ressource ist.
• Vereinfachtes Namen: Kein zeitaufwändiger Unterrichtsname Brainstorming.
• Designkonsistenz: Die Begrenzung der verfügbaren Klassen erzwingt ein gewisses Maß an Einheitlichkeit des Designs.
• Erhöhte Entwicklergeschwindigkeit: Einige Entwickler finden diesen Ansatz schneller und effizienter.

Das Erzeugen von Atom-CSS kann manuell erfolgen (wie Github und Facebook mit Primer bzw. FB5 durchgeführt haben, obwohl dies nicht unbedingt empfohlen wird) oder durch Verwendung vorgefertigter Frameworks. Tachyons ist ein frühes Beispiel für eine große, Meinung von Atomklassen.

Tailwind CSS ist jedoch der dominierende Spieler. Seine Stärken liegen in:

• Konfigurierbarkeit: Passen Sie die Klassen an die Anforderungen Ihres Projekts an.
• Spülung unbenutzte Klassen: Dieser entscheidende Schritt beseitigt unbenutzte Klassen und erkennt die vollen Leistungsvorteile von Atom -CSS.
• Integrierte UI-Bibliothek: Beschleunigt die Entwicklung mit leicht verfügbaren Komponenten.

Aber was ist mit automatischer Generierung von Atom -CSS?

Der Ansatz von Yahoo, bei dem Funktionen als Klassennamen verwendet werden, die während des Build -Schritts verarbeitet wurden, ahnte die aktuellen Methoden. Dies ähnelt der Purgecss -Kombination von Rückenwind.

Heute müssen Sie nicht manuell atomic CSS schreiben. Wie Weser betont, ermöglichen Bibliotheken wie Fela, Styletron, native Web, ITTion und Stylesheet Sie, Stile auf vertraute Weise zu schreiben und gleichzeitig Atom -CSS während des Build -Prozesses zu generieren. Dieser Ansatz maximiert die Wiederverwendbarkeit und minimiert die endgültige CSS -Bündelgröße. Jedes Immobilienwertpaar wird nur einmal gerendert, was die Effizienz verbessert.

Diese Methode, die häufig in CSS-in-JS verwurzelt ist, verarbeitet sowohl Markup als auch CSS für optimale Ergebnisse. Es ist eine überzeugende Alternative zum manuellen Schreiben von Atom -CSS, die viele Entwickler, einschließlich des Autors, weniger ansprechend finden. Der Hauptvorteil ist die automatisierte Optimierung für eine verbesserte Webleistung.

Die Frage bleibt: Was denken Sie zu diesem Ansatz?

Das obige ist der detaillierte Inhalt vonAuf automatisch generierte Atom-CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!