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

https://stackoverflow.com/questions/203069

03-07-2019
|

Frage

Beim Lesen auf einem anderen Forum habe ich durch die Welt der CSS Frameworks kam haben. Der, den ich habe auf speziell gesucht Blueprint . Ich habe mich gefragt, ob jemand über CSS-Frameworks gekommen waren, deuten darauf hin, welche die beste ist, und wenn sie wert sind die Mühe?

Lösung

CSS 'Gerüste' fehlt vollständig den Punkt.

CSS ist nicht wie JavaScript, in dem Sie eine Basisbibliothek / Rahmen umfassen kann und dann rufen Funktionen und Objekte aus es auf höherer Ebene zu tun. Alles, was ein CSS-Framework können Sie geben, ist deklarative Regeln: einige Standard-Browser-Regel-Reset Sachen, einige Klassenstile gezwungen werden, um Ihre Seite zu Autor und Layout-Regeln mit ‚schweben‘ und ‚klar‘. Sie können, dass in ein paar Zeilen CSS selbst schreiben, anstatt in der aufblasen von hundert Rahmenregeln zu ziehen.

Die ‚Grid-Layout‘ Sachen insbesondere geht an die schlechten alten Zeiten zurück Ihre Präsentation in Ihrem Markup der Vermischung. ‚Div class =‚span-24‘‘ ist nicht besser als eine Tabelle, werden Sie dort gehen müssen zurück und das Markup zu ändern, das Layout zu beeinflussen. Und alle Frameworks ich gesehen habe sind auf Basis fester Pixelboxen schwebte, so dass es unmöglich ist, eine Flüssigkeit Layout zugänglich auf einer breiten Palette von Fenstergrößen zu erstellen.

Es ist rückwärts-Authoring, nur von Nutzen für jemand zu viel Angst, eine CSS-Regel zu schreiben.

Andere Tipps

~~Also, niemand auf diese Frage noch geantwortet hat (obwohl ich ein paar upvotes gesehen habe), so~~ Ich werde zumindest versuchen, die zweite Frage in dieser Eingabeaufforderung zu bekämpfen.

CSS Frameworks sind groß; wie alle anderen Rahmen, reduzieren sie die Entwicklungszeit und lassen Sie sich auf ortsspezifische Design und CSS arbeiten sofort. Sie denken an harten Entscheidungen, so dass Sie nicht zu tun haben.

Leider gibt es zwei Nachteile auf die Verwendung eines Rahmens (im Allgemeinen):

Der Rahmen bestimmt die Gesamtstruktur und die Mechanik des CSS-Code. Nun, ich spreche nicht über ein CSS-Reset (diese sind nützlich in ihrem eigenen Recht, aber sie sind nicht wahr Gerüste); Ich spreche von einem ehrlichen zu guten Rahmen, dass bereits die Entscheidungen über das, was semantische Tags hat Sie in Ihrem Dokument verwendet werden werden, usw. Als solche sind Sie auf dem Rahmen abhängig gemacht, und wenn es einen Fehler im Rahmen, werden Sie die meisten haben in der Regel, es selbst zu reparieren.
Frameworks sind keine Entschuldigung für blind für Cross-Browser / erweiterte CSS-Probleme zu sein. Sie werden immer in sie laufen, wie Sie es mit einem PHP oder JavaScript-Framework arbeiten würde. Und Sie müssen wissen, wie man mit ihnen umgehen. Es gibt ein gemeinsames sagen, dass Sie Ihren eigenen Rahmen zuerst schreiben sollte, bevor jemand anderes verwendet wird.

einen kurzen Blick auf Blaupause machen, habe ich es nicht wirklich einen Rahmen nennen; vielleicht ein Reset mit ein paar zusätzlichen Extras auf.

Ich habe bei Blueprint sah und ein paar andere, und die einzige CSS ‚Rahmen‘ Ich würde empfehlen, ist zurücksetzen Sheets viel mit Layout zu helfen. Ich bleibe in der Regel mit einem Reset-Stylesheet und gehen von dort aus. Aber wenn Sie nicht viel von CSS Erfahrung YUI Grids haben könnten Sie etwas Zeit sparen.

Compass ist ein tatsächlicher CSS-Framework in das Gefühl, dass es nicht nur Vorlagen (beide YUI und Bauplan), sondern auch wiederverwendbare Konstrukte und auf höherer Ebene Erklärungen gibt, während Sie immer noch vertraut CSS-Syntax zu geben.

Nehmen Sie sich Zeit zu studieren und zu verstehen (wirklich verstehen!) Ein paar CSS-Frameworks wie Blueprint und YUI und CSS-Resets wie Eric Meyer. Dann nehmen Sie die Zeit, um gemeinsam Ihr eigenes Reset und / oder Rahmen auf der Grundlage Ihrer Arbeitsweise und die Art von Websites zu bauen.

