Einsatz von Inline-CSS und JavaScript-Code ist nicht ideal

Datum

23.02.2015

Dieser Beitrag wurde verfasst von:

Andy Kurz

Immer wieder trifft man bei Internetseiten auf Inline-CSS bzw. JavaScript-Code. Im folgenden Beitrag will ich euch verdeutlichen, warum diese Herangehensweise schlecht ist und nicht für den Entwickler spricht, da Dinge wie Caching, DRY-Prinzip, Wartbarkeit und Media-Queries gänzlich außer Acht gelassen werden.

Was ist überhaupt Inline-Style und Ja​​vaScript?

Wie in folgendem Beispiel zu sehen ist, werden Style Information oder JavaScript Funktionen in den HTML-Tag geschrieben.

Was ist eigentlich so schlecht daran?

Wie man oben im Beispiel schon erkennen kann, wird der Code dadurch sehr schnell unübersichtlich, ganz zu schweigen davon, dass weder Style noch Dynamik etwas im HTML zu suchen haben.
HTML dient nur zur Strukturierung von Inhalten wie Texten, Bildern und Links in einem Dokument. Wie die Seite letztendlich aussehen soll, wird in einer CSS-Datei hinterlegt bzw. das Verhalten (Dynamic, Validierung, usw.) in einer JavaScript-Datei. ​

Caching​​

Auch wenn die Geschwindigkeit der Internetleitungen immer schneller wird, ist Caching ein Thema, das man auf keinen Fall außer Acht lassen sollte. Gerade im Mobilen-Bereich ist es extrem wichtig, dass Internetauftritte schnell geladen werden. Wenn dann beim ersten Aufruf einer Seite CSS- und JS-Dateien in den Cache wandern, müssen diese beim nächsten Klick oder Besuch nicht mehr geladen werden. Dies steigert dann natürlich die Performance einer Seite deutlich.

DRY-Pri​​nzip

Don’t repeat yourself ist ein Prinzip, welches besagt, dass Redundanz zu vermeiden oder zu reduzieren ist. Gerade bei Inline-CSS wird dieser Punkt der Redundanz gänzlich ignoriert, da jeder Style und jede Funktion immer und immer wieder in die einzelnen Elemente geschrieben werden müssen.

Wartb​arkeit

Kommt es zu Änderungswünschen, wird es je nach Größe der Internetseite ziemlich aufwendig dies anzupassen. Hat man zum Beispiel jedem Link den Inline-Style „color: “red”; font-weight: “bold”;” gegeben und möchte nur die Color auf „green” ändern, ist man für eine sehr kleine Anpassung, die eigentlich nur in einer einzigen CSS-Datei gemacht werden müsste, einige Zeit beschäftigt.

Media-Queries

Jedem dürfte der Begriff „Media-Queries” hoffentlich bekannt sein, vor allem in Zeiten von Web 2.0. So kann man zum Beispiel mit der folgenden Codezeile über das Attribut “media” mit dem Value “print” angeben, dass eine seperate CSS-Datei für den Druck des Dokuments eingebunden wird.

<link href="/print.css" rel="stylesheet" media="print" type="text/css" />​

​​
Eine weitere Möglichkeit ist es, verschiedene Elemente bei verschiedenen Auflösungen anders zu formatieren. ​

@media only screen and (max-width500px) {
    .content{
        width100%;
    }
}

Diese Möglichkeiten stehen mit Inline Styles nicht zur Verfügung und somit kann nicht auf spezielle Auflösungen(Handy, Tablet, Drucker usw.) reagiert werden.  ​

Fazit

