Was ist so schlimm an Inline-CSS?

170

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" />
ChessWhiz
quelle
1
Ich bin immer gegen Inline-CSS, auch für einen einzelnen Artikel, ABER ich sehe so viele kommerzielle Websites mit Stilattributen, dass ich mich frage, was die akzeptierte Praxis eigentlich ist.
Yu_ominae
3
Ich denke, dass Inline-Stile faul sind. Ich sage das, weil ich es so oft selbst mache, also weiß ich, warum ich es mache, weil ich keine Ahnung habe, ob der Stil bleiben wird, also habe ich es direkt neben dem HTML gemacht. Heutzutage verwende ich mit HTML5 und pragmatischer Unterstützung für <style> </ style> überall ein nahe gelegenes <style> -Tag, während ich mit dem Layout herumspiele, und migriere es anschließend in die Kern- / Haupt-CSS-Datei. Gleiche Vorteile von Geschwindigkeit und Unmittelbarkeit, fast keiner der Nachteile (Nebenwirkungen auf Off-Page-Elemente aufgrund der Spezifität eins).
Kzqai
3
@yu_ominae - Bedenken Sie, dass "kommerzielle Websites" nicht immer den Best Practices entsprechen. in der Tat ist es ziemlich selten. Der entscheidende Faktor ist, ob der Entwickler weiß, sich darum kümmert und die Zeit hat; oder wenn der Manager bereit ist, die Zeit zuzuweisen und die Mitarbeiter zur Implementierung anzuweisen. Wenn die Arbeitspriorität darin besteht, die Frist einzuhalten, wird die Qualität normalerweise verringert.
BryanH
1
Es ist erwähnenswert, dass "kommerzielle Websites" anscheinend Inline-Stile verwenden, dies jedoch das Ergebnis der Verwendung bestimmter jQuery-Aufrufe (z. B. css()) sein kann, die Inline-Stile anwenden.
Dave Becker

Antworten:

203

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.

David
quelle
18
Sie sagen, mein Beispiel sei kein Problem, aber Sie geben auch zu, dass Sie ein Ketzer sind. Ich mag diesen Ansatz.
ChessWhiz
8
Wenn ich für jedes Mal einen Nickel hätte, wenn ich den Float eines Bildes oder ein anderes CSS ändern müsste, das ursprünglich "nur für ein Element" sein sollte ... ... nun, ich würde zum Abendessen ausgehen in einem schönen Restaurant.
Kzqai
8
Ein weiteres Szenario, in dem es nicht nur in Ordnung ist, Inline-Styling zu verwenden, sondern auch die einzige Möglichkeit, etwas zu stylen: HTML-E-Mails.
Christophe Marois
Die htmlDatei selbst wird jedoch auch zwischengespeichert.
Antwort an user663031: Eine Website mit mehreren Seiten verfügt über viele verschiedene HTML-Seiten, kann jedoch alle Stile in nur einer CSS-Datei kombinieren, die problemlos zwischengespeichert werden kann.
Sinthorion
68

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.
vijay.shad
quelle
2
Ich stelle mir diese Frage ungefähr jeden Monat (ziemlich neu in der Webprogrammierung) und dies ist das erste Mal, dass ich etwas über die zwischengespeicherte CSS-Datei gelesen habe. Das macht es für mich genau dort!
Ganders
Ich habe auch über Cache nachgedacht, aber in meinem Fall muss ich mich mit zusammengeführtem CSS befassen, das 15.000 Zeilen umfasst. Es ist unmöglich, den gesamten großen Teil des Mülls, der nur einmal verwendet werden sollte, auf einer einzelnen Seite zu verwalten, die dies nicht tut. t existieren nicht mehr. Sie geben also bei jedem Besuch CSS-Code an alle für eine einzelne temporäre Seite weiter, die nur von 1% Ihres Datenverkehrs angezeigt wird. Ich bin nicht sicher, ob das Internet-Verkehrsargument in jedem Fall gültig ist. Glücklicherweise werden Webkomponenten die Dinge ändern!
Shadoweb
@ Shadowbob - wäre es nicht besser, kleinere CSS-Dateien anstelle von großen zu haben? Haben Sie vielleicht ein generisches, das für alle Seiten verwendet wird, aber dann kleine separate Stylesheets für andere Seiten. Sollte leichter zu warten sein. Und wenn der Verkehr problematisch ist, kann die Produktion im Erstellungsprozess wahrscheinlich zu einem verschmelzen.
Darius.V
26

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.

Kzqai
quelle
23

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

Danield
quelle
16

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?

issa marie tseng
quelle
12
"immer, immer gewinnen" - es sei denn! wichtig wird im Stylesheet verwendet
James Westgate
6
Ich lebe unter der Annahme, dass Menschen menschlich sind und solche Monstrositäten nicht benutzen. =)
issa marie tseng
3
@ JamesWestgate, bis jemand! Wichtig in der Inline-CSS verwendet, um die Überschreibung zu überschreiben ....
Kzqai
11

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.