Ich persönlich verwende ich die meisten des Eric Meyer zurückgesetzt mit einigen Klassen und setzt meine eigenen, und ein paar Ideen von Blueprint und YUI.

Ich sah vor kurzem Eric Meyer einen Vortrag über CSS Frameworks geben, in dem er die Frage gestellt: „Ja, welches ist die richtige für mich“ Er beantwortet dann die Frage durch eine leere Folie zeigt. Sein Punkt war, dass es sicherlich einige nützliche Konzepte gebaut in den meisten Resets und Frameworks, aber die, die Ihnen am besten passen ist derjenige, der Sie für sich selbst schreiben (es ist die Mühe wert).

Verwendung von CSS-Frameworks '?

Wenn Sie unter Druck sind für die Zeit.
Wenn Sie nicht wissen, CSS, und dies nicht tun kennen jemanden, der schreiben kann es für Sie.
Wenn Sie nicht allzu kostbar über Normen etc.

Ich weiß, dass Programmierer, die wirklich glücklich gewesen seinen Plan zu verwenden, oder 960, wie es sie auf ihrem eigenen zusammen ein Layout setzen können, ohne auf einen Front-End-Entwickler zu drehen. Dies ist ideal für persönliche Projekte oder Start-ups mit begrenzten Ressourcen.

Wenn Sie bereits anständige Kenntnisse von CSS haben, dann vermutlich haben Sie eine anständige Bibliothek von Lager-Layouts bereits, so dass Sie eindeutig nicht einen Rahmen brauchen.

Allerdings, wenn Sie ein Anfänger sind und müssen nur etwas bis bekommen und läuft, dann könnten Sie auf einen Rahmen drehen, wie es auch grundlegende Layout viel einfacher, und die Bekämpfung von Browser-Kompatibilität macht.

Nachdem alles gesagt, dass viele Frameworks aus der Box keine Verwendung einiger schrecklichen Klassennamen machen usw. Ich einige Websites kennen, die einen Rahmen als Ausgangspunkt genommen haben und dann angepasst es mit ihren eigenen Klasse und ID-Tags. Aber klar gibt es ein bisschen auch in diesem Rewrite Arbeit beteiligt. Mit so etwas wie Kompass, wie oben erwähnt, hilft um das zu bekommen.

So, CSS-Frameworks - sie können Sie Zeit sparen, auf Kosten der Semantik. Sie könnten auch Ihrem Wissen über CSS verletzt, aber das ist mehr bis zu wie viel Sie investieren in das Thema Lernen im Allgemeinen. Egal, ob Sie von ihnen Gebrauch machen, ist bis zu Ihnen.

Sie würden muss sich fragen, wie effektiv die verfügbaren Frameworks bei der Lösung Ihrer Probleme. Haben sie Ihre Anforderungen?

einen Rahmen verwenden, können Sie einige Regeln oder Details auf Pixelebene gesetzt und widmen den Rest Ihrer Zeit zur Umsetzung und Herstellung. Es ist eine massive Steigerung der Produktivität. Wenn Sie sich viel Zeit Einstellen Dinge um einige Pixel spät im Projekt (micro Verwaltung des Design) zu finden, es ist ein Zeichen dafür, dass ein Rahmen nützlich sein kann.

Tipp # 17 in Der Pragmatische Programmierer sagt: "Programm der Nähe der Problembereich". eine Abstraktionsschicht verwenden, können Sie näher an die Lösung der wirklichen Probleme der Layout erhalten. Zum Beispiel: Sie können die Benutzerfreundlichkeit der Verbesserung mit der zusätzlichen Zeit, die Sie lieber konzentrieren können als kleinere Anpassung von Pixeln.

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

Bei einem kürzlichen Projekt habe ich meine eigenen Rahmen, weil wir sehr begrenzte Ressourcen hatten und die beliebte Frameworks nicht tun, was ich wollte. Dann stellte ich das Design-Team PSDs bis zu dem gleichen Raster Snap I eingesetzt.

Ein Rahmen hat keine bestimmte Implementierung von CSS sein. Es muss nicht etwas aufgebläht Sie von der interweb oder etwas Umsetzung veraltete Ideen heruntergeladen werden. Es ist nur eine Technik für einen Job zu erledigen. Ich wäre nicht überrascht, wenn einige Programmierer bereits ihre eigenen Rahmenbedingungen haben und nicht einmal wissen es. In der Tat, wenn Sie das DOM als eine Reihe von Standard-Elementen betrachten Sie mit CSS erweitern, dann ist das ein Framework per Definition.

