Was ist das beste CSS-Framework und sind sie die Mühe wert?

Beim Lesen in einem anderen Forum bin ich auf die Welt der CSS-Frameworks gestoßen. Das, was ich mir speziell angesehen habe, ist BluePrint . Ich habe mich gefragt, ob jemand auf CSS-Frameworks gestoßen ist, welche die besten sind und ob sich die Mühe lohnt.

CSS-Frameworks verfehlen den Punkt völlig.

CSS ist nicht wie JavaScript, bei dem Sie eine Basisbibliothek / ein Basisframework einbinden und dann Funktionen und Objekte daraus aufrufen können, um übergeordnete Arbeiten auszuführen. Alles, was ein CSS-Framework Ihnen geben kann, sind deklarative Regeln: einige standardmäßige Dinge zum Zurücksetzen von Browserregeln, einige Klassenstile, für die das Erstellen Ihrer Seite erzwungen werden muss, und Layoutregeln mit 'float' und 'clear'. Sie können das in ein paar Zeilen CSS selbst schreiben, anstatt sich auf hundert Framework-Regeln einzulassen.

Insbesondere das Thema „Rasterlayout“ geht auf die schlechten alten Zeiten zurück, als Sie Ihre Präsentation in Ihr Markup gemischt haben. 'div class = "span-24"' ist nicht besser als eine Tabelle. Sie müssen dorthin zurückkehren und das Markup ändern, um das Layout zu beeinflussen. Alle Frameworks, die ich gesehen habe, basieren auf schwebenden Boxen mit festen Pixeln, sodass es unmöglich ist, ein flüssiges Layout zu erstellen, auf das in einer Vielzahl von Fenstergrößen zugegriffen werden kann.

Es ist rückwärts verfasst und nur für jemanden von Nutzen, der zu ängstlich ist, um eine CSS-Regel zu schreiben.

Also hat noch niemand auf diese Frage geantwortet (obwohl ich ein paar positive Stimmen gesehen habe) Ich werde zumindest versuchen, die zweite Frage in dieser Aufforderung anzugehen.

CSS-Frameworks sind großartig; Wie jedes andere Framework verkürzen sie die Entwicklungszeit und ermöglichen es Ihnen, sofort an ortsspezifischem Design und CSS zu arbeiten. Sie denken über schwierige Entscheidungen nach, damit Sie nicht müssen.

Leider hat die Verwendung eines Frameworks (im Allgemeinen) zwei Nachteile:

1. Das Framework bestimmt die Gesamtstruktur und Mechanik Ihres CSS-Codes. Ich spreche jetzt nicht von einem CSS-Reset (diese sind für sich genommen nützlich, aber keine echten Frameworks). Ich spreche von einem ehrlichen bis guten Framework, das bereits die Entscheidung getroffen hat, welche semantischen Tags Sie in Ihrem Dokument verwenden werden usw. Als solches werden Sie vom Framework abhängig gemacht und wenn es einen Fehler gibt In diesem Rahmen müssen Sie das Problem am häufigsten selbst beheben.

2. Frameworks sind keine Entschuldigung dafür, dass sie browserübergreifende / erweiterte CSS-Probleme nicht kennen. Sie werden immer auf sie stoßen, genau wie Sie mit einem PHP- oder JavaScript-Framework arbeiten würden. Und Sie müssen wissen, wie Sie mit ihnen umgehen sollen. Es gibt ein allgemeines Sprichwort, dass Sie zuerst Ihr eigenes Framework schreiben sollten, bevor Sie das eines anderen verwenden.

Bei einem kurzen Blick auf Blueprint würde ich es nicht wirklich als Framework bezeichnen. Vielleicht ein Reset mit ein paar zusätzlichen Extras.

Ich habe mir BluePrint und einige andere angesehen und das einzige CSS-Framework, das ich empfehlen würde, ist YUI Grids

Vorteile:

