Wann sollte ich ein CSS-Framework verwenden?


11

Was sind die Best-Practice-Szenarien für die Verwendung eines CSS-Frameworks? Wann ist es besser, Ihr eigenes CSS von Grund auf neu zu erstellen, als Frameworks zu verwenden?

Antworten:


11

CSS-Frameworks sind etwas knifflig, weil sie für mich keine wirklichen Frameworks sind. Sie sind einfach vordefinierte Klassen. Dies ist jedoch nicht Ihre Frage.

CSS-Frameworks eignen sich hervorragend für Modelle und Drahtmodelle. Ich würde nicht empfehlen, sie auf einer Live-Site zu verwenden, da sie Ihrem Markup bedeutungslose Klassen hinzufügen. ".span3" sagt mir nichts über den Inhalt, nur das Design.

Blueprint verfügt jedoch über einige coole Tools, mit denen Sie die Framework-Klassen und die semantischen Klassen kombinieren können, sobald Sie fertig sind.

Ich rolle immer mein eigenes CSS.


4
Ich bin mit Thorn007 in diesem Fall. CSS ist verdammt einfach, wenn es darum geht. Verwenden Sie einfach einen guten CSS-Reset und rollen Sie Ihren eigenen.
Jessegavin

3

Vermeiden Sie sie einfach, sie sind nichts als nervig.

Besonders dieser hier.

* { margin:0; padding:0; }

Meine größte Beschwerde ist, dass Sie, wenn Sie eine Site erben / pflegen, die einen Reset und / oder ein Framework verwendet, dieses Framework kennen müssen, bevor Sie die Site ändern können.

Wenn ich ein h1-Tag hinzufüge, erwarte ich bestimmte Dinge. Bei den meisten Zurücksetzungen werden alle Auffüllungen, Ränder, Blöcke usw. entfernt, sodass ein h1-Tag standardmäßig nicht mehr so ​​funktioniert, wie es sollte. Also muss ich zurückgehen und alles hinzufügen, was überhaupt da war.

Im Allgemeinen (meiner Erfahrung nach) sind es die Leute, die CSS nicht verstehen, die die Resets und Frameworks verwenden, und es verursacht mehr Arbeit für die Leute, die dies tun.


1
Eric Meyer und die Webentwickler von Yahoo verstehen CSS und verwenden CSS-Resets. Nach meiner Erfahrung sparen sie viel Zeit und Kopfschmerzen, wenn sie versuchen, eine browserübergreifende Konsistenz zu erreichen. - CSS-Frameworks sind jedoch lahm.
Jessegavin

Wenn ich einen H1 - Tag füge ich bestimmte Dinge erwarte .. leider Sie müssen verschiedene Dinge von jedem Browser erwarten .. und damit die Notwendigkeit für CSS - Reset ( nicht Frameworks )
Gabriele Petrioli

h1 ist ein ziemlich schlechtes Beispiel, da Browser dazu neigen, unterschiedliche Ränder zu verwenden und so weiter. Persönlich bevorzuge ich ein "Set" zum Zurücksetzen - dh anstatt alles auf 0 zurückzusetzen, setze es einfach in dein eigenes Stylesheet!
DisgruntledGoat

* {margin:0; padding:0;}ist der wichtigste CSS-Reset von allen. Es werden margin-top/maring-bottomunter allen Tags sogar die pTags entfernt, sodass zwischen den einzelnen Zeilen kein großer Abstand mehr angezeigt wird. Sogar diese Website verwendet wahrscheinlich, p {margin:0;}sonst würde der Browser einen riesigen Raum zwischen jeder Zeile leben. Ich frage mich, wie man sagen kann, dass sie nerven.
Marco Demaio

2

Ich bin der Meinung, dass der einzige Service, den ein CSS-Framework bietet, ein Ausgangspunkt für diejenigen ist, die mit CSS nicht sehr vertraut sind.


2

Ich empfehle auch die Verwendung einer reset.css von Eric Meyer, aber ich denke, dass CSS- "Frameworks" für das Layout von Vorteil sein können. Mit Blueprint, YUI-Raster und 960-Raster können Sie einige sehr komplizierte Layouts erstellen, ohne das CSS selbst schreiben zu müssen.

Es wurden zwar Nachteile erwähnt, aber das Gleiche gilt für das Erstellen einer Website aus einem CMS, anstatt beispielsweise benutzerdefinierten Code zu verwenden. Sie können jedoch dennoch nützlich sein, und für viele Websites überwiegen die erzielten Vorteile alle überflüssigen CSS- oder Leistungsprobleme.