Ich habe wirklich einen guten Teil der letzten 24 Stunden untersucht diese auf meinem eigenen, heh. Meine Schlussfolgerung war, dass ein schönes Reset (I verwendet YUI zurücksetzen ), und vielleicht etwas anderes set Baseline-stuff ( YUI Fonts war in meinem Fall lohnt, vielleicht die "extra Leckereien" von Blueprint würde in deinen sein) ist eine gute Idee. Aber ein „Rahmen“ --- die in der Regel ist so etwas wie YUI Grids --- zu restriktiv ist, zwingt Sie ihre Klassennamen, IDs, etc. zu verwenden und nur selten den Einbau in Ihrer Website wie handgemacht CSS würde.

Also kurz gesagt: Resets scheinen recht nett; es ist gut, all die Variation zum Beispiel zu beseitigen margin-vs-Polsterung für Listen oder Absatzabstand, oder was auch immer. Aber das ist so weit ich es dauern würde.

Ich habe es nicht benutzt ja, aber ich denke, emastic gut sein kann Alternative lohnt eine Prüfung. es ist ähnlich wie Bauplan in Umfang, sondern unterstützt auch die elastischen Layouts (daher der Name) und Sie können Werte in Pixel angeben, em oder% und sogar mischen.

Compass Ich denke, ist erstaunlich. Stellen Sie sicher, Sie sehen die Screencasts .

Ich bin mit 960.gs für ein paar Websites und finden es sehr einfach und leicht und die Mühe wert . Spart mir eine Menge Arbeit auf dem Layout. Stellen Sie sicher, den benutzerdefinierte CSS-Generator zu überprüfen, die mit der festen Breite von 960 Pixeln weggeht.

Ich denke, dass diese Video-Präsentation von Site-Punkt-CEO Kevin Yank wird Ihre Frage beantworten. Ich kann Ihnen wirklich empfehlen, es zu sehen.

Kompass können Sie Ihre Rahmen der Klassen und IDs mit Ihrem eigenen semantischen Namen umbenennen, damit Sie es heraus überprüfen möchten. Es bietet auch Zugriff auf Sachen, die man einfach nicht mit Plain-Vanilla-CSS erhalten Sie wie Mixins.

Ich bin erstaunt über so genannte „CSS Experten“, die diese Werkzeuge kritisieren, ohne wirklich ausgegraben, die in und verwendet sie. Sind sie wesentlich? Nein. Wenn Sie Ihren eigenen Rahmen gefallen (Sie tun eine eigene, nicht wahr Ein CSS-Framework ist nur eine genau definierte Bibliothek - jeder sollte man verwenden) dann mit allen Mitteln, halten Sie es über die Verwendung. Niemand zwingt Sie anderen Frameworks zu verwenden und ich sehe nicht, Menschen, die Rahmenbedingungen zu sagen CSS-Puristen verwenden, dass sie „es falsch zu machen.“

Kritisieren Gerüste aus einem solchen Standpunkt offenbart nur eine Unsicherheit sowie eine Ignoranz. Zum Beispiel ist der Begriff lächerlich, dass eine Person mit einem Tool wie Compass ohne zu wissen, CSS verwenden würde. Sie erkennen, richtig, dass ein Rahmen im Allgemeinen nicht alle CSS für Sie nicht schreiben? Sie können immer noch ausbrechen und Ihre eigenen CSS im Rahmen der meisten Frameworks schreiben. In der Tat, wenn Sie nicht über CSS wissen könnte schnell frustriert.

Für mich, ich schätze, die einen Rahmen, da es bereits dokumentiert ist, die von Hunderten von anderen Benutzern getestet, und ich kann meine eigenen Klassen und Ids über Compass gelten. Wenn ich brauche etwas, das den Rahmen für die nicht geeignet ist, dann werde ich meinen eigenen Code.

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

Ich sollte hinzufügen, dass diese CSS Frameworks funktionieren gut, weil sie in Themen-Anwendungen verwendet werden. Das heißt, wenn Sie an den Regeln halten dann von einem zum nächsten Schalt so einfach ist, einen Wert in einer Eigenschaftendatei als zu ändern.

I-Modell mit viel Erfolg auf einer Website verwendet haben (ich konnte die Seite hier erwähnen, aber ich bin sicher, würde die Post als Spam markiert!). Ich bin nicht sicher, ob ich es in Zukunft nutzen werden aber, weil eine der Ideen von CSS ich dachte, war nicht das Layout Logik hart codiert haben. Sie sollten nicht CSS-Elemente genannt Spanne-24 und Span-12, um das Layout zu definieren, sondern so etwas wie searchBox und maincontent haben. Mindestens das ist, wie ich es sehe.

