Ein vorgefertigtes CSS-Framework kann eine große Hilfe oder ein schwerwiegendes Hindernis sein. In diesem Artikel werden beide Seiten des Zauns angemessen behandelt, indem gemeinsame Argumente für und gegen die Verwendung eines CSS-Frameworks betrachtet werden.
Was ist ein CSS-Framework?
CSS-Frameworks sollen die Entwicklung komplexer Websites beschleunigen und vereinfachen. Um dies zu erreichen, enthalten CSS-Frameworks vordefinierte Codebibliotheken, die eine Vielzahl von Optionen enthalten, die Sie in Ihrem HTML-Code verwenden können. Zum Beispiel enthalten Raster-basierte Frameworks normalerweise mehrere Klassen, die eine bestimmte Anzahl Pixel enthalten, um das Erstellen von mehrspaltigen Layouts zu vereinfachen.
5 Beliebte CSS-Frameworks
Hier ist eine kurze Liste der beliebtesten CSS-Frameworks mit kurzen Beschreibungen direkt aus der Quelle.
Blueprint CSS
Blueprint ist ein CSS-Framework, das Ihre Entwicklungszeit reduzieren soll. Es bietet Ihnen eine solide Grundlage für die Erstellung Ihres Projekts mit einem benutzerfreundlichen Raster, sinnvoller Typografie, nützlichen Plug-ins und sogar einem Stylesheet zum Drucken.?
Elemente
Elemente sind ein bodenständiger CSS-Rahmen. Es wurde entwickelt, um Designern zu helfen, CSS schneller und effizienter zu schreiben. Elements ist mehr als nur ein Framework, es ist ein eigener Projekt-Workflow. Es hat alles, was Sie für Ihr Projekt benötigen, was Sie und Ihre Kunden glücklich macht. Lesen Sie die Übersicht für weitere Informationen.
YUI 2: Raster-CSS
Das grundlegende YUI-Raster-CSS bietet vier voreingestellte Seitenbreiten, sechs voreingestellte Vorlagen und die Möglichkeit, unterteilte Bereiche von zwei, drei oder vier Spalten zu stapeln und zu verschachteln. Die 4-KB-Datei bietet über 1000 Seitenlayoutkombinationen.
Logik-CSS
Das Logic-CSS-Framework ist eine Sammlung von CSS-Dateien und ein Toolset, das die Entwicklungszeiten für Web-Standards-kompatible Web-Layouts und -Vorlagen verkürzen soll. ?
Elastisches CSS
? Ein einfaches CSS-Framework zum Layout von webbasierten Schnittstellen, das auf den gedruckten Layouttechniken von 4 Spalten basiert, jedoch mit unbegrenzten Spaltenkombinationen. und die Fähigkeit, elastisches, festes und flüssiges Layout leicht herzustellen.
Pros
Bei richtiger Anwendung können Frameworks sehr hilfreich sein, um den Layoutprozess zu optimieren. Hier sind einige der größten Vorteile.
Browserübergreifende Funktionalität
Dies ist einer der größten Verkaufsargumente in meinem Buch. Das Kodieren komplexer Layouts, die in allen Browsern konsistent bleiben, kann ein Albtraum sein. Die meisten CSS-Frameworks erledigen die Arbeit für Sie, sodass Ihre Inhalte immer gleich angezeigt werden, unabhängig davon, wer sie betrachtet.
Schnelle Entwicklung
Wenn Sie viele Websites erstellen, können Sie mit einem guten CSS-Framework einen Plug & Play-Workflow erstellen, der die sich wiederholenden Aufgaben (z. B. manuelles Zurücksetzen), die Sie bei jeder Einrichtung einer Website durchlaufen, eliminiert. Viele Frameworks enthalten sogar vorgestylte Schaltflächen, Text usw., was im kreativen Bereich eine große Zeitersparnis bedeuten kann.
Konsistenz
CSS-Frameworks bieten Ihnen einen Standardsatz von Selektoren, den Sie für alle von Ihnen erstellten Websites verwenden können, und zwingen Sie zur Konsistenz bei der Codierung. Wenn Sie also eine Website betrachten, die Sie vor einem Jahr erstellt haben, ist dies für Sie genauso sinnvoll, als wenn Sie sie gestern geschrieben hätten.
Saubere, symmetrische Layouts
Wenn Sie wie ich sind, neigen Sie dazu, Ihre Proportionen nur zu beobachten und nennen es gut. Viele CSS-Frameworks setzen Sie auf ein striktes gitterbasiertes System, das gewährleistet, dass Ihre Layouts eine pixelgenaue Symmetrie ohne komplizierte Messungen erreichen.
Cons
Nachdem wir nun viel mit den Vorteilen der CSS-Frameworks angeprangert haben, werfen wir einen Blick auf die Nachteile. Denken Sie daran, dass dies nicht unbedingt kleinere Probleme sind, sondern große Hürden, die viele Entwickler von Frameworks insgesamt abhalten.
Zusätzlicher Code
Ich möchte, dass mein Code klar und präzise ist, ohne dass es zu Redundanzen oder ungenutzten Abschnitten kommt. Bei CSS-Frameworks geht dies aus dem Fenster. Selbst wenn Ihr bevorzugtes Framework sauber geschriebenen Code enthält, werden Sie wahrscheinlich nicht die Hälfte davon auf einer bestimmten Site verwenden. Dies liegt daran, dass Frameworks absichtlich viel Code für mehrere Layoutszenarien enthalten. Sie wählen aus, welche Selektoren Sie verwenden möchten, und die anderen sitzen nur ungenutzt. Wenn Sie es zulassen, können Sie den gesamten Code durchsuchen und alles löschen, was Sie nicht verwenden.
Mangel an Freiheit
Die Verwendung eines CSS-Frameworks kann Sie leicht auf sehr enge Weise einschränken. Verstehen Sie mich nicht falsch, Struktur ist eine Notwendigkeit, aber die kreative Erforschung neuer Strukturen und Vorgehensweisen ist eine großartige Übung für Entwickler, die uns lernen lässt. Dieser Prozess kann durch ein starres Gerüst gehemmt werden, durch das Sie sich daran gewöhnen, die kreative Seite Ihres Gehirns zu drehen und Quantität über Qualität zu setzen. Es wird immer einen Platz für organische Designstrukturen geben, die sich von der Norm lösen und ihren eigenen Usability-Pfad beschreiten.
Erzwungene semantische Änderungen
Wenn Sie ein erfahrener Entwickler sind, haben Sie wahrscheinlich viele bevorzugte HTML- und CSS-Elemente und -Selektoren. Die Verwendung eines CSS-Frameworks zwingt Sie zur Einführung eines neuen Systems, das zunächst unangenehm sein kann. Die Lernkurve ist nicht zu steil, kann jedoch ärgerlich sein, wenn Sie sich in Ihre Richtung bewegen.
Schlussgedanken
Wie Sie sehen, gibt es auf jeden Fall viele gültige Argumente. Es hängt wirklich von Ihrem persönlichen Workflow und Ihren Vorlieben ab. Teilen Sie uns mit, was Sie von CSS-Frameworks halten und welche Sie verwenden.
Ich persönlich liebe es immer noch, von Grund auf zu programmieren (oder zumindest aus meiner eigenen früheren Arbeit). Sie können das Gefühl der Errungenschaft nicht übertreffen, wenn Sie eine Site von Grund auf erstellen. Die Recherche zu diesem Artikel hat mich jedoch dazu inspiriert, mit ein paar Frameworks zu experimentieren. Sie alle wirken ein wenig schwer mit dem ungenutzten Code, so dass ich am Ende einfach meinen eigenen personalisierten Rahmen erstellen könnte, der meinen Bedürfnissen etwas besser entspricht.