Practices für die Aufbewahrung von JavaScript und CSS synchron?

Question

Ich arbeite an einer großen JavaScript-schweren App. Mehrere Stücke von JavaScript haben einige verwandte CSS-Regeln. Unsere aktuelle Praxis ist für jede JavaScript-Datei ein haben, optional zugehörige CSS-Datei , etwa so:

MyComponent.js  // Adds CSS class "my-comp" to div
MyComponent.css // Defines .my-comp { color: green }

Auf diese Weise weiß ich, dass alle CSS im Zusammenhang mit MyComponent.js in MyComponent.css sein werden.

Aber die Sache ist, dass ich allzu oft haben sehr wenig CSS in diesen Dateien. Und allzu oft das Gefühl, ich, dass es zu viel Aufwand ist eine ganze Datei zu erstellen, um nur ein paar Zeilen CSS enthalten - es wäre einfacher, nur die Stile innerhalb JavaScript zu codieren. Aber dies wäre der Weg zur dunklen Seite sein ...

In letzter Zeit habe ich gedacht, von die CSS direkt in JavaScript Einbetten - so ist es immer noch in dem Build-Prozess extrahiert werden kann und fusionierte zu einer großen CSS-Datei. Auf diese Weise würde ich nicht eine neue Datei für jede noch so kleine CSS-Stück erstellen müssen. Außerdem, wenn ich / bewegen Umbenennungs / löschen Sie die JavaScript-Datei Ich habe nicht zusätzlich verschieben / Umbenennen / die CSS-Datei löschen.

Aber, wie man einbetten CSS innerhalb JavaScript? In den meisten anderen Sprachen würde ich String nur, aber JavaScript hat einige Probleme mit mehrzeiligen Strings. Folgende sieht IMHO ziemlich hässlich:

Page.addCSS("\
  .my-comp > p {\
    font-weight: bold;\
    color: green;\
  }\
");

Was andere Praktiken haben Sie für die Aufbewahrung Ihrer JavaScript und CSS synchron?

Answer 1

Meine Perspektive auf CSS-Dateien ist, dass sie Regeln beschreiben, die das Thema einer Anwendung zu definieren. Bewährte Verfahren angeben, im Allgemeinen, dass der Inhalt, Darstellung und Verhalten sollten getrennt so gehalten werden, dass es relativ einfach ist, dieses Thema zu ändern. mehrere CSS-Dateien, indem er, das wird etwas schwieriger, als Designer mit mehr Dateien zu tun haben würde.

Zusätzlich CSS (Cascading Stylesheets) Regeln werden von ihrer Position in dem CSS-Dokument betroffen. mehrere CSS-Dateien mit unterschiedlichen Regeln in jeder Indem kann es schwieriger werden, zu priorisieren, welche Regeln Vorrang.

Schließlich, wenn Sie in Ihrer JS-Datei übereinstimmt, was CSS-Datei, was CSS-Selektor, um herauszufinden, versuchen Sie ein kühles Suchwerkzeug verwenden, wie grep, wenn Sie auf Linux sind. Wenn Sie eine gute IDE verwenden, können Sie es auch verwenden, um schnell für die Regeln suchen, dann können Sie nur auf die Zeilennummer springen. Ich sehe keinen Vorteil wirklich die CSS-Regeln in verschiedenen Dateien zu halten; es wird nur die Sache noch komplizierter.

Darüber hinaus würde ich gegen die Idee berät die CSS inline zu stellen. Auf diese Weise werden Sie unweigerlich machen es schwieriger für Ihre Web-Designer schnell und einfach die Stile auszulagern. Der ganze Sinn der externen CSS ist, damit Ihr Web-Designer das Thema oder bieten für verschiedene Benutzer mehrere Themen ändern können. Wenn Sie die CSS im JavaScript oder HTML einbetten, haben Sie dann fest gekoppelt, um den Inhalt, Verhalten und Präsentation.

Best Practices im Allgemeinen Inhalt empfehlen halten, Verhalten und Präsentation für diesen Zweck trennen.

Answer 2

Mit einer CSS-Datei per JS-Datei scheint eine gute Sache für mich. Es ist sauber und leicht zu verstehen und zu pflegen. Das einzige Problem wäre auf jeder Seite Dutzende von CSS-Dateien zu haben, aber ich nehme an, Sie diese Dateien in einer großen Datei kombinieren, so dass dieses Problem nicht in Ihrem Fall nicht vorhanden ist.

Wie einbetten CSS in JavaScript? Es hängt von der Umgebung, die Sie haben und wie der Build-Prozess durchgeführt wird. Die einfachste Sache ist, einen großen Kommentar am Anfang jeder JavaScript-Datei haben, so etwas wie folgt aus:

// <...>Your copyright notice here</...>

// <css>
/*
body{color:red;}
div{border:solid 10px lime;}
// ... other ugly styles.
*/
// </css>

Dann während des Build haben Sie für <css>...</css> Blöcke suchen und die CSS zu extrahieren, indem die /* und */ Trimmen.

Natürlich schafft es ein Problem. Wenn Sie eine IDE mit Auto-Vervollständigung verwenden, CSS in eine JavaScript-Datei eingebettet wird es Auto-Vervollständigung in diesem Fall unmöglich machen, zu verwenden,

Answer 3

Meine bevorzugte Methode ist es, alle CSS-Dateien getrennt zu halten und hat dann einen Build-Prozess, dass kompiliert sie in eine größere CSS-Datei auf Bereitstellung.

Ich möchte vermeiden, Ihre JS mit Ihrem CSS verschmelzen. Es klingt wie eine sauberere Lösung aus der Datei-Ebene, ich denke, es wird chaotisch schnell. Das, und Sie werden die Hervorhebung und Syntax Unterstützung verlieren Editor gibt Ihnen.

Answer 4

Schauen Sie sich Csster . Ich schrieb es nur um dieses Problem zu lösen.

einbetten Sie Ihre CSS-Regeln direkt in Ihrem Javascript, mit Javascript Objektliteral Syntax. Es ist keine hässliche als roher CSS.

Csster.style({
  h1: {
    fontSize: 18,
    color: 'red'
  }
});

Die Regeln werden in das DOM auf der Client-Seite eingefügt. Diese Architektur vereinfacht den Build-Prozess und reduziert die Client-Anfragen.

Sie können es verwenden, wie Sie beschreiben, aber Csster bietet auch ein paar andere Nettigkeiten:

• nisten Sheets auszutrocknen
• Farbfunktionen wie darken und saturate
• integrierten Makros für gängige CSS Idiome wie clearfix, abgerundete Ecken, Schlagschatten.
• Erweiterungspunkte für individuelle Verhalten oder Cross-Browser-Unterstützung

Es ist gut getestet und ich habe es auf ganz wenige Projekte verwendet. Sie ist unabhängig von jQuery, sondern spielt auch mit.

Ich würde gerne mehr Leute es verwenden haben und Feedback geben.