Style-Attribut vs Einstellung ID und externen Css

Question

verstehe ich das Konzept der alle Präsentations-Elemente außerhalb des Markups zu halten und sie in eine externe CSS-Datei setzen.

Ich möchte ein Gefühl für welche Arten von Situationen würden Sie Verwendung des Attributs style vs Einstellung IDs und externen Css rechtfertigen.

Zu diesem Punkt habe ich den Stil viel Attribut verwendet habe, verwende ich es in der Regel Präsentation Elemente speziell für dieses Element und alles geben, die für alle Elemente ist ziehe ich in eine externe CSS-Datei, aber ich möchte neu zu bewerten meine Position und macht die beste Wahl für die Zukunft.

Answer 1

Verwenden Sie externe CSS für statische Definitionen. Verwenden Sie Element-ID-Lookups und den Stil-Attribut für Dinge, die während der Laufzeit ändern oder wo können benötigen Sie Javascript um alles einzurichten, weil CSS nicht in der Lage ist, was Sie wollen.

Ein gutes Beispiel für letzteres war Zebra-Striping in jQuery vor breite Unterstützung für CSS 3-Selektoren :

$(document).ready = function() {
    $("table tr:nth-child(even)").addClass("striped");
});

Heute können Sie, dass im statischen CSS tun, aber es ist einmal, in Javascript dabei waren die beste Option.

Answer 2

Ich benutze externe Stylesheets und die Gründe dafür sind unter:

1. Wartbarkeit - es ist viel einfacher, wenn alles meine Präsentation Sachen in einer Datei sind.
2. Keeping Code DRY - yep, diesmal wieder. Früher habe ich sogar den Stil-Attribut verwenden, um die Anzeige zu „blockieren“ oder „none“ austauschbar zu setzen. Jetzt benutze ich nur eine Klasse namens „verstecken“ und diese Klasse verwenden, wenn etwas versteckt werden muss, und es entfernen, wenn etwas gezeigt werden muss. In diesen Tagen der vollen Anwendungen Ajax geblasen, halte ich meinen Code frei von solchen Dingen zu wiederholen und es ist viel mehr sauber.
3. Hilft, wenn Sie in einer großen Projekteinstellung arbeiten - in meinem letzten Arbeitsplatz, wir hatten eine Suite von Anwendungen, die das gleiche Aussehen geteilt und fühlen. Durch sie alle in einem externen Stylesheet setzen, einschließlich Arten, die aufgerufen werden, nachdem ein bestimmtes Ereignis eingetreten ist, half er dem Team konsequent UI-Design zu den Anwendungen anzuwenden.

Ich habe versucht, Gründe zu denken Stil Attribute verwenden, aber ehrlich gesagt, kann ich sagen, dass ich es nur verwenden, wenn ich faul bin das Stylesheet zu öffnen, etwas zu ändern schnell (nicht zu stolz auf diesem Teil, so dass ich versuchen zu minimieren it)

Answer 3

Einer der großen Vorteile, um alle Ihre Arten in ein Stylesheet zu bewegen ist Wartbarkeit. Inline-Stile zu finden, kann ein großer Schmerz für andere Menschen, die versuchen, den Code zu erhalten.

Aus diesem Grund allein es lohnt sich das spezifische Element eine ID und definieren ihre Stile in der Stilvorlage zuweisen.

Zweitens, wenn Sie sich selbst finden viele Inline-Stile zu schreiben, könnten Sie wahrscheinlich mehr dieser Stile werden Ausklammerung mit Vererbung der CSS-Eigenschaften oder ein paar gut einkalkuliert Klassen neben der ID.

Performance-weise, ID Auswahl so schnell ist wie CSS bekommt, so viele Klassen ist eigentlich langsamer als mit IDs Bohren nach unten, wenn auch nur von Mikrosekunden.

Die einzige wirkliche Zeit, die ich es für angemessen Inline-Stile zu verwenden, ist für sehr transiente Eigenschaften wie Animation Javascript oder versteckt und zeigt unter Verwendung ein Element (obwohl das auch mit Klassen durchgeführt werden kann).