Was ist so schlimm an Inline-CSS?

Wenn ich Website-Startercode und Beispiele sehe, befindet sich das CSS immer in einer separaten Datei mit dem Namen "main.css", "default.css" oder "Site.css". Wenn ich jedoch eine Seite codiere, bin ich oft versucht, das CSS mit einem DOM-Element in Einklang zu bringen, z. B. indem ich für ein Bild "float: right" setze. Ich habe das Gefühl, dass dies "schlechte Codierung" ist, da dies in Beispielen so selten vorkommt.

Wenn der Stil auf mehrere Objekte angewendet wird, ist es ratsam, "Don't Repeat Yourself" (DRY) zu befolgen und ihn einer CSS-Klasse zuzuweisen, auf die jedes Element verweist. Wenn ich das CSS jedoch nicht für ein anderes Element wiederhole, warum nicht das CSS beim Schreiben des HTML-Codes einbinden?

Die Frage: Wird die Verwendung von Inline-CSS als schlecht angesehen, auch wenn es nur für dieses Element verwendet wird? Wenn ja warum?

Beispiel (ist das schlecht?):

<img src="myimage.gif" style="float:right" />

Sie müssen 100 Codezeilen ändern, wenn Sie die Site anders aussehen lassen möchten. Dies trifft in Ihrem Beispiel möglicherweise nicht zu, aber wenn Sie Inline-CSS für Dinge wie verwenden

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

Auf jeder Seite, um einen Seitenkopf zu kennzeichnen, wäre es viel einfacher, als zu pflegen

<div class="pageheader">  

Wenn der Pageheader in einem einzelnen Stylesheet definiert ist, sodass Sie das CSS an einer Stelle ändern können, wenn Sie das Erscheinungsbild eines Seitenkopfs auf der gesamten Site ändern möchten.

Ich werde jedoch ein Ketzer sein und sagen, dass ich in Ihrem Beispiel kein Problem sehe. Sie zielen auf das Verhalten eines einzelnen Bildes ab, das wahrscheinlich auf einer einzelnen Seite richtig aussehen muss. Daher wäre es wahrscheinlich übertrieben, das eigentliche CSS in ein Stylesheet einzufügen.

Der Vorteil für eine andere CSS-Datei sind

1. Einfache Pflege Ihrer HTML-Seite
2. Das Ändern des Erscheinungsbilds ist einfach und Sie können Unterstützung für viele Themen auf Ihren Seiten erhalten.
3. Ihre CSS-Datei wird auf der Browserseite zwischengespeichert. Sie tragen also ein wenig zum Internetverkehr bei, indem Sie nicht jedes Mal, wenn die Seite aktualisiert wird oder der Benutzer auf Ihrer Website navigiert, einige KB Daten laden.

Der HTML5-Ansatz für schnelles CSS-Prototyping

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

CSS hacken

Angenommen, Sie debuggen und möchten Ihre Seiten-CSS ändern, damit ein bestimmter Abschnitt nur besser aussieht. Anstatt Ihre Stile schnell, schmutzig und nicht wartbar inline zu erstellen, können Sie das tun, was ich heutzutage tue, und einen abgestuften Ansatz verfolgen.

Kein Inline-Stilattribut

Erstellen Sie niemals Ihre CSS-Inline, womit ich meine: <element style='color:red'>oder sogar<img style='float:right'> Es ist sehr praktisch, spiegelt aber später nicht die tatsächliche Selektorspezifität in einer echten CSS-Datei wider. Wenn Sie es behalten, werden Sie die Wartungslast später bereuen.

Prototyp mit <style>stattdessen

Wo Sie Inline-CSS verwendet hätten, verwenden Sie stattdessen In-Page- <style> Elemente. Probieren Sie das aus! Es funktioniert in allen Browsern einwandfrei, eignet sich also hervorragend zum Testen und ermöglicht es Ihnen, solche CSS-Dateien ordnungsgemäß in Ihre globalen CSS-Dateien zu verschieben, wann immer Sie möchten / müssen! (* Beachten Sie nur, dass die Selektoren nur eine Spezifität auf Seitenebene anstelle einer Spezifität auf Site-Ebene aufweisen. Seien Sie also vorsichtig, wenn Sie zu allgemein sind.) Genauso sauber wie in Ihren 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 des Inline-CSS anderer Leute

Manchmal sind Sie nicht einmal das Problem, und Sie haben es mit dem Inline-CSS eines anderen zu tun, und Sie müssen es umgestalten. Dies ist eine weitere großartige Verwendung für die<style> In-Seite, sodass Sie das Inline-CSS direkt entfernen und sofort während des Refactorings direkt in Klassen, IDs oder Selektoren auf der Seite platzieren können. Wenn Sie mit Ihren Selektoren vorsichtig genug sind, können Sie das Endergebnis mit nur einem Kopieren und Einfügen in die globale CSS-Datei am Ende verschieben.

Es ist ein wenig schwierig, jedes CSS-Bit sofort in die globale CSS-Datei zu übertragen, aber mit In-Page- <style>Elementen haben wir jetzt Alternativen.