Gute Verbindung, die ich gefunden: Top 12 CSS Frameworks und wie sie verstehen

Hier ist mein Blog-Post über CSS Frameworks Wenn verwenden CSS-Framework?

Der einzige Weg, den ich kenne, einen CSS-Framework zu verwenden und semantisches Markup zu halten, ist eine höhere Abstraktionsebene zu verwenden. Im Moment ist Compass die einzige, die ich bin mir bewusst, das ist reif genug, um zu verwenden, aber Nicole Sullivan scheint mit ihrem „Object-Oriented CSS“ Projekt dabei einige interessante Sachen zu werden.

Ich finde Compass' geschickten Einsatz von Sass Mixins brillant zu sein, und ein großer Schritt in Richtung der Heilige Gral der wartbar semantisches Markup. Ich glaube nicht, dass ich wollen würde, einen Rahmen wie Blueprint oder YUI ohne eine Abstraktion wie Compass verwenden Präsentation Klassen aus dem Markup zu halten.

BTW, gibt es eine gut aussehende CSS-Framework Elastic genannt, die gut genug sieht, dass ich überlege es Compass hinzugefügt wird.

Ich glaube, CSS über Einfachheit. Das Ziel ist, eine oder zwei Stellen zu haben, um zu überprüfen, wenn Sie zwischen der HTML und Ihrem Stylesheet sind verweisen. Das Hinzufügen von mehr Linien und vor allem Linien, die Sie nicht schreiben und sind wahrscheinlich nicht so vertraut mit, wird die Komplexität dadurch Volatilität des CSS-Code exponentiell erhöhen.

würde ich Ihre Layouts vorschlagen, wie Sie sie schreiben und ein generisches Template-System aus, dass entwickeln. Während ich liebe machen CSS mehr modular, oft und je nach Ausführung kann Ihr CSS sehr fallspezifisch sein und schon gar nicht modular aufgebaut.

Ich habe Plan auf ein paar einmaligen Sites verwendet und es auf jeden Fall eingesparte Zeit, vor allem im Cross-Browser-Tests.

Es saugt definitiv Präsentation Code in Ihre Markup hinzufügen, obwohl auf der hellen Seite lesbar es ist. Während ich das Konzept der Liebe „können Sie neu zu gestalten, ohne das Markup zu berühren“, wenn Sie eine Website sind produzieren, wo das wirklich nicht sowieso passieren wird und Sie es gestern getan gerade brauchen, Blaupause etwas ist, zu betrachten.

Es gibt auch Nachteile in welchen Arten von Layouts es aber machbar erstellen kann. Wenn Sie die Website von Anfang an auf einem strengen Raster Drahtmodell, wird es viel einfacher sein, in den Rahmen mit einem Minimum an Aufwand umzusetzen.

Ich habe Blueprint und YUI verwendet, aber ich immer frustriert mit einigen der Namen, die sie ihre ID und Klassen geben.

die jeweils ihre eigenen, aber ich ziehe Dinge von Grund auf neu machen, aber nach einer Weile entwickeln Sie einen Prozess, in dem Sie Ihre bisherige Arbeit verwenden und es auf neue Projekte und nur einige Optimierungen machen, um die Website zu machen aussehen so, wie Sie möchten es.

Seien Sie sicher, eine gute Namenskonvention zu verwenden, nur für den Fall, dass jemand anderes die Straße hinunter kommt die CSS zu bearbeiten, dann werden sie eine gute Idee haben, was jeder Stilnamen eingegeben werden.

Craig,

Compass ist das, was Sie suchen: ermöglicht es Ihnen, Ihren Plan CSS-Klassen wie „span-24“ mit Ihrem eigenen Namen zu benennen. Es erweitert auch CSS-Funktionalität mit Variablen und Mixins. Wahrlich, ohne diejenigen, die vorzeitig Rahmenbedingungen beurteilen zu haben ausgecheckt Compass sind „fehlt der Punkt.“ Es ist eine Art, wie die Leute, die vor uns Jahren gesagt, dass wir den Punkt fehlen von CSS anstelle von HTML-Tabellen für unsere Layouts verwenden.

-Matt

Besuche http://www.ez-css.org/ . eine der einfachsten und leichtesten CSS-Framework zu arbeiten. :)

Werfen Sie einen Blick auf diese Demo: http://www.richstyle.org/demo-web.php Dieser Rahmen wird auf Idee, dass „HTML-Tags genug sein sollte“. Ich denke, Wiederverwendbarkeit ist der wichtigste Faktor für eine Softwarekomponente der Auswahl, einschließlich einem Web-Framework. Für Web-Entwickler-Frameworks, verpflichten, je mehr Sie auf Normen, desto mehr werden Sie garantieren die Wiederverwendbarkeit.

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow