Was ist an Inline-CSS so schlimm?

Ändern und 100 Zeilen code, wenn Sie wollen, um die Website anders Aussehen. Das kann nicht gelten, in Ihrem Beispiel, aber wenn Sie die Verwendung von inline-css für Dinge wie

<div style ="font-size:larger; text-align:center; font-weight:bold">

auf jeder Seite, um eine Kopfzeile, wäre es viel einfacher zu pflegen als

<div class="pageheader">  

wenn der pageheader definiert ist, in einem einzigen stylesheet, so dass, wenn Sie ändern möchten, wie eine Seite, die Kopfzeile über die gesamte Website zu ändern, ändern Sie die css-Datei in einem Ort.

Jedoch, ich werde ein Ketzer und sage, dass in deinem Beispiel sehe ich kein problem. Sie sind targeting das Verhalten von einem einzigen Bild, was wahrscheinlich ist, zu sehen rechts auf einer einzigen Seite, so setzen die eigentlichen css in ein stylesheet, das wäre wohl overkill.

InformationsquelleAutor der Antwort David

Der html5-Ansatz, um schnell css-prototyping

oder: <style> - tags sind nicht mehr nur für den Kopf mehr!

Hacking CSS

Lassen Sie uns sagen Sie, dass Sie Debuggen sind, und möchten, ändern Sie Ihre Seite mit css, machen Sie einen bestimmten Abschnitt nur besser Aussehen. Stattdessen erstellen Sie Ihre Stile inline-die schnelle und schmutzige und un-vertretbare Möglichkeit, die Sie tun können, was ich zu tun in diesen Tagen und nehmen ein abgestuftes Konzept.

Keine inline-style-Attribut

Nie erstellen Sie Ihre css-inline, und ich meine: <element style='color:red'> oder sogar <img style='float:right'> Es ist sehr bequem, aber nicht unbedingt der Selektor-Spezifität in eine echte css-Datei später, und wenn Sie Sie behalten, Sie werden es bereuen, die Wartung laden später.

Prototyp mit <style> statt

Wo Sie benutzt haben, inline-css, verwenden Sie stattdessen die in-Seite <style> Elemente. Versuchen Sie, sich! Es funktioniert in allen Browsern, so groß ist für die Prüfung, doch können Sie sich anmutig bewegen wie css aus, um Ihre Globale css-Dateien, Wann immer Sie wollen/müssen! ( *nur bewusst sein, dass die Selektoren werden nur Seite-Höhe-Spezifität, die anstelle der site-Ebene Spezifität, so vorsichtig sein, als zu allgemein) Nur so sauber, wie in den css-Dateien:

<style>
.avatar-image{
    float:right
}
.faq .warning{
    color:crimson;
}
p{
    border-left:thin medium blue;
    // this general of a selector would be very bad, though.
    // so be aware of what'll happen to general selectors if they go
    // global
}
</style>

Refactoring anderen Menschen die inline-css -

Manchmal sind Sie nicht einmal das problem, und Sie haben es mit jemand anderem inline-css, und Sie umgestalten. Dies ist ein weiterer großer Einsatz für die <style> - Seite, so dass Sie direkt isolieren Sie die inline-css-und sofort legen Sie Sie direkt auf der Seite in Klassen oder ids oder Selektoren, während Sie die Umgestaltung. Wenn Sie vorsichtig genug mit Ihrem Selektoren, wie Sie gehen, können Sie verschieben Sie dann das endgültige Ergebnis der globalen css-Datei am Ende mit nur ein copy & paste.

Es ist ein wenig schwer zu übertragen jeder bisschen css sofort auf die Globale css-Datei, aber mit der in-page - <style> Elemente, haben wir jetzt alternativen.

InformationsquelleAutor der Antwort Kzqai

Inline-CSS wird immer, immer, gewinnen den Vorrang vor allen verlinkten stylesheet CSS. Dies kann zu enormen Kopfschmerzen für Sie, wenn Sie gehen und schreiben Sie eine ordnungsgemäße cascading stylesheet, und Ihre Eigenschaften sind nicht richtig anwenden.

Es auch weh tut Ihre Anwendung semantisch: CSS wird über die Trennung der Präsentation von markup. Wenn Sie verwickeln die beiden zusammen, werden die Dinge sehr viel schwieriger zu verstehen und zu pflegen. Es ist ein ähnliches Prinzip wie die Trennung von Datenbank-code aus dem controller-code auf der server-Seite der Dinge.

