Was ist an Inline-CSS so schlimm?
Wenn ich sehe das website-starter-code und Beispiele, die CSS-Datei wird immer in einer separaten Datei, mit dem Namen etwas wie "main.css", "Standard.css", oder "Website.css". Allerdings, wenn ich die Codierung auf eine Seite, ich bin oft versucht zu werfen, die CSS in-line mit einem DOM-element, wie durch die Einstellung "float: right" auf ein Bild. Ich habe das Gefühl, dass das ist "bad coding", da es so selten getan in Beispielen.
Ich verstehe, dass, wenn der Stil wird auf mehrere Objekte angewandt, es ist klug, zu Folgen, "Don' T Repeat Yourself" (DRY) und zuweisen einer CSS-Klasse verwiesen werden, die durch jedes element. Allerdings, wenn ich nicht die Wiederholung der CSS auf einem anderen element, warum nicht in-line CSS-wie Schreibe ich HTML?
Die Frage: Ist mit in-line CSS als schlecht, auch wenn es nur verwendet wird, auf dieses element? Wenn ja, warum?
Beispiel (ist das schlecht?):
<img src="myimage.gif" style="float:right" />
InformationsquelleAutor der Frage ChessWhiz | 2010-04-10
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ä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
auf jeder Seite, um eine Kopfzeile, wäre es viel einfacher zu pflegen als
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
Den Vorteil, dass eine unterschiedliche css-Datei
InformationsquelleAutor der Antwort vijay.shad
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>
stattWo 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: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
Zusätzlich zu den anderen Antworten.... Internationalisierung.
Abhängig von der Sprache des Inhalts - oft anpassen müssen, um das styling eines Elementes.
Ein offensichtliches Beispiel wäre rechts-nach-Links-Sprachen.
Lassen Sie uns sagen Sie, dass Sie Ihren code benutzt:
Nun sagen Sie, dass Sie möchten, dass Ihre website zu unterstützen rtl Sprachen, die Sie brauchen würde:
So, jetzt, wenn Sie wollen, unterstützen beide Sprachen, es gibt keine Möglichkeit, einen Wert zuweisen float mit inline-styling.
Mit CSS dies ist leicht gesorgt mit dem lang-Attribut
So könnte man etwas wie das hier tun:
Demo
InformationsquelleAutor der Antwort Danield
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
Verwendung von inline-CSS ist viel schwieriger zu pflegen.
Für jede Eigenschaft, die Sie ändern möchten, verwenden Sie inline-CSS, erfordert Sie, sich für den entsprechenden HTML-code, statt nur hineinschauen klar definierten und hoffentlich gut strukturierte CSS-Dateien.
InformationsquelleAutor der Antwort Sylvain
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
Gilt dies nur für handgeschriebenen code. Wenn Sie zum generieren von code, ich denke, dass es okay ist, verwenden Sie inline-Stile hier und dann, vor allem in Fällen, in denen Elemente und Steuerelemente, die eine Besondere Behandlung benötigen.
DRY ist ein gutes Konzept für handgeschriebenen code, sondern in Maschinen-code erzeugt, entscheide ich mich für "Law of Demeter": "Was zusammen gehört, muss zusammen bleiben". Es ist einfacher, Sie zu manipulieren code, der generiert den Stil-tags, als Sie zum Bearbeiten eines globalen Stils ein zweites mal in einer anderen und "remote" - CSS-Datei.
Die Antwort zu deiner Frage: es hängt davon ab...
InformationsquelleAutor der Antwort Bruno Jennrich
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
Denke ich, auch wenn Sie wollen, um einen bestimmten Stil für ein element Sie haben die Möglichkeit zu prüfen, die Sie anwenden möchten, der den gleichen Stil auf das gleiche element auf verschiedenen Seiten.
Eines Tages jemand kann bitten, zu ändern oder fügen Sie mehr stilistische änderungen, die auf das gleiche element auf jeder Seite. Wenn Sie die definierte Stile in einer externen CSS-Datei, nur die änderungen vorzunehmen, und es würde sich in dem gleichen element in alle Seiten, so sparen Sie sich eine Kopfschmerz. 🙂
InformationsquelleAutor der Antwort Ashish Gupta
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
Verwendung von inline-styles verstößt gegen das Separation of Concerns Prinzip, wie Sie effektiv mischen markup und Stil in der gleichen Quelldatei. Es auch, in den meisten Fällen, verstößt gegen das DRY (Don ' T Repeat Yourself) Prinzip, da Sie nur für ein einziges element, in der Erwägung, dass eine Klasse angewendet werden können, um mehrere von Ihnen (und auch erweitert werden durch die Magie von CSS-Regeln!).
Darüber hinaus sinnvolle Nutzung von Klassen ist von Vorteil, wenn Ihre site scripting. Zum Beispiel, mehrere populäre JavaScript-Bibliotheken wie JQuery hängen stark von Klassen-Selektoren.
Schließlich die Verwendung von Klassen bietet zusätzliche Klarheit zu Ihrem DOM, weil Sie effektiv haben-Deskriptoren zu sagen, welche Art von element einen bestimmten Knoten in ist. Zum Beispiel:
Ist viel aussagekräftiger als:
InformationsquelleAutor der Antwort csvan
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: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
Inline-CSS ist gut für die Maschine-generierten code und in Ordnung sein kann, wenn die meisten Besucher nur durchsuchen einer Seite auf einer Website, aber eine Sache, die Sie nicht tun können, ist, mit Medien umzugehen Abfragen zu ermöglichen verschiedene looks für Bildschirme in verschiedenen Größen. Dafür musst du das CSS entweder in einem externen Stylesheet oder in einem internen style-tag.
InformationsquelleAutor der Antwort
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
Entsprechend der AMP HTML-Spezifikation es ist notwendig, um CSS in Ihre HTML-Datei (vs einem externen stylesheet) für performance-Zwecke. Dies bedeutet nicht, inline-CSS, aber Sie geben keine externen stylesheets.
InformationsquelleAutor der Antwort Ron Royston