• Geschrieben von einem der besten Frontend-Ingenieure (IMO) (Nate Koechley)
• Sehr klein. 4 KB
• Sehr flexibel (1000 verschiedene Layouts)
• Unterstützt Layouts mit flüssiger Breite (100%) sowie voreingestellte Layouts mit fester Breite bei 750px, 950px und 974px sowie die Möglichkeit, sie einfach an eine beliebige Anzahl anzupassen.
• Unterstützt die einfache Anpassung der Breite für Layouts mit fester Breite.
• Vorlagenspalten sind unabhängig von der Quellreihenfolge, sodass Sie Ihren wichtigsten Inhalt in der Markup-Ebene an erster Stelle platzieren können, um die Zugänglichkeit und Suchmaschinenoptimierung (SEO) zu verbessern.
• Selbstlöschende Fußzeile. Egal welche Spalte länger ist, die Fußzeile bleibt unten.
• Layouts mit weniger als 100% werden automatisch zentriert.
• Etwas semantische Klassennamen (besser als oben, links, rechts usw.)

Nachteile:

• Viel zusätzliches Markup im Vergleich zu handgeschriebenem HTML und CSS
• Es erfordert etwas Lernen, um herauszufinden, wie komplexe Layouts erstellt werden

Wie andere bereits geschrieben haben, gibt es keine wirklichen "Frameworks" für CSS. Das Zurücksetzen von Stylesheets hilft auch beim Layout sehr. Normalerweise bleibe ich bei einem Reset-Stylesheet und gehe von dort aus. Wenn Sie jedoch nicht viel Erfahrung mit CSS haben, können Sie mit YUI Grids Zeit sparen.

Compass ist ein tatsächliches CSS-Framework in dem Sinne, dass es Ihnen nicht nur Vorlagen (sowohl YUI als auch Blueprint), sondern auch wiederverwendbare Konstrukte und übergeordnete Deklarationen bietet und Ihnen dennoch die vertraute CSS-Syntax bietet.

Nehmen Sie sich Zeit, um einige CSS-Frameworks wie BluePrint und YUI zu studieren und zu verstehen (wirklich zu verstehen!), Und CSS-Resets wie Eric Meyers. Nehmen Sie sich dann die Zeit, um Ihr eigenes Reset und / oder Framework basierend auf Ihren Arbeitsmethoden und der Art der von Ihnen erstellten Websites zusammenzustellen.

Persönlich verwende ich den größten Teil des Eric Meyer-Resets mit einigen eigenen Klassen und Resets sowie einigen Ideen von BluePrint und YUI.

Ich habe kürzlich gesehen, wie Eric Meyer einen Vortrag über CSS Frameworks hielt, in dem er die Frage stellte: "Also, welches ist das richtige für mich?" Anschließend beantwortete er die Frage mit einer leeren Folie. Sein Punkt war, dass es sicherlich einige nützliche Konzepte gibt, die in die meisten Resets und Frameworks integriert sind, aber dasjenige, das am besten zu Ihnen passt, ist das, das Sie für sich selbst schreiben (die Mühe lohnt sich).

Warum CSS-Frameworks verwenden?

• Wenn Sie unter Zeitdruck stehen.

• Wenn Sie CSS nicht kennen und niemanden kennen, der es für Sie schreiben kann.

• Wenn Sie nicht übermäßig wertvoll in Bezug auf Standards usw. sind.

Ich kenne Programmierer, die sich sehr über Blueprint oder 960 gefreut haben, da sie so selbst ein Layout zusammenstellen können, ohne sich an einen Front-End-Entwickler zu wenden. Dies ist ideal für persönliche Projekte oder Startups mit begrenzten Ressourcen.

Wenn Sie bereits über gute CSS-Kenntnisse verfügen, verfügen Sie vermutlich bereits über eine anständige Bibliothek mit Bestandslayouts, sodass Sie eindeutig kein Framework benötigen.

Wenn Sie jedoch Anfänger sind und nur etwas zum Laufen bringen müssen, können Sie sich an ein Framework wenden, da es das grundlegende Layout erheblich vereinfacht und auch die Browserkompatibilität in Angriff nimmt.

Abgesehen davon verwenden viele Frameworks einige schreckliche Klassennamen usw. Ich kenne einige Websites, die ein Framework als Ausgangspunkt genommen und es dann mit ihren eigenen Klassen- und ID-Tags angepasst haben. Aber es ist natürlich auch ein bisschen Arbeit mit diesem Umschreiben verbunden. Die Verwendung von Kompass, wie oben erwähnt, hilft dabei, dies zu umgehen.

