Wo ist der richtige Ort, um Stil mit einer Direktive zu verbinden?

8

Eine Verwendung einer Direktive könnte darin bestehen, wiederverwendbare HTML-Elemente zu erstellen, die sauber in Ihre Seite eingefügt werden können.

Ich habe diese Idee in meinem aktuellen Projekt mehrmals verwendet, aber ich kann nicht entscheiden, wo der richtige Ort für die Aufnahme von CSS-Deklarationen für eine bestimmte Anweisung ist. Bisher habe ich gedacht:

  • Inline css: Das ist immer schlecht und widerspricht meiner moralischen Bewertung, aber es ist sehr explizit, was die genaue CSS für eine Direktive ist und es beseitigt die Möglichkeit von CSS Kollisionen / Überschreiben mit anderen Seitenelementen und umgekehrt.
  • Stil / Link-Tag in HTML-Vorlage: Ein Style-Tag hält die schlechten Teile von Inline-CSS in Schach, kann aber in Texteditoren mühsam sein (Emacs zum Beispiel formatiert es nicht korrekt). Ein Link zum Stylesheet könnte stattdessen in das Template eingefügt werden, aber sollten wir wirklich CSS-Links in der Mitte einer Seite hinzufügen?
  • Externes Stylesheet: Der traditionelle "richtige" Weg, CSS einzubinden, scheint auch nicht ganz zu passen, da Kollisionen, wie ich es im ersten Punkt erwähnt habe, passieren können. Außerdem muss ich jetzt daran denken, dies als Link-Tag oben auf der Seite hinzuzufügen, der nicht mit der Art und Weise der Definition einer Direktive übereinstimmt - ich muss nicht explizit ein Link-Tag für die Vorlage hinzufügen (vorausgesetzt Ich importiere Vorlagen über "template_url" in der Richtliniendefinition. Warum sollte ich das für den Stil tun?

Ich weiß, dass ich das auch in jede siteweite globale CSS hinzufügen kann, aber auch dies ist keine gute Übung, da ich in der Lage sein sollte, eine Direktive von einem Projekt zu einem komplett disjunkten anderen Projekt zu heben.

Also, die Frage:

Wo ist der richtige Ort, um CSS-Deklarationen für eine bestimmte Direktive zu platzieren, die ein wiederverwendbares HTML-Segment sein soll?

Vielen Dank im Voraus!

    
ryaanwells 13.09.2013, 12:03
quelle

2 Antworten

2

Stile sollten immer in einer separaten Datei gespeichert werden . Wenn Sie nicht etwas kodieren, das in die Seiten anderer Leute eingebettet wird oder HTML-E-Mails sendet, ist der Inline-Stil eine schlechte Idee (und sogar für E-Mails können Sie inline schreiben Ihren Stil einfach aus einer externen Datei ). Style-Link-Tags in der Vorlage verdecken lediglich Ihre Anwendung, sodass Entwickler alle Ihre Anweisungen lesen müssen, die AngularJS möglicherweise gar nicht kennen.

Für mich wollen Sie eine Antwort auf die falsche Frage. Ihrem Stil sollte es egal sein, ob Sie AngularJS verwenden oder nicht . Wenn Sie CSS codieren, folgen Sie guten CSS-Praktiken. Direktiven sind nur HTML-Ansichten, die von der Klassenbindung profitieren können, sollten aber niemals ein Faktor für die Organisation von CSS sein . Wählen Sie einfach eine CSS-Struktur (BEM, OOCSS, SMACSS, Atomic Design, etc.) und lassen Sie Ihr Team und sich selbst folgen.

tl; dr Styles sollten sich nicht darum kümmern, welche Verhaltensebene verwendet wird. Verwenden Sie gute CSS-Methoden, und in diesem Fall besteht eine gute CSS-Praxis darin, Ihre Stile in ein externes Stylesheet zu stellen.

    
jjperezaguinaga 14.09.2013, 16:09
quelle
0

In der externen Datei sollten alle css-Klassen vom Hersteller vordefiniert werden.
Direktiven benutzen oft externe Dateien als HTML-Templates - auch in externen CSS ist nichts verkehrt.

    
OZ_ 13.09.2013 12:19
quelle