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

Datum

23.02.2015

Dieser Beitrag wurde verfasst von:

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 JavaScript?

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

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.

Wartbarkeit

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-width: 500px) {

.content{

width: 100%;

}

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 top, left 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,startColorstr=@color1,

endColorstr=@color2);

}

view source

print ?

.main-navigation {

.background-gradient(#fff, 5px, #999, 18px);

}

novaCapta

Andy KurzBlog

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

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

Was ist eigentlich so schlecht daran?

Caching​​

DRY-Pri​​nzip

Wartb​arkeit

Media-Queries

Fazit

Erfahren Sie mehr

Braucht man wirklich jQuery?

Handlebars.js – Semantische Template Library

Multi Factor Authentication (Azure und SharePoint)

Wer benötigt ein Intranet?

Webinar: Google Cloud VMware Engine

Application Development für Individualsoftware

Webcast: IASP – Nie wieder IBM Audit

Webinar: Looker Business Intelligence

Given/When/Then und ATDD - Eine Win-Win-Win-Situation!?

Neues Datenschutzgesetz – Schutz vor Sanktionen dank IAM

NIS2 kommt: So bereiten Sie sich optimal vor

Web Analytics

Spaltenformatierung in SharePoint: Column formatting vs. JS

Teams Extensions – Erstellen von Erweiterungen für Teams

Graphentechnologie

Tipps und Tricks mit Entity Framework

Atlassian passt Preise für Lizenzen an

Top 10 CSS Tipps & Tricks in 2020

Softwareentwickler JavaScript (*)

Deno – Das müsst ihr über die Laufzeitumgebung wissen

Mit End-to-End Testing zur einwandfreien Webanwendung

Pflichtpraktikum Softwareentwicklung JavaScript (*)

IBM Cloud Pak for Data Accelerator

Warum & wie wir Führungsleitlinien entwickelt haben

Go Live HCL Domino v12.0.1 - Alle Details und Neuerungen

Expert Consultant* für IAM / Cyber Security (DE/CH)

NIS2 Compliance Navigator

Infrastructure as Code (IaC)

Microsoft Teams: mehr als Videotelefonie und Chat

Was Sie beim nächsten IT-Projekt beachten sollten

Ohne Programmierkenntnisse zum Entwickler werden

Grundlagen der Gestaltung

Nutzung der SharePoint REST API mit Microsoft Flow

Struktureller Aufbau eines Angular Modules

Angular 5 Custom Filter in Angular Material Data-Table

Grundlagen der Datenmodellierung

Der wiederholte Bereich in Nintex Forms

Xamarin – plattformübergreifende App-Entwicklung

Migration IBM Lotus Notes zu Microsoft SharePoint

Vorgesetzte in Nintex per LDAP-Abfrage ermitteln

CQRS in ASP.Net MVC mit Entity Framework

Gefilterte Ansicht über Unterschiede in mehreren Spalten

Dateizugriffsrechte verwalten mit Microsoft RMS – Teil 4

Dateizugriffsrechte verwalten mit Microsoft RMS – Teil 3

Dateizugriffsrechte verwalten mit Microsoft RMS – Teil 2

Dateizugriffsrechte verwalten mit Microsoft RMS – Teil 1

Qualitätsmanagement - Dokumentation verwalten mit SharePoint

Umfragen in Teams mit Microsoft Forms

Zentralisiertes Logging – Simpler Logging-Stack mit Graylog

Angular Route-Guards

Change Management in IT-Projekten

Farben zur Optimierung des SharePoint-Kalender

Die Bedeutung einer Governance

Corporate News – Das zentrale Medium interner Kommunikation

SharePoint vs. TYPO3 – Sechs Gründe für SharePoint-Intranet

Was kann der neue Office 365 Planner – und was kann er nicht

Was ist Application Lifecycle Management (ALM)?

Fünf Tipps für mehr SharePoint-Adoption in Unternehmen

Produktiver lernen mit SharePoint

Fünf Tipps für eine verbesserte Software-Adoption

Drei Tipps für mehr SharePoint-Begeisterung

Hat Ihr Unternehmen einen Informations-Lebenszyklus?

SharePoint und Informationsarchitektur – worauf kommt es an?

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

SharePoint Framework Client-Side Webparts mit React

GraphQL – Die Alternative zu REST

Anhänge nach Datentyp in PowerApps einschränken

Testen von Angular Anwendungen mit Cypress

PDF-Konverter in Power Automate

Die Awareness kommt mit dem ersten Cyberangriff

Warum Firmenevents Teil unserer Unternehmenskultur sind

Was ist überhaupt Inline-Style und JavaScript?

Caching

DRY-Prinzip

Wartbarkeit