Embedded CSS Hacks vs separaten Cascading Styles Blätter

Question

Ich glaube, das ist nicht die beliebte Haltung, aber ich bevorzuge eingebettete Hacks wie * und _ im Stylesheet lieber als separate IE spezifische Stylesheets verwenden. Zuerst habe ich verschiedene Stylesheets ausprobiert, aber ich fand heraus, dass die Stile für die gleichen Elemente mehrere Dateien umfassen, deren Pflege mühsam ist. Beim Ändern eines Stils im primären Stylesheet war es nicht offensichtlich, dass ich auch einen entsprechenden Stil in einem der IE-spezifischen Stylesheets hatte. Oft ändern sich diese Stile, wenn sie so geringfügig sind, wie zum Beispiel eine geringfügige Anpassung der Auffüllung, so dass die zusätzliche Zeit, um sie in jedem Browser zu testen, übertrieben erschien und daher nicht immer passierte.

Wenn der Hack nur direkt in das primäre Stylesheet eingefügt wurde, wäre es offensichtlich gewesen, dass der Stil für IE 6 angepasst und getestet werden musste. Ich kann Leute sagen hören, dass Sie jede Stiländerung in all Ihren unterstützten Browsern testen sollten, aber in der realen Welt finde ich diese Haltung unrealistisch, und ich sehe nicht alle Entwickler im Team, die damit durchkommen.

Ich verstehe, dass die Einbeziehung der Hacks Ihre CSS nicht validieren, aber ich habe festgestellt, dass ich die Validierungsergebnisse schnell scannen und die Fehler in Bezug auf diese Hacks ignorieren kann. Meiner Meinung nach wäre es mir lieber, wenn ich die Validierungsresultate interpretieren würde, als mit der fehlerhaften Darstellung der Site in IE 6. Ich habe auch woanders gelesen, wo Leute keine Hacks oder Stylesheets machen, sondern das Design anpassen/vereinfachen so wird es für alle Browser funktionieren. Leider hat der Entwickler, der das Design implementiert, diese Option nicht immer, wenn er nicht für das Design verantwortlich ist. Plus die Menge von Stunden, die ich gekämpft habe, um kleine Padding-Probleme zu bekommen, um in allen Browsern zu arbeiten, nur um einen Hack im Nachhinein zu vermeiden, scheint ziemlich verschwenderisch.

Ich interessiere mich für andere Gedanken und Rechtfertigungen für ihre Positionen zu diesem Paradigma.

Answer 1

Ich habe einige umfangreiche Arbeit mit CSS getan, kreuzt fast jeden Browser unter der Sonne, für kleine und große Projekte. Während es immer eine ästhetische Anziehungskraft auf jede Art von Code gibt, den Sie schreiben, denke ich, dass die größere Sorge Wartbarkeit ist ... und dies gilt für CSS ebenso wie für jede andere Art von Code.

Während Sie Ihre Hacks und andere css "Fixes" in separate Dateien organisieren, die über bedingte Logik geladen werden, ist das aus ästhetischer Sicht schön ... es kann tatsächlich Wartungsschwierigkeiten verursachen.

Nach meiner Erfahrung ist es am besten, Ihre Hacks mit dem Basis-CSS zu halten, das sie für einen bestimmten Browser reparieren. Dies hält CSS, das ein bestimmtes Element Ihrer Benutzeroberfläche an einem einzigen Ort formatiert, was die Verwaltung dieser CSS wesentlich einfacher macht, und macht auch klar, wo zukünftige Korrekturen für mögliche (oder wahrscheinlich) fiture Browser css Bugs platziert werden sollten.