1

Wenn Sie tatsächlich ein eigenes Design implementieren, schreiben Sie ein eigenes CSS (es sei denn, jemand anderes hat genau das gewünschte Design geschrieben).

Angenommen, Sie schreiben einige Ihrer eigenen CSS, können "Frameworks" nützlich sein, wenn Sie Stile haben, die:

  1. an mehr als einem Ort verwendet; und
  2. kompliziert genug, um in ihre eigenen Klassen abzubrechen

Für wirklich einfache Stile ist es besser, Klassen zu verwenden, um anzugeben, was etwas ist (z. B. class="navigation"), und dann sein Aussehen zu definieren, indem Sie Stilregeln auf diese Klasse in Ihrem Stylesheet anwenden.

Bei komplexeren Stilen, die nicht unbedingt an ein Element gebunden sind (z. B. Layout-bezogene Stile, wie .span3sie Frameworks gerne benennen), ist es nichts Falsches, sie in eine Klasse einzufügen und diese Klasse im CSS anzuwenden. Sie können beide Ansätze zusammen verwenden.

Bei größeren, komplexeren Sites, bei denen Elemente wahrscheinlich auf unvorhersehbare Weise kombiniert werden, kann ein Framework-ähnlicher Ansatz wirklich dazu beitragen, dass Ihr Code überschaubar bleibt.

Ich würde sagen, dass Sie genauso gut Ihr eigenes „Framework“ schreiben könnten. Ich habe "Framework" in Anführungszeichen gesetzt, weil CSS wirklich keine so große Sprache ist. Sie könnten an einem Tag CSS: The Definitive Guide (Eric Meyer) lesen, dann den gesamten Code in z. B. Blueprint (einem CSS- „Framework“) lesen und ziemlich genau verstehen, was los ist. Möglicherweise müssen Sie die IE-Problemumgehungen ein wenig untersuchen, aber wir sprechen hier von mindestens einer Größenordnung weniger Komplexität als z. B. jQuery.


1

Ich benutze Blaupause für CSS.
CSS ist, wie alle oben sagen, wirklich unkompliziert.

In Wirklichkeit muss man jedoch die Plattform berücksichtigen.

Mit CSS erhöht die Rendering-Engine die Komplexität.

Gecko vs WebKit vs Presto vs Trident ... wer will das alles machen?

Was Ihnen hier ein "Framework" bietet, ist die Möglichkeit, Layouts zu schreiben, die höchstwahrscheinlich in allen Browsern funktionieren. Sie müssen also nicht nach dem IE 7-Quirksmode "WTF-am-I-Doing = -this-Crap" googeln fix oder etwas ähnlich Lächerliches.

Frameworks erledigen 90% des gewünschten Layouts, und Sie können später jederzeit Ihre eigenen Stile hinzufügen.

Um die Frage zu beantworten, würde ich sagen, wählen Sie ein beliebiges Framework aus und prüfen Sie, ob es für Sie funktioniert. Es könnte einfach sein. Dann sind Sie golden und können zu dem zurückkehren, was Sie eigentlich wollten. Wenn nicht, erweitern Sie es mit CSS und ändern Sie, was nicht funktioniert hat. Auf diese Weise behalten Sie den browserübergreifenden Vorteil bei, können ihn jedoch anpassen.

Als kleinen Vorteil können Sie sagen, wenn Sie einen auswählen und ihn die ganze Zeit verwenden und dann krank werden oder befördert werden und Ihren Nachfolger schulen müssen:

"Ja, ich habe Framework ABC verwendet. Docs sind hier. Code ist da. Training vorbei. Viel Glück."


0

Wenn es alle Ihre Bedürfnisse löst . (Dies basiert auf der Idee der Schneiderei .)

Aus dem einzigen Buch über Frameworks? http://www.oreilly.com/web-platform/free/book-of-html-css-frameworks.csp . (Nur verlinken, weil es hier kostenlos und relevant ist.)


Am besten schneiden Sie die relevanten Teile der Seite, auf die Sie verlinkt haben, aus und fügen sie ein. Ansonsten ist dies als Antwort eine Art Licht. Von Antworten nur auf Links wird hier abgeraten, da Links häufig im Laufe der Zeit unterbrochen werden. Können Sie diese Antwort aktualisieren, um dem OP und zukünftigen Benutzern mit etwas zu helfen, in das sie sich hineinversetzen können? Danke im Voraus!
Schranknoc
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.