Neben anderen Antworten .... Internationalisierung .

Abhängig von der Sprache des Inhalts müssen Sie häufig das Design eines Elements anpassen.

Ein naheliegendes Beispiel wären Sprachen von rechts nach links.

Angenommen, Sie haben Ihren Code verwendet:

<img src="myimage.gif" style="float:right" />

Angenommen, Ihre Website soll RTL-Sprachen unterstützen - Sie benötigen:

<img src="myimage.gif" style="float:left" />

Wenn Sie nun beide Sprachen unterstützen möchten, gibt es keine Möglichkeit, Float mithilfe des Inline-Stils einen Wert zuzuweisen.

Mit CSS ist dies mit dem lang-Attribut leicht zu erledigen

Sie könnten also so etwas tun:

img {
  float:right;
}
html[lang="he"] img { /* Hebrew. or.. lang="ar" for Arabic etc */
  float:left;
}

Demo

Inline-CSS hat immer Vorrang vor allen verknüpften Stylesheet-CSS. Dies kann Ihnen enorme Kopfschmerzen bereiten, wenn Sie ein geeignetes Cascading Stylesheet schreiben und Ihre Eigenschaften nicht richtig angewendet werden.

Es schadet Ihrer Anwendung auch semantisch: Bei CSS geht es darum, Präsentation von Markup zu trennen. Wenn Sie die beiden miteinander verwickeln, wird es viel schwieriger, die Dinge zu verstehen und aufrechtzuerhalten. Es ist ein ähnliches Prinzip wie das Trennen von Datenbankcode von Ihrem Controller-Code auf der Serverseite.

Stellen Sie sich schließlich vor, Sie haben 20 dieser Bild-Tags. Was passiert, wenn Sie entscheiden, dass sie nach links schweben sollen?

Der Sinn von CSS besteht darin, Inhalte von seiner Präsentation zu trennen. In Ihrem Beispiel mischen Sie also Inhalte mit Präsentationen und dies kann als "schädlich" angesehen werden.

Die Verwendung von Inline-CSS ist viel schwieriger zu warten.

Für jede Eigenschaft, die Sie ändern möchten, müssen Sie bei der Verwendung von Inline-CSS nach dem entsprechenden HTML-Code suchen, anstatt nur in klar definierte und hoffentlich gut strukturierte CSS-Dateien zu schauen.

Dies gilt nur für handgeschriebenen Code. Wenn Sie Code generieren, ist es meiner Meinung nach in Ordnung, hier und da Inline-Stile zu verwenden, insbesondere in Fällen, in denen Elemente und Steuerelemente einer besonderen Behandlung bedürfen.

DRY ist ein gutes Konzept für handgeschriebenen Code, aber bei maschinengeneriertem Code entscheide ich mich für "Law of Demeter": "Was zusammen gehört, muss zusammen bleiben". Es ist einfacher, Code zu manipulieren, der Style-Tags generiert, als einen globalen Style ein zweites Mal in einer anderen und "entfernten" CSS-Datei zu bearbeiten.

Die Antwort auf Ihre Frage: Es kommt darauf an ...

Ich denke, selbst wenn Sie einen bestimmten Stil für ein Element haben möchten, müssen Sie die Möglichkeit in Betracht ziehen, dass Sie denselben Stil auf dasselbe Element auf verschiedenen Seiten anwenden möchten.

Eines Tages könnte jemand darum bitten, dasselbe Element auf jeder Seite zu ändern oder weitere stilistische Änderungen hinzuzufügen. Wenn Sie die Stile in einer externen CSS-Datei definiert hätten, müssten Sie nur dort Änderungen vornehmen, und dies würde sich auf allen Seiten in demselben Element widerspiegeln, wodurch Sie Kopfschmerzen sparen. :-)

Codieren Sie, wie Sie gerne codieren, aber wenn Sie es an eine andere Person weitergeben, verwenden Sie am besten das, was alle anderen tun. Es gibt Gründe für CSS, dann gibt es Gründe für Inline. Ich benutze beide, weil es für mich einfach einfacher ist. Die Verwendung von CSS ist wunderbar, wenn Sie viele der gleichen Wiederholungen haben. Wenn Sie jedoch eine Reihe verschiedener Elemente mit unterschiedlichen Eigenschaften haben, wird dies zu einem Problem. Ein Beispiel für mich ist, wenn ich Elemente auf einer Seite positioniere. Jedes Element als unterschiedliche Eigenschaft oben und links. Wenn ich das alles in ein CSS einfügen würde, würde das die Unordnung zwischen der HTML- und der CSS-Seite wirklich stören. CSS ist also großartig, wenn Sie möchten, dass alles dieselbe Schriftart, Farbe, denselben Hover-Effekt usw. hat. Wenn jedoch alles eine andere Position hat, kann das Hinzufügen einer CSS-Instanz für jedes Element wirklich schmerzhaft sein. Das ist aber nur meine Meinung. CSS ist in größeren Anwendungen wirklich von großer Relevanz, wenn Sie Code durchsuchen müssen. Verwenden Sie das Mozilla-Webentwickler-Plugin, um die Element-IDs und -Klassen zu finden.

