Komponentengesteuerte CSS-Frameworks

Kernpunkte

• Webkomponenten werden immer beliebter, und es besteht auch eine wachsende Nachfrage nach CSS -Frameworks, die diese Art der Entwicklung bewältigen können. Herkömmliche CSS-Frameworks wie Bootstrap oder Foundation können Entwickler aufgrund ihrer umfangreichen integrierten Stile und Code die Verwendung von Webkomponenten beschränken.
• komponentgetriebene CSS-Frameworks wie Musterlabor, Anzug CSS, Inuitcss und reines CSS werden als Ausgangspunkt für das Design ausgelegt und bieten ein Framework für die Entwicklung von Webkomponenten ohne Einschränkungen oder unnötige Stile. Sie ermöglichen es Entwicklern, sich auf ihre eigenen Stile und Code zu konzentrieren, was die Wiederverwendbarkeit, Konsistenz und Zusammenarbeit verbessert.
• Während komponentengesteuerte CSS-Frameworks viele Vorteile bieten, können sie die Komplexität des Projekts erhöhen und ein gutes Verständnis der Grammatik und Konventionen des Rahmens erfordern. Sie sind hauptsächlich für JavaScript-basierte Technologien entwickelt, können jedoch auf jede Programmiersprache angewendet werden, die die modulare Programmierung unterstützt.

"Im Jahr 2015 wird jeder das Framework aufgeben."

Ich bin mir nicht sicher. Ich möchte nur Ihre Aufmerksamkeit erregen. Egal wie viel Sie scherzen, haben Sie eine subtile Veränderung im Front-End-Feld festgestellt, das heißt, jeder gibt allmählich das Rahmen auf? Zum Beispiel gab das Sass Mesh Framework Susy seine Abhängigkeit von Kompass auf, und Entwickler wurden ermutigt, darüber nachzudenken, ob JQuery erforderlich ist.

Webkomponenten sind heutzutage sehr beliebt. Wenn wir in eine Welt eintreten, in der Komponenten zu erstklassigen Bürgern von Webanwendungen werden, benötigen wir dringend ein Framework, das diese neue Art der Entwicklung bewältigen kann.

Einschränkungen von Bootstrap und Foundation

Wenn Sie ein Front-End-Entwickler sind, werden Sie wahrscheinlich Bootstrap oder Foundation gut kennen. Beliebte CSS -Frameworks wie diese können uns bei der Entwicklung mit Webkomponenten einschränken. Nicht, dass sie schlecht sind. Sie kommen einfach mit zu vielen eingebauten Stilen. Angesichts der Funktionalität von Shadow Dom ist dies möglicherweise nicht das, was Sie wollen. Diese Frameworks sind dafür bekannt, die Bedürfnisse aller zu erfüllen. Andererseits dient das Komponenten-gesteuerte CSS-Framework als Ausgangspunkt für das Design und bietet ein Framework für die Entwicklung von Webkomponenten. Das sind alles ihre Ziele.

Bootstrap hat die Art und Weise, wie wir Front-End-Code schreiben, in gewissem Maße revolutioniert. Es bietet uns hervorragende UI -Komponenten und -strukturen für erweiterbare und wartbare Stylesheets. Es ist perfekt für große Teams, um mit einem akzeptierten CSS -Format zusammenzuarbeiten. Das Problem ist, dass es viel Code enthält. Es ist perfekt, wenn Sie nichts von Grund auf neu aufbauen möchten. Das Anpassen ist jedoch nicht so effektiv. Können Sie es anpassen? Sicher. Ist es einfach? Es ist fraglich.

"Sie arbeiten jetzt unter dem Hindernis des Rahmens, nicht wegen des Rahmens." - Harry Roberts

Foundation löst dieses Problem effektiv. Es ist so konzipiert, dass es von Grund auf neu angepasst werden soll. Tatsächlich ist das Team entschlossen, das Standardthema sehr einfach zu machen, um sicherzustellen, dass alle damit gebauten Websites am Ende anders aussehen. Einige Komponenten des Fundaments sind jedoch eng mit Markierungen verbunden, wodurch die Marker, die Sie verwenden können, einschränken, sodass es mehr als nur ein CSS -Framework ist. Sie arbeiten aktiv daran, dies zu verbessern.

UI -Toolkit und Rahmen

Harry Roberts hielt Anfang dieses Jahres eine Präsentation (siehe Diashow) und diskutierte die Nuancen zwischen dem UI -Toolkit und dem CSS -Framework. In dieser Rede sagte er, dass das CSS -Framework Ihnen nicht im Wege stehen wird. Es enthält keine Stile. Es gibt keine Einschränkungen für Tags, HTML -Strukturen oder Klassen.