CSS-Frameworks - sie können Ihnen auf Kosten der Semantik Zeit sparen. Sie können auch Ihr Wissen über CSS beeinträchtigen, aber das hängt mehr davon ab, wie viel Sie in das Erlernen des Fachs im Allgemeinen investieren. Ob Sie sie nutzen, liegt bei Ihnen.

Sie müssen sich fragen, wie effektiv die verfügbaren Frameworks bei der Lösung Ihrer Probleme sind. Erfüllen sie Ihre Anforderungen?

Mithilfe eines Frameworks können Sie einige Regeln oder Details auf Pixelebene festlegen und den Rest Ihrer Zeit der Implementierung und Produktion widmen. Es ist ein massiver Produktivitätsschub. Wenn Sie spät im Projekt Zeit damit verbringen, die Dinge um einige Pixel anzupassen (Mikromanagement des Designs), ist dies ein Zeichen dafür, dass ein Framework nützlich sein kann.

Tipp Nr. 17 in The Pragmatic Programmer lautet: "Programm in der Nähe der Problemdomäne". Die Verwendung einer Abstraktionsebene kann Sie der Lösung der tatsächlichen Layoutprobleme näher bringen. Beispiel: Möglicherweise können Sie sich darauf konzentrieren, die Benutzererfahrung mit der zusätzlichen Zeit zu verbessern, anstatt geringfügige Anpassungen der Pixel vorzunehmen.

Dies bedeutet nicht, dass Sie Qualität für Quantität opfern müssen. Es geht um Effizienz.

Bei einem kürzlich durchgeführten Projekt habe ich mein eigenes Framework erstellt, da wir nur über sehr begrenzte Ressourcen verfügten und die beliebten Frameworks nicht das taten, was ich wollte. Dann habe ich die PSDs des Designteams so eingerichtet, dass sie an demselben Raster ausgerichtet sind, das ich bereitgestellt habe.

Ein Framework muss keine bestimmte Implementierung von CSS sein. Es muss nicht etwas Aufgeblähtes sein, das Sie aus dem Internet heruntergeladen haben, oder etwas, das veraltete Ideen umsetzt. Es ist nur eine Technik, um einen Job zu erledigen. Es würde mich nicht wundern, wenn einige Codierer bereits ihre eigenen Frameworks haben und es nicht einmal wissen. Wenn Sie das DOM als eine Reihe von Standardelementen betrachten, die Sie mit CSS erweitern, ist dies per Definition ein Framework.

Ich habe tatsächlich einen guten Teil der letzten 24 Stunden damit verbracht, dies selbst zu untersuchen, heh. Mein Fazit war, dass ein netter Reset (ich habe YUI Reset verwendet ) und vielleicht etwas anderes, um Baseline-Inhalte festzulegen ( YUI-Schriftarten haben sich in meinem Fall gelohnt; vielleicht wären die "zusätzlichen Extras" von BluePrint in Ihrem) eine gute Idee. Ein "Framework" - das im Allgemeinen so etwas wie YUI-Grids ist - ist jedoch zu restriktiv und zwingt Sie dazu, ihre Klassennamen, IDs usw. zu verwenden, und passt selten wie handgemachtes CSS in Ihre Site.

Kurz gesagt: Resets scheinen ziemlich nett zu sein; Es ist gut, alle Variationen zu beseitigen, z. B. Rand-gegen-Auffüllen für Listen, Absatzabstände oder was auch immer. Aber so weit würde ich gehen.

Ich habe es ja nicht benutzt, aber ich denke, Emastic ist eine gute Alternative, die einen Scheck wert ist. Es ähnelt der Blaupause im Umfang, unterstützt jedoch auch elastische Layouts (daher der Name), und Sie können Werte in px, em oder% angeben und diese sogar mischen.

Kompass finde ich erstaunlich. Stellen Sie sicher, dass Sie den Screencast sehen .