Auch wenn Sie den Stil wie in diesem Beispiel nur einmal verwenden, haben Sie CONTENT und DESIGN gemischt. Nachschlagen "Trennung von Bedenken".

Die Verwendung von Inline-Stilen verstößt gegen das Prinzip der Trennung von Bedenken, da Sie Markup und Stil effektiv in derselben Quelldatei mischen. In den meisten Fällen verstößt es auch gegen das DRY-Prinzip (Don't Repeat Yourself), da sie nur auf ein einzelnes Element anwendbar sind, während eine Klasse auf mehrere von ihnen angewendet werden kann (und sogar durch die Magie der CSS-Regeln erweitert werden kann! ).

Darüber hinaus ist eine umsichtige Verwendung von Klassen von Vorteil, wenn Ihre Website Skripte enthält. Beispielsweise hängen einige beliebte JavaScript-Bibliotheken wie JQuery stark von Klassen als Selektoren ab.

Schließlich verleiht die Verwendung von Klassen Ihrem DOM zusätzliche Klarheit, da Sie effektiv über Deskriptoren verfügen, die Ihnen mitteilen, um welche Art von Element es sich bei einem bestimmten Knoten handelt. Beispielsweise:

<div class="header-row">It's a row!</div>

Ist viel ausdrucksvoller als:

<div style="height: 80px; width: 100%;">It's...something?</div>

In-Page-CSS ist derzeit das In-Ding, da Google eine bessere Benutzererfahrung als CSS aus einer separaten Datei bewertet. Eine mögliche Lösung besteht darin, das CSS in eine Textdatei zu legen, es im laufenden Betrieb mit PHP zu laden und in den Dokumentenkopf auszugeben. In dem <head>Abschnitt enthalten diese:

<head> ...

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

... </head>

Geben Sie das erforderliche CSS in styles / style1.txt ein und es wird in der <head> Abschnitt Ihres Dokuments . Auf diese Weise erhalten Sie In-Page-CSS mit dem Vorteil, dass Sie eine Stilvorlage, style1.txt, verwenden können, die von allen Seiten gemeinsam genutzt werden kann, sodass Site-weite Stiländerungen nur über diese eine Datei vorgenommen werden können. Darüber hinaus erfordert diese Methode nicht, dass der Browser separate CSS-Dateien vom Server anfordert (wodurch die Abruf- / Renderzeit minimiert wird), da alles auf einmal von PHP geliefert wird.

Nachdem dies implementiert wurde, können einzelne einmalige Stile bei Bedarf manuell codiert werden.

Inline-CSS eignet sich für maschinengenerierten Code und kann in Ordnung sein, wenn die meisten Besucher nur eine Seite einer Website durchsuchen. Eine Möglichkeit besteht jedoch nicht darin, Medienabfragen zu bearbeiten, um ein unterschiedliches Erscheinungsbild für Bildschirme unterschiedlicher Größe zu ermöglichen. Dazu müssen Sie das CSS entweder in ein externes Stylesheet oder in ein internes Style-Tag aufnehmen.

Obwohl ich allen oben gegebenen Antworten voll und ganz zustimme, dass das Schreiben von CSS in einer separaten Datei immer besser ist als die Wiederverwendbarkeit, Wartbarkeit und Trennung von Problemen, gibt es viele Szenarien, in denen Benutzer Inline-CSS in ihrem Produktionscode bevorzugen -

Die externe CSS-Datei verursacht einen zusätzlichen HTTP-Aufruf an den Browser und damit eine zusätzliche Latenz. Wenn das CSS inline eingefügt wird, kann der Browser es sofort analysieren. Insbesondere über SSL sind HTTP-Aufrufe teurer und erhöhen die Latenz der Seite. Es stehen viele Tools zur Verfügung, mit denen statische HTML-Seiten (oder Seitenausschnitte) durch Einfügen externer CSS-Dateien als Inline-Code generiert werden können. Diese Tools werden in der Build- und Release-Phase verwendet, in der die Produktionsbinärdatei generiert wird. Auf diese Weise erhalten wir alle Vorteile von externem CSS und auch die Seite wird schneller.

Gemäß der AMP-HTML-Spezifikation ist es aus Leistungsgründen erforderlich, CSS in Ihre HTML-Datei (im Vergleich zu einem externen Stylesheet) einzufügen. Dies bedeutet kein Inline-CSS, es werden jedoch keine externen Stylesheets angegeben .

Eine unvollständige Liste von Optimierungen, die ein solches Serving-System durchführen könnte, lautet:

• Ersetzen Sie Bildreferenzen durch Bilder, deren Größe dem Ansichtsfenster des Betrachters entspricht.
• Inline-Bilder, die über der Falte sichtbar sind.
• Inline-CSS-Variablen.
• Erweiterte Komponenten vorladen.
• Minimieren Sie HTML und CSS.

Zusätzlich zu anderen Antworten können Sie die Pseudoklassen oder Pseudoelemente in Inline-CSS nicht als Ziel festlegen