Zusätzlich zu platzieren Sie Ihre Hacks direkt nach der Basis css sie beziehen sich, sollten Sie auch sicherstellen, klar, was ein bestimmter Hack, zusammen mit den Browsern der Hack unterstützt, mit Kommentaren behoben. Ich habe an einigen großen Projekten gearbeitet, die CSS umfangreich und auf fortgeschrittene Art und Weise verwendet haben, aber wir mussten IE6 weiterhin unterstützen. Langfristig lernten mein Team und ich (die übrigens alle C# -Entwickler waren ... bei diesem speziellen Job nicht nur codiert, sondern auch alle UI-Implementierungen nach von unseren Grafikdesignern erstellten UI-Mockups), dass man sie tatsächlich verwenden kann CSS, um ziemlich jede Seite ohne die Notwendigkeit für Hacks richtig zu stylen (es kann schwierig sein, und erfordert einige umfassende Kenntnisse, wie CSS funktioniert ... aber es ist möglich, fast jeden Fehler in IE und Firefox ohne Hacks ... einfach zu lösen geschickte/ordnungsgemäße Verwendung von gültigen CSS).

Bevor mein Team genug über CSS erfuhr, um das zu erreichen, hatten wir jedoch mehr Hacks, die wir zählen konnten. Indem wir unsere Hacks mit den von ihnen reparierten Basis-Css zusammenfassen und jeden Hack mit einem Grund markieren, und der Browser oder die Browser, die wir unterstützten, haben unsere monströsen CSS-Dateien lange haltbar gemacht. Dies wird nicht nur die Wartbarkeit verbessern ... sondern Sie lernen mehr über CSS und finden Wege, Hacks zu vermeiden ...Sie können sie nach und nach entfernen, indem Sie bestehendes CSS reparieren, um Ihre neuen Tricks zu verwenden. Da deine Hacks direkt neben dem CSS deine Verbesserung sind, ist es leicht Hacks loszuwerden, die nicht mehr benötigt werden.

Answer 2

Nun, ich falle irgendwie in das selbe Boot ... wenn ich eine * html #id einfügen kann, anstatt einen ganzen bedingten Kommentar und ein spezifisches ie6 Stylesheet zu machen, werde ich es tun. Es ist vielleicht nicht so elegant, aber es speichert eine komplett neue CSS-Datei in Maintan.

Allerdings, wenn ich am Ende viele * html und * Präfixe oder die ultra lange IE7 Hack (die ich nicht im Moment abrufen kann), werde ich ein bedingtes Stylesheet bevorzugen.

Ich weiß nicht wirklich * html als echter Hack sehen ... es ist ein gültiger Selektor (soweit ich weiß), es ist nur sollte nicht Arbeit, da kein Element HTML Eltern ist (mit Ausnahme einiger Grund in IE6). Wenn Sie jedoch eine Eigenschaft mit einem Unterstrich oder einem bestimmten Zeichen voranstellen, wird die -Selektor-Eigenschaft ungültig.

Eine andere, die mir nichts ausmacht ist mit display: inline für IE6, um den doppelten Rand zu beheben, wenn ein Element floated ist. Ich benutze dies in meinem Haupt-CSS, da es andere Browser nicht beeinflusst (nur Block-Level-Elemente können floated werden), und es ist viel einfacher zu pflegen. Ich lasse im Allgemeinen eine kleine Notiz, so etwas wie

#my-div { 
    diplay: inline; /* ie6 */ 
    float: left; 
    margin-left: 20px; 
} 

Also würde ich sagen, wenn es ein paar Hacks ist, ich habe es in meinem Haupt-CSS verlassen. Wenn es unhandlich wird (und es ist oft nicht so, wie ich die üblichen Wege kenne, wie der IE ausfällt), erstelle ich ein zusätzliches Stylesheet und verwende bedingte Kommentare.

Answer 3

das sind HACKS nicht CONDITIONALS.

versteh mich nicht falsch mache ich das gleiche: \ manchmal ist es auf einem Fall basierte Szenario. Wenn Sie mit großen Websites arbeiten, verwenden Sie CONDITIONALS.

Wenn du Mist machst, kümmerst du dich nicht um Hacks.

Unterschied ist folgender:

HACKS - Arbeit für den Augenblick, das heißt, bis jemand sie fixiert, die sie probally nicht conditionals - GARANTIERT

Answer 4

I bedingte Kommentare verwendet habe, zu arbeiten um die Seite in DIVs mit IDs zu verpacken, die auf die richtige IE-Version abzielen, wie beschrieben here.

Das ist viel einfacher zu halten (wie Sie gesagt haben), Ihre CSS gültig hält (keine Fehler zu übersehen) und ist stabiler als Hacks ...

Answer 5

Diese offtopic sein könnte, ich kein Guru bin von CSS ... aber hast du SASS probiert?

http://haml.hamptoncatlin.com/docs/

Ich finde CSS eher schlecht als Ausdruckssprache für Stile. Laterales Denken, wenn Sie ein zentrales protoCSS mit Ihrem Master-Stil hätten und es in die entsprechende Browser-Version übersetzen könnte, denke ich, dass Sie es am besten haben würden: wartungsfreundlich und einfach zu arbeiten.

Sass ist nicht genau das, aber es sollte nicht schwierig sein, es zu ändern. Wenn Sie kein Entwickler sind, sind Sie sicher, dass Sie Hampton oder jemand anderen davon überzeugen können, es zu kodieren.