Ich verwende 960.gs für einige Websites und finde es sehr einfach und leicht und die Mühe wert. Spart mir viel Arbeit am Layout. Stellen Sie sicher, dass Sie den benutzerdefinierten CSS-Generator überprüfen, der mit der festen Breite von 960 Pixel nicht mehr funktioniert.

Ich denke, dass diese Videopräsentation von Site Point-CEO Kevin Yank Ihre Frage beantworten wird. Ich empfehle es wirklich zu sehen.

Mit Compass können Sie die Klassen und IDs Ihres Frameworks mit Ihren eigenen semantischen Namen umbenennen. Vielleicht möchten Sie es überprüfen. Es bietet auch Zugriff auf Dinge, die Sie mit einfachem Vanille-CSS wie Mixins einfach nicht bekommen.

Ich bin erstaunt über sogenannte "CSS-Experten", die diese Tools kritisieren, ohne sich wirklich damit beschäftigt zu haben. Sind sie wesentlich? Nein. Wenn Ihnen Ihr eigenes Framework gefällt (Sie haben eines, oder? Ein CSS-Framework ist nur eine sorgfältig definierte Bibliothek - jeder sollte eines verwenden), verwenden Sie es auf jeden Fall weiter. Niemand zwingt Sie, andere Frameworks zu verwenden, und ich sehe keine Leute, die Frameworks verwenden, die CSS-Puristen sagen, dass sie "es falsch machen".

Die Kritik an Frameworks von einem solchen Standpunkt aus zeigt nur eine Unsicherheit sowie eine Unwissenheit. Zum Beispiel ist die Vorstellung lächerlich, dass eine Person ein Tool wie Compass verwenden würde, ohne CSS zu kennen. Sie erkennen, richtig, dass ein Framework im Allgemeinen nicht Ihr gesamtes CSS für Sie schreibt? Sie können im Kontext der meisten Frameworks immer noch Ihr eigenes CSS erstellen. Wenn Sie CSS nicht kennen, werden Sie möglicherweise schnell frustriert.

Für mich selbst schätze ich ein Framework, da es bereits dokumentiert und von Hunderten anderer Benutzer getestet wurde und ich meine eigenen Klassen und IDs über Compass anwenden kann. Wenn ich etwas brauche, für das das Framework nicht geeignet ist, codiere ich mein eigenes.

Matt Raible von AppFuse hatte vor einiger Zeit einen CSS Framework-Wettbewerb, um CSS Frameworks für AppFuse zu entwickeln. Die Ergebnisse werden hier veröffentlicht . Es gibt einige Variationen und ich habe einige selbst verwendet, weil ich AppFuse verwende und sie sehr gut finde.

Ich sollte hinzufügen, dass diese CSS-Frameworks gut funktionieren, da sie in themenbezogenen Anwendungen verwendet werden. Wenn Sie sich also an die Regeln halten, ist das Wechseln von einem zum nächsten so einfach wie das Ändern eines Werts in einer Eigenschaftendatei.

Ich habe BluePrint mit viel Erfolg auf einer Website verwendet (ich könnte die Website hier erwähnen, aber ich bin sicher, dass der Beitrag als Spam markiert wird!). Ich bin mir jedoch nicht sicher, ob ich es in Zukunft verwenden werde, da ich dachte, dass eine der Ideen von CSS darin bestand, die Layoutlogik nicht fest zu codieren. Sie sollten keine CSS-Elemente namens span-24 und span-12 haben, um das Layout zu definieren, sondern so etwas wie searchBox und mainContent. Zumindest sehe ich das so.

Guter Link, den ich gefunden habe: Top 12 CSS Frameworks und wie man sie versteht

Hier ist mein Blogbeitrag über CSS-Frameworks. Wann soll das CSS-Framework verwendet werden?

Die einzige Möglichkeit, ein CSS-Framework zu verwenden und das semantische Markup beizubehalten, ist die Verwendung einer übergeordneten Abstraktion. Im Moment ist Compass der einzige, von dem ich weiß, dass er ausgereift genug ist, um ihn zu verwenden, aber Nicole Sullivan scheint mit ihrem "Object-Oriented CSS" -Projekt einige interessante Dinge zu tun.