Andererseits ist das UI -Toolkit ein komplettes Produkt, das ein komplettes Paket aus der Box bietet: Design, Struktur, Standards, Muster und JavaScript -Plugins sind alle in einem ordentlichen Paket enthalten. Diese Tools werden zum schnellen Prototyping und zum schnellen Start verwendet. Meistens überschreiben Sie die Regeln und umgehen die Definition des Rahmens.

Aus dieser Perspektive kann, wie Addy Osmani kürzlich diskutierte, eine einzelne Seite in einem mit Bootstrap erstellten Beispielprojekt bis zu 91% der nicht verwendeten CSS aus.

Die Frage lautet also: Welche Frameworks vermeiden Ihren Pfad und lassen Sie Ihren Code schreiben, anstatt Ihren Code für Sie zu schreiben?

1. Musterlabor

   Musterlabor wurde von Brad Frost und Dave Olsen erstellt und basiert auf der Atomdesignphilosophie. Dies ist ein flexibler Ansatz, um die Website aus den Grundlagen zu entwerfen und sie dann Schritt für Schritt aufzubauen. Es ist nicht so sehr ein Framework, es ist eine Möglichkeit, Websites und Anwendungen zu erstellen.

   Musterlabor fördert Design -Websites, die sich auf Komponenten konzentrieren. Beginnen Sie mit grundlegenden Tags und erstellen Sie Schritt für Schritt komplexere Komponenten. Dieser Framework hat keine Annahmen über Stile. Es steht Ihnen nicht im Wege und ermöglicht es Ihnen, mit Ihren CSS umzugehen.

   Es bietet auch einen CSS -Leitfaden für kreative Struktur und eine Reihe von Tools, die zum gesamten kreativen Prozess beitragen. Ein Tool, das den Bildschirm nach dem Zufallsprinzip verändert, um zu sehen, wie Ihr Design auf verschiedenen Bildschirmgrößen funktioniert, und ein Annotationstool für die schnelle Zusammenarbeit.

   Aber das Beste daran ist, dass es präprozessorfrei ist. Im Gegensatz zu vielen anderen Lösungen hat es kein Mitspracherecht dafür, welches Präprozessor verwendet werden soll. Es verfügt außerdem über keine Stile und ermöglicht es Ihnen, Stilführer zu erstellen, anstatt Ihnen einen Stilhandbuch aufzuerlegen.

2. Anzug CSS

   Nicolas Gallaghers Anzug CSS ist per Definition eine Komponenten-basierte UI-Entwicklungsmethode. Es enthält eine Reihe von Richtlinien, die die Implementierung und Kombination aus locker gekoppelten unabhängigen Einheiten ermöglichen.

   Komponenten sind der Kern dieses Frameworks. Es wurde entwickelt, um Front-End-Systeme zu entwickeln, bei denen Komponenten komponierbar und konfigurierbar sind. Es bietet einen Leitfaden zum Erstellen von gut eingekapselten Komponenten und kann durch die Schnittstelle geändert werden.

   Suit CSS ist ein ausgereiftes Gerüst, das auf einer soliden Fundament basiert. Die Dokumentation ist ein großartiger Ort, um mehr darüber zu erfahren, aber auch mehr über Front-End-Prinzipien zu erfahren.

   Es enthält auch eine Reihe von Paketen, die dem Workflow hinzugefügt werden können. Es funktioniert gut mit NPM (Knotenpaketmanager) und enthält automatische Präfixfunktionen, Kapselungstests sowie einen anpassbaren und skalierbaren Präprozessor. Probieren Sie es aus, oder setzen Sie sich hin und lesen Sie einige der Prinzipien, auf denen es basiert. Dies kann Ihnen großartige Einblicke geben, selbst wenn Sie sich entscheiden, es nicht zu verwenden.

