Abstraktion weg von CSS

Question

Lassen Sie mich etwas ganz klar machen.

ich. Hass . CSS.

Es ist ein endloser Alptraum. Jede kleine Layout-Änderung fühlt sich an wie ein Hack. Lösungen für Probleme scheinen oft zu jiggering Zahlen um einbeziehen wie einige Köche genau zu arbeiten, versuchen, wie viel Muskatnuss in seinem setzen bald-zu-seinen berühmten Reispudding. Dann kommt das mehrere Browser-Problem, die mehr Auflösungsprobleme ..

.. eine lange Geschichte kurz schneiden, es ist ein Schmerz. Ein PITA, wenn man so will.

Viele Frameworks zu abstrahieren suchen von HTML entfernt (benutzerdefinierten Tags, JSFs Komponenten-System) in dem Bemühen, mit diesem speziellen Kessel der Fische machen den Umgang zu erleichtern.

Gibt es etwas, Sie Leute verwendet haben, die ein ähnliches Konzept auf CSS angewendet hat? Etwas, das für Sie eine Reihe von Cross-Browser-Magie tut, wie Variablen unterstützt (warum muss ich # jedes Mal eingeben 3c5c8d Ich möchte, dass Farbe), unterstützt berechnete Felder (die ‚kompiliert‘ in CSS und JS sind) usw.

Alternativ bin ich denke auch über diese richtig? Versuche ich, einen sehr quadratischen Block durch ein sehr rundes Loch zu schieben?

Answer 1

Sie können immer einen Template-Engine verwenden Variablen und berechnete Felder in Ihren CSS-Dateien hinzuzufügen.

Answer 2

Was ich Werken am besten ist, um wirklich CSS zu lernen. Ich meine wirklich lernen CSS.

Es kann eine verwirrende Sprache sein, zu lernen, aber wenn Sie es und Praxis lesen genug über, schließlich werden Sie die beste Art und Weise zu lernen, die Dinge zu tun.

Der Schlüssel ist es genug zu tun, dass es natürlich kommt. CSS kann sehr elegant sein, wenn Sie wissen, was Sie tun wollen, bevor Sie beginnen, und Sie haben genug Erfahrung, es zu tun.

Zugegeben, es ist auch eine große PITA manchmal zu tun, aber auch Cross-Browser-Probleme sind nicht so schlecht, wenn man wirklich Praxis an sie und lernt, was funktioniert und was nicht, und wie um Probleme zu bekommen.

Alles was es braucht ist Praxis und in der Zeit kann man es gut werden.

Answer 3

Wenn durch Zufall passieren Sie Ruby verwenden, gibt es Sass . Es unterstützt hierarchische Selektoren (Vertiefung mit Hierarchien zu schaffen), unter anderem, was das Leben aus einer syntaktischen Perspektive leichter zu einem verlängern macht (Sie selbst wiederholen viel weniger).

Ich bin sicher bei Ihnen ankommt, though. Während ich mir einen kleinen Zeit-CSS-Experten in Betracht ziehen würde, denke ich, es wäre schön, wenn es Werkzeuge für CSS sind wie es mit Javascript (Prototype, JQuery, etc.). Sie sagen dem Werkzeug, was Sie wollen, und es behandelt die Browser Unstimmigkeiten hinter den Kulissen. Das wäre ideal, dünkt mich.

Answer 4

Dies baut auf meine Antwort.

Als ich mit CSS begann auch ich dachte, es war ein Schmerz, der es nicht Variablen unterstützt haben, Ausdrücke, usw. Aber als ich begann, es zu benutzen und mehr entwickelte ich einen anderen Stil, diese Probleme zu überwinden.

Zum Beispiel, statt dies:

a { color: red }
.entry { color: red }
h1 { color: red }

Sie können tun:

a, .entry, h1 { color: red }

Sie können die Farbe an einer Stelle erklärt halten, indem dies zu tun.

Wenn Sie CSS verwenden genug sollten Sie in der Lage sein, leicht die meisten Browser Inkonsistenzen zu überwinden. Wenn Sie feststellen, dass Sie einen CSS-Hack verwenden müssen, gibt es wahrscheinlich einen besseren Weg, es zu tun.

Answer 5

Leider zu sagen, dass Jungs, aber alle von euch den Punkt verfehlt.

Das Wort Abstraktion ist der Schlüssel. Angenommen, Sie und Sally sind, eine Website. Sie sind Styling-Formen, während sie die Ecken rund macht. Sowohl Sie als auch sie haben eine Handvoll Wähler definiert.

Was passiert, wenn unwissentlich Sie Klassennamen ausgesucht, die mit denen von Sally kollidieren? Sie sehen, können Sie nicht „verstecken“ (Auszug aus), um die Details, wenn Sie in CSS arbeiten. Aus diesem Grund können Sie nicht einen Fehler im Internet Explorer beheben erstellen Sie dann eine eigenständige Lösung, die andere verwenden können, wie sie ist, genauso wie Sie Prozeduren in einer Programmiersprache rufen nur über Vor- Pflege und Nachbedingungen und nicht denken an wie funktioniert es auf der Innenseite. Sie denken nur von was Sie erreichen wollen.

Dies ist das größte Problem mit der Web: es Abstraktionsmechanismen völlig fehlt! Die meisten von Ihnen werden ausrufen: „Es ist nicht notwendig;! Sie mit dem Rauchen aufhören Risse“

Sie werden die Aufgabe, sagen sie stattdessen tun, Layout Fehler zu beheben oder runde Ecken machen oder dafür auf der „beste“ Markup debattieren oder diesen Fall immer und immer wieder. Hier finden Sie eine Website, die die Lösung, dann copy-paste die Antwort dann passen Sie es Ihren speziellen Fall ohne auch nur zu denken, was zum Teufel erklärt machst du! Ja, das ist es, was Sie tun.

Ende des rant.

Answer 6

  

Dann kommt das mehrere Browser-Problem

Es gibt diese , die einige Inkonsistenzen von IE hilft entfernen. Sie können auch jQuery verwenden, um einige Selektoren über Javascript hinzuzufügen.

Ich stimme mit Dan , lernen sie, und es ist nicht so sehr ein Problem auch Spaß.

Answer 7

Sehen Sie, das ist das Problem mit SO- jeder Antwort bisher einen wichtigen Punkt gemacht hat und soll die endgültige Antwort in Betracht gezogen werden. Lassen Sie mich versuchen zusammenzufassen:

• CSS ist gut ! erweitern weiter , gibt es eine Lernkurve, aber wenn man es viele Dinge werden viel einfacher.
• (etwas) Browser Inkonsistenzen auflösbar sind generisch.
• (Einige Ihrer) Variable und Feld Funktionalität berechnet kann gesorgt werden durch was auch immer Template-Engine verwenden Sie.

Ich denke, eine Kombination aus all diesen sicherlich eine große Summe Probleme löst (obwohl fair zu sein tief CSS Lernen ist keine Option für alle, manche Leute es einfach nicht genug verwenden, um die Zeit zu rechtfertigen).

Es gibt einige Probleme keine der oben genannten Punkte Abdeckung (bestimmte Arten von berechneten Feldern erfordern würden für eine JS-Bibliothek zu schreiben, ich denke), aber es ist sicherlich ein guter Anfang.

Answer 8

Für die variable Unterstützung habe ich PHP mit CSS-Header, um große Wirkung für die verwendet. Ich denke, dass Sie es in jeder Sprache tun. Hier ist ein PHP-Beispiel:

<?
header('content-type:text/css');
header("Expires: ".gmdate("D, d M Y H:i:s", (time()+900)) . " GMT"); 

$someColorVar = "#cc0000";
?>
BODY {
      background-color: <?= someColorVar ?>;
     }

Answer 9

  

Lösungen für Probleme jiggering Zahlen um einbeziehen zu oft scheinen, wie einige Köche genau zu arbeiten, versuchen, wie viel Muskatnuss in seinem setzen bald-zu-sein berühmten Milchreis

ich dies nur erhalten, wenn sie versuchen Sachen Arbeit in IE zu machen.

Wenn Sie CSS auf den Punkt zu lernen, wo man die meisten Dinge, ohne Code können die Referenz nachschlagen (wenn Sie noch auf der Suche nach oben Bezug regelmäßig wissen Sie nicht wirklich und kann nicht behaupten, sich zu beschweren, glaube ich) zu entwickeln, und dann für Firefox / Safari, es ist ein ziemlich schöner Ort ist in sein.

Lassen Sie den Schmerz und das Leid von IE compatibilit bis zum Ende, nachdem es in FF / Safari funktioniert, so dass Ihr Geist wird die Schuld auf IE-Attribut, wo es verdammt gut gehört, anstatt CSS im Allgemeinen.

Answer 10

CSS Variablen kommen (relativ) schnell, aber ich stimme sie sind längst überfällig . In der Zwischenzeit ist es möglich, eine CSS-Template-Engine wie Sass, oder sogar die dynamische Web-Sprache Ihrer Wahl zu verwenden, Ihre Stylesheets programmatisch zu erzeugen.

Answer 11

Für CSS-Frameworks, können Sie YUI Grids betrachten. Es macht grundlegendes Layout viel schneller und einfacher, wenn auch in seiner rohen Form verwendet es macht Kompromisse bei der Semantik.

Answer 12

Der Schlüssel zu einem wirklichen Verständnis von CSS (und den Browser-Kopfschmerzen) ist ein solides Verständnis der Box-Modell durch die CSS-Standards verwendet, und das falsche Modell von einigen Browsern verwendet. Sobald Sie haben, nach unten und beginnen Selektoren Lernen Sie bestimmte Eigenschaften von Browser wegkommen und CSS wird etwas, das Sie freuen uns werden.

Answer 13

Überprüfen Sie auch BlueprintCSS , ein Layout-Rahmen in CSS. Es löst nicht alle Probleme, aber viele, und Sie haben nicht die CSS selbst zu schreiben.

Answer 14

Ich glaube, die häufigen Fehler Anfänger mit CSS haben, sind mit einer Spezifität zu tun. Wenn Sie das Styling der a Tag, sind Sie sicher, dass Sie in dem Dokument jedes einzelne Styling sein wollen wirklich oder eine bestimmte "Klasse" von a -Tags?

ich beginnen in der Regel mit meinem CSS-Selektoren sehr spezifisch zu sein und sie verallgemeinern, wenn ich für richtig halten.

Hier ist ein humerours Artikel über das Thema, sondern auch Informations: Spezifizität Kriege

Answer 15

CSS braucht ein wenig Zeit zu lernen, aber das, was ich gefunden anfangs die meisten entmutigend war die Tatsache, dass so viele Hacks waren nötig, um alle Browser auf die gleiche Art und Weise zu verhalten. ein System, das Lernen, die Logik nicht haftet scheint stumm ... aber ich habe mit dem vagen Glauben festhielt, dass Logik hinter jeder Idiosynkrasie des Browsers, in Form der W3-Spezifikation ist. Es scheint, dass die neue Generation Browser langsam in Einklang kommen -. Aber IE6 macht immer noch mein Leben zur Hölle auf einer täglichen Basis

Vielleicht eine Abstraktionsschicht zwischen kompatibelem / gültigem CSS-Code zu schaffen und den schlampigen Implementierungen Browsern wäre keine schlechte Sache sein. Aber wenn so etwas geschaffen wurde - würde es brauchen von JS (oder jQuery) mit Strom versorgt werden? (Und würde, dass eine unangemessen belasten schaffen, in Bezug auf die Verarbeitungskosten?)

Ich habe festgestellt, dass es nützlich zu ‚Ebene des Boden‘, wenn Scripting mit CSS. Es gibt wahrscheinlich viele verschiedene Varianten von Reset-Skript gibt - aber mit YUI Resets hat mir geholfen, die Anzahl der Macken zu reduzieren ich sonst begegnen würde - und YUI Grids machen das Leben ein wenig manchmal leichter.

Answer 16

@SCdF: Ich denke, Ihre Zusammenfassung hier fair ist. Aber das Argument, dass einige Leute CSS nicht über die Zeit zu lernen, ist falsch - man denke nur an für eine Sekunde. Ersetzen Sie eine Technologie, die Sie gemeistert haben, und Sie werden sehen, warum:

  

ich. Hass. Java. Gibt es etwas gibt, die es nur schreiben, wird für mich? Nicht jeder hat die Zeit Java zu meistern.

CSS

ist sicherlich eine unvollkommene Technik - ich habe große Hoffnungen, dass 5 Jahre ab jetzt werden wir nicht mit Browser zu tun Inkompatibilitäten mehr (wir haben es fast geschafft), und dass wir besser Autor seitige Werkzeuge ( ich habe ein Visual Studio-Makro für meinen eigenen Gebrauch geschrieben, die die Art von Variablen und Berechnungen bereitstellt, die Sie beschreiben, so dass es nicht unmöglich) ist - sondern darauf bestehen, dass Sie in der Lage sein sollten, effektiv, diese Technologie zu nutzen, ohne wirklich zu verstehen, es isn nur ‚t vernünftig.

Answer 17

Sie sind richtig, obwohl darüber nachgedacht, sind Sie wahrscheinlich immer noch die verschiedenen Browser-Implementierungen von CSS gehen zu müssen, verstehen. Dies ist das Verständnis nur die Umwelt Anwendung lebt.

Zur Klarstellung: es geht nicht um CSS zu verstehen. Wenn Sie die Sprache gut kennen, hast du immer noch die Redundanz, Vervielfältigung und fehlenden Kontrollstrukturen in der Sprache zu behandeln.

Ive, das Schreiben von CSS fest für mehr als 10 Jahre, und ich bin zu dem Schluss gekommen, dass, während die Sprache mächtig und wirksam ist, die Umsetzung CSS saugt. So verwende ich eine Abstraktionsschicht wie Sass oder Weniger oder xCSS auf die Sprache zu kommunizieren. Diese Tools verwenden, um eine Syntax ähnlich wie CSS, so dass Sie das Problem in dem Problem der Domäne sind zu lösen. so etwas wie PHP mit CSS Werke zu schreiben, ist aber nicht der beste Ansatz.

Durch die Probleme in der Sprache durch eine Abstraktionsschicht versteckt, können Sie ein besseres Produkt liefern, das seine Integrität während des gesamten Lebenszyklus des Projektes beibehalten wird. Schreiben CSS von Hand beschleunigt Software rot es sei denn, Sie sind solide Dokumentation bereitzustellen, die die meisten CSS-Programmierer sind nicht . Wenn Sie einen gut dokumentierte CSS-Framework schreiben, würden Sie wahrscheinlich nicht sowieso von Hand schreiben. Es ist einfach nicht effizient.

Ein weiteres Problem mit CSS ist aufgrund seines fehlenden Unterstützung für Nesting-Block Erklärungen ist. Dies fördert den Programmierer einen flachen, globalen Satz von Klassen zu bauen und die Namenskollisionen mit einer Namenskonvention zu behandeln. Wir alle wissen, Globals sind böse, aber warum schreiben wir CSS so? Wäre es nicht besser sein, Ihre Klassen einen Kontext zu geben, anstatt sie auf das gesamte Dokument Modell auszusetzen? Und Ihre Namenskonvention arbeiten kann, aber es ist nur eine andere Aufgabe, die Sie beherrschen müssen die Sprache geschrieben werden.

Ich ermutige alle, die sich stolz gute CSS auf dem Schreiben zu beginnen einige der besten Praktiken von der Programmierung zu Ihrem Markup anwenden. eine abtraction Schicht nicht unter Verwendung von nicht bedeuten, fehlen Sie die Fähigkeit, gute CSS zu schreiben, es bedeutet, dass Sie Ihre Exposition gegenüber den Schwächen der Sprache beschränkt haben.

Answer 18

Sie haben nicht eine Abstraktion weg von CSS-Sie müssen diese CSS selbst in einer Abstraktion zu verwirklichen. CSS ist nicht über Pixel nur so auf dem Bildschirm setzen. Stattdessen geht es um ein System von Regeln zu schreiben, die der Browser diese Entscheidungen für Sie treffen helfen. Dies ist notwendig, weil zum Zeitpunkt der CSS schreiben, Sie wissen nicht, den Inhalt der Browser es um die Anwendung wird; weder kennen Sie die Umgebung, in der der Browser wird es tun.

Die Beherrschung dieser Zeit in Anspruch nimmt. Sie können nicht auf CSS in einem Wochenende abholen und gut zu gehen. Es ist ein wenig irreführend, weil die Sprache eine so niedrige Barriere für die Einreise, aber das Wasser läuft tief . Hier ist nur ein paar der Themen sollten Sie versuchen zu meistern in CSS zu beherrschen:

• Die Cascade und Vererbung
• Die Box-Modell
• Layout Methoden einschließlich Schwimmern und dem neuen Flexbox
• Positionierung
• Aktuelles Best Practices wie SMACSS oder BEM Ihre Stile modular und einfach zu halten zu halten

Sie brauchen nicht diese vorne alles wissen, aber man sollte Vorschieben weiter. Genau wie bei anderen Sprachen und Programmierung im Allgemeinen, müssen Sie ständig versuchen, mehr zu lernen und das Handwerk zu beherrschen. CSS ist ein grundlegender Bestandteil der Web-Entwicklung, und mehr Entwickler müssen es mit dem gleichen Respekt, der sie andere Sprachen leisten zu behandeln.