Schließlich, stellen Sie sich vor, Sie haben 20 von diesen image-tags. Was passiert, wenn Sie entscheiden, dass Sie schwebte überlassen werden sollte?

InformationsquelleAutor der Antwort Clint Tseng

Der ganze Sinn von CSS ist die Trennung von Inhalt aus Ihrer Präsentation. Also in deinem Beispiel hast du die Vermischung von Inhalten mit Präsentations-und "schädlich".

InformationsquelleAutor der Antwort

Codes wie code, aber wenn Sie übergeben es an jemand anderen, ist es am besten zu nutzen, was jeder sonst tut. Es gibt Gründe für die CSS, dann gibt es Gründe für inline. Ich benutze beide, weil es einfach leichter für mich. Mit CSS ist wunderbar, wenn Sie haben eine Menge von der gleichen Wiederholung. Allerdings, wenn Sie haben eine Reihe von verschiedenen Elemente mit unterschiedlichen Eigenschaften, dann wird das ein problem. Eine Instanz für mich, wenn ich bin der Positionierung von Elementen auf einer Seite. Die einzelnen Elemente, die einer anderen top-und left-Eigenschaft. Wenn ich alles in ein CSS-das wäre wirklich zu ärgern das Chaos aus mir heraus gehen zwischen der html-und css-Seite. Also CSS ist toll, wenn Sie wollen, dass alles die gleiche schriftart, - Farbe, die hover-Effekt, etc. Wenn aber alles hat eine andere position hinzufügen einer CSS-Instanz für jedes element kann wirklich ein Schmerz sein. Das ist nur meine Meinung, obwohl. CSS hat wirklich eine große Bedeutung in größeren Anwendungen, wenn Ihr mit zu Graben, durch den code. Mozilla web developer-plugin, und es wird Ihnen helfen, die Elemente, IDs und Klassen.

InformationsquelleAutor der Antwort Noah Beach

Selbst, wenn man nur den Stil einmal als in diesem Beispiel haben Sie noch mixed CONTENT und DESIGN. Lookup "Separation of concerns".

InformationsquelleAutor der Antwort Ian Mercer

In-Seite css-Sache im moment, denn Google bewertet es als eine bessere user experience als css geladen aus einer separaten Datei. Eine mögliche Lösung besteht darin, die css-Datei in eine text-Datei, laden Sie es on the fly mit php und Ausgabe, die es in den Dokument-head auf. In der <head> Bereich sind dies:

<head> ...

<?php
$codestring = file_get_contents("styles/style1.txt");
echo "<style>" . $codestring . "</style>";
?>

... </head>

Setzen Sie die benötigten css in styles/style1.txt und er spuckte in die <head> Abschnitt des Dokuments. Auf diese Weise werden Sie haben-Seite css-mit dem Vorteil der Verwendung einer Formatvorlage, style1.txt, die geteilt werden können, die von allen Seiten, so dass Website-wide style-änderungen vorgenommen werden, die über nur diese eine Datei. Darüber hinaus, diese Methode erfordert nicht die browser-Anfrage eine eigene css-Dateien vom server (also der Minimierung des Abrufs /rendering-Zeit), da alles geliefert wird, auf einmal von php.

Umsetzung dieser, individuelle one-time-only-Formate können manuell codiert werden, wo nötig.

InformationsquelleAutor der Antwort Roger Stevens

Obwohl ich Stimme völlig mit all den Antworten, die oben gegeben werden, dass das schreiben von CSS in eine separate Datei wird immer besser von code-Wiederverwendbarkeit, Wartbarkeit, bessere Trennung von Bedenken, es gibt viele Szenarien, in denen Menschen, die lieber inline-CSS in Ihre Produktion-code -

Die externe CSS-Datei verursacht einen zusätzlichen HTTP-Aufruf im browser und damit zusätzliche Latenz. Stattdessen, wenn die CSS eingefügt wird, dann inline-browser starten können, analysieren Sie es sofort. Vor allem über SSL HTTP-Aufrufe sind teurer und summiert sich die zusätzliche Wartezeit auf die Seite. Es gibt viele Werkzeuge zur Verfügung, die hilft, zum generieren von statischen HTML-Seiten (oder Seiten-snippet) durch einfügen von externen CSS-Dateien als inline-code. Diese tools werden verwendet, auf der Build-und Release-phase, wo die Produktion binäre generiert wird. Auf diese Weise erhalten wir alle die Vorteile der externen CSS-und auch die Seite wird schneller.

InformationsquelleAutor der Antwort Diptendu