Allein rein aus Sicht der Wartbarkeit und Performance ist es ratsam, Code klar und strukturiert zu schreiben, sowie JavaScript in eine JS-Datei und die Styles in eine CSS-Datei auszulagern. Für das Styling sollten CSS-Klassen und in JavaScript Event-Handler verwendet werden. Wir bei novaCapta schreiben unser CSS in LESS (http://www.lesscss.de), welches eine dynamische Stylesheet Sprache ist, die noch um einiges strukturierter und mächtiger ist. So können zum Beispiel Variablen für Farben, Schriftgrößen und Maße in einer separaten Datei hinterlegt werden, was den Wartungsaufwand immens reduziert, da alles nur noch an einer Stelle im Code geändert werden muss. Ebenfalls kann man Mixins (Funktionen) definieren, die an verschiedenen Stellen eingebunden werden können ohne jedes mal alles neu schreiben zu müssen.

.background-gradient (@color1, @stop1, @color2, @stop2) {
    background: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2);
    background: -webkit-gradient(linear, left topleft bottom, color-stop(@stop1, @color1),
     color-stop(@stop2, @color2));
    background: -webkit-linear-gradient(top, @color1 @stop1,@color2 @stop2);
    background: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2);
    background: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2);
    background: linear-gradient(to bottom, @color1 @stop1, @color2 @stop2);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,[email protected]1,
     [email protected]2);
}

view source

print?

.main-navigation {
    .background-gradient(#fff5px#99918px);​
}

Erfahren Sie mehr

Ich bin im Flow! – Eine Übersicht zu Microsoft Flow
Blog
Blog

Ich bin im Flow! – Eine Übersicht zu Microsoft Flow

Die Power Platform wird aktuell von Microsoft sehr stark gepusht. Zeit, sich mit dem Potenzial der einzelnen Komponenten zu beschäftigen. Heute: Flow.

DevOps und Container
Blog
Blog

DevOps und Container

DevOps an sich ist nicht an eine Technologie gebunden, jedoch haben sich Container-Technologien und DevOps als Verwandte im Geiste gefunden.

PowerApps – Neuigkeiten, Übersicht, Tipps & Tricks
Blog
Blog

PowerApps – Neuigkeiten, Übersicht, Tipps & Tricks

Neues aus der Welt von PowerApps

May
04
novaCapta auf der dotnet Cologne
Event
Event

novaCapta auf der dotnet Cologne

In nächster Nachbarschaft zu unserem Kölner Büro findet am 04. und 05. Mai die dotnet Cologne im KOMED statt. Wir von der novaCapta sind auch dabei.

Office 365 Groups als Evolution von SharePoint?
Blog
Blog

Office 365 Groups als Evolution von SharePoint?

Zusätzlich zu SharePoint erlauben die Office 365 Groups es mir als Anwender, schnell und einfach neue Gruppen anzulegen und selbständig Benutzer hinzuzufügen.

Das neuste Mitglied der Office 365 Familie: Delve
Blog
Blog

Das neuste Mitglied der Office 365 Familie: Delve

Microsoft legt nach: Mit Delve startet eine neue Form des Suchens und des Auffinden von Dokumenten und Informationen.

Azure Functions: Der Webservice ohne Webserver
Blog
Blog

Azure Functions: Der Webservice ohne Webserver

Azure Functions als Authentifizierungs-Helfer für clientseitige Lösungen mit 3rd Party APIs

DevOps und „The Phoenix Project“
Blog
Blog

DevOps und „The Phoenix Project“

Buchvorstellung "Projekt Phoenix: Der Roman über IT und DevOps - Neue Erfolgsstrategien für Ihre Firma" von Gene Kim.

Paket Dependency Manager für .NET
Blog
Blog

Paket Dependency Manager für .NET

Paket ist ein Dependency Manager für .NET, welcher es sich zum Ziel gesetzt hat einige Probleme von NuGet zu beheben.

Sprechen Sie LUIS? – Der intelligente Chat-Bot im Praxistest
Blog
Blog

Sprechen Sie LUIS? – Der intelligente Chat-Bot im Praxistest

Mit LUIS, der Sprach- und Texterkennungssoftware von Microsoft, und dem Bot Framework von Azure haben wir eine Lösung für den IT-Support entwickelt.

Jan
25
Webcast mit Microsoft: Fit für die digitale Arbeitswelt
Webinar
Webinar

Webcast mit Microsoft: Fit für die digitale Arbeitswelt

Die digitale Transformation und die Veränderung der Arbeitswelt ist längst in vielen Unternehmen und in den öffentlichen Einrichtungen angekommen. Dennoch stell...

Theobald Software neuer Partner von novaCapta
News
News

Theobald Software neuer Partner von novaCapta

Komplexe SAP-Prozesse direkt in SharePoint durchführen – dabei unterstützt uns unser neuer Partner Theobald Software.