Unterschied CSS - inline, intern, extern Datei

2 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet
tWeuster
Nutzer, der sehr aktiv auf gutefrage ist
im Thema HTML
23.10.2013, 12:45

inline bedeutet direkt beim Element. Der Vorteil ist das man sich eventuell Klassen spart. Der Nachteil ist das man eben keine Klassen vergibt und gleiche styles bei jedem Element erneut definieren muss. Wenn man z.B. 20 Tabellenzeilen hat und alle sehen gleich aus, hätte man mit dieser Variante 20 gleiche Styles definiert. Ändert sich eine css eigenschaft, muss man 20 Stellen anpassen.

Intern und extern ist ähnlich. Dabei nutzt man wie schon angedeutet Klassen um styles zu vergeben. Jetzt könntest du eine Klasse für das aussehen der 20 Tabellenzeilen definieren und diese Klasse jeder Tabellenzeile geben. Ändert sich eine eigenschaft musst du sie nur einmal ändern und zwar bei der Klasse.

Der Unterschied zwischen intern und extern ist die Möglichkeit den Browsercache zu nutzen. Die modernen Browser haben die Eigenschaft Dateien zu cachen die sie bereits haben. Dabei wird geschaut ob sich die Datei während des letzten Aufrufes geändert hat. Css Dateien ändern sich nicht jede Stunde sondern eventuell alle 2 Wochen nach einem update. Deshalb hat der user gute chancen die css datei zu cachen. Das kann er aber nur wenn sie nicht direkt im html code eingebunden ist. Dadurch würde er sich traffic sparen. Je nach größe der css datei könnend as schon einige kb an traffic und somit an performance sein.

Eine externe Datei mit sauberen Klassen ist vor zu ziehen. im Kopfbereich definiere ich nur in Testscripten mal ein paar klassen, wenn ich zu faul bin eine extra Datei dafür an zu legen. Inline styles verwende ich nur sehr selten, meistens auch nur in testscripts.
Elroy7000  23.10.2013, 15:30

Dabei nutzt man wie schon angedeutet Klassen um styles zu vergeben. Jetzt könntest du eine Klasse für das aussehen der 20 Tabellenzeilen definieren und diese Klasse jeder Tabellenzeile geben.

Und warum benutzt du keine Selektoren. Dann kannst du darauf verzichten jeder Tabellenzeile eine Klasse zu geben.

0
tWeuster  23.10.2013, 21:55
@Elroy7000

Klar kann man auch machen, war aber nicht die Frage. Die Frage war der Unterschied der drei Methoden, welche ich anhand eines einfachen Beispieles erklärt habe. Wäre die Frage nach effektivem CSS, würde ich auch mal über das "c" in CSS reden.

0