quelle
7
Ich zahle Ihnen 5 Dollar, um "Inline-CSS-Stile als schädlich" beim ACM einzureichen.
BalinKingOfMoria CMs wiederherstellen
11

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.

Sylvain
quelle
3
+1 - Ich habe wirklich Probleme, wenn unsere Designer dies als schnelle Lösung tun, nur um etwas zum Ausrichten zu bringen. Die Verwendung eines externen CSS soll bedeuten, dass niemals ein massiver Textersatz durchgeführt werden muss, es sei denn, Sie arbeiten natürlich mit einem einzelnen Stylesheet. Ich habe gestern eine Control Panel-Vorlage erhalten, und es dauerte 2 1/2 Stunden, um Fälle zu finden, in denen Symbole mit Inline-Stilen optimiert wurden. Wahnsinn Ich sage dir ... Wahnsinn :)
Tim Post
1
Wenn Sie über 50 SCSS verfügen und Ihr Inspect-Element nur auf das komprimierte CSS zeigt, bin ich mir nicht sicher, ob CSS von der Einfachheit überzeugt!
Shadoweb
1
@ Shadowbob dafür sind Sourcemaps gedacht. thesassway.com/intermediate/using-source-maps-with-sass
Mike Chamberlain
@ TimPost Es gibt einen Grund, warum die Funktion "Element inspizieren" geboren wurde
Norielle Cruz
9

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 ...

Bruno Jennrich
quelle
7
Ich denke das ist wirklich die richtige Antwort. Das Mantra der "Trennung von Bedenken" ist nur ein Kriterium. "Lokalität" ist auch wichtig für die einfache Wartung. Der Schlüsselaspekt ist, ob der Stil auf semantischer Ebene wiederverwendbar ist oder nicht, nicht nur syntatisch. Wenn dies der Fall ist, ist das Blatt sinnvoll. Ich werde beispielsweise keine Klasse für "float: right" erstellen, nur weil zwei Elemente sie verwenden. Es hängt davon ab, dass die Elemente semantisch gleich sind. Ein "Farb" -Stil ist normalerweise semantisch verwandt (Teil des Themas) und wird normalerweise in ein Blatt eingefügt.
Koriander
5

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. :-)

Ashish Gupta
quelle
4

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.

Noah Beach
quelle
2

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

Ian Mercer
quelle
1

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>
csvan
quelle
1

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.

Roger Stevens
quelle
Ja! Dies ist entscheidend, um zu versuchen, die "Zeit bis zum ersten Malen" zu minimieren, wenn sich Ihr gesamtes CSS in Dateien befindet. Dadurch wird das DOM verschoben, bis die Stylesheets vom Benutzer heruntergeladen wurden. Wenn Sie Ihre kritischen Stile in einem Inline-Knoten <styles> im Kopf haben, können Sie sofort mit dem Rendern des DOM beginnen und die externen Stylesheets verschieben. Spielt einen großen Faktor bei ~ 3G-Verbindungen und der wahrgenommenen Geschwindigkeit. +1 für Ihre Antwort
DOfficial
1

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.


quelle
0

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.

Diptendu
quelle
3
Ihnen fehlt etwas bezüglich der Latenz. Eigentlich ein viel größeres Problem : Das Einbetten des CSS bedeutet, dass jede Seitenanforderung dieses CSS enthalten muss, während der Browser es ansonsten zwischenspeichern kann.
Andrew Barber
Du hast recht. Aus diesem Grund integrieren wir CSS, wenn die Codegröße sehr klein ist, damit der Seitenaufwand nicht zu hoch wird. Es gibt einen sehr interessanten Artikel auf Yahoo! Auf der Seite mit den Perf-Richtlinien developer.yahoo.com/performance/rules.html heißt es, dass 60-80% der Benutzer täglich mit einem leeren Cache auf Ihre Website gelangen ( yuiblog.com/blog/2007/01/04/performance-research-part -2 ) Natürlich hängt es ganz von der Beliebtheit der Website ab. - Je beliebter eine Website ist, desto größer ist die Wahrscheinlichkeit, dass ein nicht leerer Cache vorhanden ist.
Diptendu
Während es wahrscheinlich ist, dass ein Benutzer mit einem leeren Cache auf Ihre Site zugreift , ist es unwahrscheinlich, dass er mit einem leeren Cache auf Ihre Seite zugreift . Sofern die Seite nicht einmal verwendet wird (dh jeder Benutzer zeigt sie nur einmal an), ist die Leistung mit einer separaten CSS-Datei besser.
Astex
Heutzutage sind viele moderne Webseiten als Einzelseitenanwendung konzipiert, die gesamte Seite wird nur beim ersten Mal geladen. Ab dem nächsten Mal wird die Seite durch einen AJAX-Aufruf geändert. Selbst wenn die Seite mehrfach verwendet wird, wird das externe CSS nur einmal geladen.
Diptendu
0

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.
Ronnie Royston
quelle
0

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

Sushmit Sagar
quelle