Ich finde Compass 'klugen Einsatz von Sass-Mixins brillant und ein großer Schritt in Richtung des Heiligen Grals des wartbaren semantischen Markups. Ich glaube nicht, dass ich ein Framework wie Blueprint oder YUI ohne eine Abstraktion wie Compass verwenden möchte, um Präsentationsklassen aus dem Markup herauszuhalten.

Übrigens gibt es ein gut aussehendes CSS-Framework namens Elastic, das gut genug aussieht, dass ich erwäge, es zu Compass hinzuzufügen.

Ich glaube, bei CSS geht es um Einfachheit. Das Ziel besteht darin, ein oder zwei Stellen zu überprüfen, wenn Sie zwischen dem HTML-Code und Ihrem Stylesheet referenzieren. Das Hinzufügen weiterer Zeilen und insbesondere von Zeilen, die Sie nicht geschrieben haben und mit denen Sie wahrscheinlich nicht so vertraut sind, erhöht die Komplexität exponentiell und erhöht dadurch die Volatilität des CSS-Codes.

Ich würde Ihre Layouts beim Schreiben vorschlagen und daraus ein generisches Vorlagensystem entwickeln. Obwohl ich es liebe, CSS häufig und je nach Design modularer zu gestalten, ist Ihr CSS möglicherweise sehr fallspezifisch und überhaupt nicht modular.

Ich habe Blueprint auf einigen einmaligen Websites verwendet und es hat definitiv Zeit gespart, vor allem beim Cross-Browser-Testen.

Das Hinzufügen von Präsentationscode zu Ihrem Markup ist definitiv zum Kotzen, obwohl es auf der positiven Seite lesbar ist. Während ich das Konzept "Sie können neu gestalten, ohne das Markup zu berühren" liebe, ist Blueprint etwas, das Sie sich ansehen sollten, wenn Sie eine Website produzieren, auf der das sowieso nicht passieren wird und die Sie erst gestern erledigen müssen.

Es gibt auch Kompromisse bei den Arten von Layouts, die realisierbar sind. Wenn Sie die Site von Anfang an in einem strengen Raster mit einem Drahtgitter versehen, ist es viel einfacher, sie mit minimalem Aufwand in das Framework zu übertragen.

Ich habe BluePrint und YUI verwendet, aber ich bin immer frustriert über einige der Namen, die sie mit ihrer ID und ihren Klassen angeben.

Für jeden das Richtige, aber ich bevorzuge es, Dinge von Grund auf neu zu machen, aber nach einer Weile entwickeln Sie einen Prozess, in dem Sie Ihre vorherigen Arbeiten verwenden und auf neue Projekte anwenden und nur einige Änderungen vornehmen, damit die Website so aussieht, wie Sie es möchten mag es zu.

Stellen Sie sicher, dass Sie eine gute Namenskonvention verwenden. Nur für den Fall, dass jemand anderes die CSS bearbeitet, hat er eine gute Vorstellung davon, worauf sich die einzelnen Stilnamen beziehen.

Craig,

Kompass ist das, wonach Sie suchen: Sie können Ihre Blueprint-CSS-Klassen wie "span-24" mit Ihren eigenen Namen umbenennen. Außerdem wird die CSS-Funktionalität um Variablen und Mixins erweitert. Wirklich, diejenigen, die Frameworks vorzeitig beurteilen, ohne Compass ausgecheckt zu haben, "verpassen den Punkt". Es ist wie bei den Leuten, die uns vor Jahren gesagt haben, dass wir den Punkt verfehlen, indem wir CSS anstelle von HTML-Tabellen für unsere Layouts verwenden.

-Matt

Schauen Sie sich http://www.ez-css.org/ an . eines der einfachsten und leichtesten CSS-Frameworks, an denen man arbeiten kann. :) :)

Schauen Sie sich diese Demo an: http://www.richstyle.org/demo-web.php Dieses Framework basiert auf der Idee, dass "HTML-Tags ausreichen sollten". Ich denke, die Wiederverwendbarkeit ist der wichtigste Faktor für die Auswahl einer Softwarekomponente, einschließlich eines Webframeworks. Je mehr Sie sich für Standards für Webframeworks engagieren, desto mehr garantieren Sie die Wiederverwendbarkeit.