3. inuitcss

   Inuit CSS ist kein UI -Toolkit. Es verhängt weder ein Design und enthält auch Tausende von Komponenten oder Zeilen des CSS -Code. Es handelt sich um einen Rahmen mit der Skalierbarkeit, das als kleines Paket bereitgestellt wird, das Sie bei Bedarf skalieren können.

   "InuitCSS bietet eine solide Infrastruktur, auf der Sie Websites oder Anwendungen jeder Größe oder eines beliebigen Stils erstellen können."

   Der wichtigste Aspekt von Inuitcss ist, dass es Ihren Weg schnell vermeiden kann. Es ist so konzipiert, dass es stylingfrei ist und eine gute Grundlage bildet, auf der Sie Ihr CSS bauen können.
   Zum Beispiel enthält die Pagination in Inuitcss nur Ränder und Polsterung, nicht vollständig gestaltete Komponenten. Sie können Ihren eigenen Stil definieren, ohne das Framework anzupassen oder es schlimmer zu überschreiben.
   Inuitcss wird derzeit eine Überholung unterzogen, und die nächste Version des Pre-Alpha-Moduls ist verfügbar.
   Ein weiterer Aspekt dessen, was ich an Inuitcss mag, ist, dass Sie die Komponenten bequem namensspace -Namespace ermöglichen. Es ist einfach, das Framework in ein vorhandenes Projekt einzubeziehen und Ihren vorhandenen Code neu zu überarbeiten.
   Dies ist ein großer Sieg für alle vorhandenen Framework. Im Gegensatz dazu wirkt sich beim Öffnen von Bootstrap oder Foundation die wahrscheinlichste erste Codezeile auf alles aus (ich schaue Sie an, Boxgrößen!). Diese Frameworks funktionieren nicht mit vorhandenen Stilen, oder es kann ein Schmerz sein, einen von ihnen in ein Projekt zu bringen und zu erwarten, dass alles gleich bleibt. InuitCSS tut dasselbe, aber es ist optional und einfach zu deaktivieren.

4. reines CSS

   Meiner Meinung nach liegt Pure CSS irgendwo zwischen UI -Toolkits und Frameworks. Es bietet eine Reihe grundlegender Stile, ermöglicht es Ihnen jedoch, von dort aus zu übernehmen. Durch Design ist es so konzipiert, dass es sich auf den Weg lenkt und ermöglicht, CSS zu erstellen, ohne vorhandene Regeln zu überschreiben.

   "Pure hat minimale Stile und ermutigt Sie, Anwendungsstile darüber zu schreiben. Es ist so konzipiert, dass Sie Ihren Pfad vermeiden und überschreibende Stile einfach machen."

Schlussfolgerung

Webkomponenten revolutioniert das Front-End-Feld. Unser aktuelles Lieblingswerkzeug ist möglicherweise nicht das Beste, wenn Sie diese neueren Funktionen verwenden. Vielleicht ist es Zeit, über Ihr Lieblings -Framework hinauszugehen und etwas Neues auszuprobieren. Ich hoffe, dieser Beitrag hat Ihnen genügend Optionen zur Verfügung gestellt.

Es besteht die Notwendigkeit, über ausreichende Klarheit zu verfügen, um das richtige Instrument für ein bestimmtes Problem auszuwählen. Wählen Sie mit Bedacht. Vermeiden Sie es wie immer nicht, es selbst zu tun.

FAQs (FAQs) über komponentgetriebene CSS-Frameworks

Was sind die Hauptvorteile der Verwendung von Komponenten-gesteuerten CSS-Frameworks?

Komponentengetriebenes CSS-Framework bietet viele Vorteile. Erstens verbessern sie die Wiederverwendbarkeit. Komponenten können in verschiedenen Teilen des Projekts wiederverwendet werden, wodurch die Menge des geschriebenen Codes reduziert und die Codebasis verwaltbarer wird. Zweitens verbessern sie die Konsistenz. Durch die Verwendung der gleichen Komponenten im gesamten Projekt bleibt die Benutzeroberfläche konsistent und bietet somit eine bessere Benutzererfahrung. Drittens ermöglichen sie die Zusammenarbeit. Verschiedene Teammitglieder können gleichzeitig verschiedene Komponenten bewältigen und den Entwicklungsprozess beschleunigen. Schließlich erleichtern sie die Wartung. Da Komponenten unabhängig sind, wirken sich Änderungen an einer Komponente nicht auf andere aus, wodurch Fehler behebten und weniger kompliziert werden.

Wie unterscheidet sich die Komponentenentwicklung von traditionellen Entwicklungsmethoden?

herkömmliche Entwicklungsmethoden verwenden normalerweise einen Top-Down-Ansatz, bei dem das Gesamtdesign in kleinere Teile unterteilt ist. Im Gegensatz dazu nimmt die Komponentenbetrieben einen Bottom-up-Ansatz an, bei dem einzelne Komponenten unabhängig entwickelt und dann zu einem vollständigen Design kombiniert werden. Dieser Ansatz ermöglicht eine größere Flexibilität und Skalierbarkeit, da Komponenten hinzugefügt, entfernt oder geändert werden können, ohne das gesamte System zu beeinflussen.

Kann das Komponenten-gesteuerte CSS-Framework mit einer Programmiersprache verwendet werden?

komponentgetriebenes CSS-Framework wurde hauptsächlich für JavaScript-basierte Technologien wie React, Vue und Angular entwickelt. Die Prinzipien der Komponentenentwicklung können jedoch auf jede Programmiersprache angewendet werden, die die modulare Programmierung unterstützt. Es ist zu beachten, dass bestimmte Implementierungsdetails je nach Sprache und Framework variieren können.

Was sind einige beliebte CSS-Frameworks für Komponenten?

Einige beliebte komponentengesteuerte CSS-Frameworks sind Bootstrap, Foundation, Bulma und semantische UI. Diese Frameworks bieten vorentwickelte Komponenten, die an die spezifischen Anforderungen des Projekts angepasst werden können. Sie bieten auch viel Dokumentation und Unterstützung in der Gemeinschaft und machen sie ideal für Anfänger und erfahrene Entwickler.

Wie starten Sie die Komponentenentwicklung?

Um die Komponentenentwicklung zu starten, müssen Sie zunächst die Grundprinzipien der modularen Programmierung und der Komponentenbasis-Architektur verstehen. Wählen Sie als Nächstes ein komponentiertes CSS-Framework aus, das den Anforderungen des Projekts entspricht. Machen Sie sich mit der Dokumentation des Frameworks vertraut und versuchen Sie, Komponenten zu erstellen und zu verwenden. Online -Tutorials und -kurse können Ihnen auch helfen, dieses Wissen zu erlernen.

Gibt es Nachteile bei der Verwendung von Komponenten-gesteuerten CSS-Frameworks?

Während komponentgetriebene CSS-Frameworks viele Vorteile bieten, haben sie auch einige potenzielle Nachteile. Zum Beispiel können sie die Komplexität des Projekts erhöhen, insbesondere für Anfänger. Sie erfordern auch ein gutes Verständnis der Grammatik und der Konventionen des Rahmens. Darüber hinaus kann eine übermäßige Abhängigkeit von vorgezeichneten Komponenten die Kreativität einschränken und dazu führen, dass das Design schlicht aussieht.

Wie verbessert die komponentengesteuerte Entwicklung die Teamzusammenarbeit?

Komponentenbetriebene Entwicklung verbessert die Teamzusammenarbeit, indem verschiedene Teammitglieder gleichzeitig mit verschiedenen Komponenten umgehen können. Dieser parallele Entwicklungsprozess kann die Entwicklungszeitleiste erheblich beschleunigen. Da die Komponenten unabhängig sind, beeinflussen Änderungen, die von einem Entwickler vorgenommen wurden, die Arbeit anderer Entwickler nicht, was das Risiko von Konflikten und Fehlern verringert.

Kann komponentgetriebenes CSS-Framework für die Entwicklung der mobilen Anwendungen verwendet werden?

Ja, das Komponenten-gesteuerte CSS-Framework kann für die Entwicklung der mobilen Anwendungen verwendet werden. Viele Frameworks wie React Native und Ionic bieten Komponenten, die speziell für mobile Schnittstellen entwickelt wurden. Diese Komponenten können verwendet werden, um reaktionsschnelle Designs zu erstellen, die auf einer Vielzahl von Bildschirmgrößen und Geräten gut laufen können.

Wie unterstützt die Komponentenentwicklungstests und -Debuggen?

Komponentenbetriebene Entwicklung unterstützt das Testen und Debuggen, indem unabhängige Tests und Debuggen jeder Komponente ermöglicht werden. Dieser modulare Ansatz erleichtert die Isolierung und Behebung von Fehler und Schreiben von Unit -Tests für einzelne Komponenten. Es erleichtert auch Regressionstests, da Änderungen an einer Komponente andere nicht beeinflussen.

Wie können Sie die Zugänglichkeit von Komponenten sicherstellen?

Stellen Sie sicher, dass die Zugänglichkeit von Komponenten die folgenden Best Practices für zugängliche Webdesigns befolgt. Dies beinhaltet die Strukturierung mit semantischen HTML, die Bereitstellung alternativer Text zu Bildern, die Gewährleistung eines ausreichenden Farbkontrasts und das Erreichen aller Funktionen über die Tastatur. Viele von Komponenten angetriebene CSS-Frameworks bieten Zugänglichkeitsfunktionen außerhalb des Boxs, erfordern jedoch weiterhin Ihre Komponenten mithilfe einer Vielzahl von assistiven Technologien, um sicherzustellen, dass sie tatsächlich zugänglich sind.

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