novaCapta: Ihr Partner für die digitale Transformation mit Microsoft Technologien

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

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.

Screenshot Style Information und JavaScript Funktionen in einem HTML-Tag

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,startColorstr=@color1,
     endColorstr=@color2);
}

view source

print?

.main-navigation {
    .background-gradient(#fff5px#99918px);​
}
novaCapta: Ihr Partner für die digitale Transformation mit Microsoft Technologien
Blog 19.08.16

Braucht man wirklich jQuery?

Ich beleuchte diese Frage anhand von Beispielen aus der Praxis und hinterfrage, ob in der modernen Browserlandschaft auch natives JavaScript ausreicht.

Hands of man using online virtual app on mobile phone. Millennial guy chatting on smartphone, using banking services, reading text message, typing, shopping, making call, browsing internet. Close up
Blog 07.06.17

Handlebars.js – Semantische Template Library

Handlebars.js ist eine Template-Engine für JavaScript. Sie ermöglicht dem Entwickler, mit Hilfe von semantischen Templates Business-Logik und HTML zu trennen.

novaCapta: Ihr Partner für die digitale Transformation mit Microsoft Technologien
Blog 12.06.18

Spaltenformatierung in SharePoint: Column formatting vs. JS

Eine Gegenüberstellung der Spaltenformatierung von JSLink zu der neueren Methode Column formating in Office 365.

Foto vom Führungskräfteleitlinien-Workshop der novaCapta im Kölner Büro
Blog 12.03.24

Warum & wie wir Führungsleitlinien entwickelt haben

Um unsere Unternehmenskultur weiterzuentwickeln, haben wir Führungsleitlinien erarbeitet. Wie der Prozess zur Konzeption und Implementierung aussah, teilen wir in diesem Beitrag.

novaCapta: Ihr Partner für die digitale Transformation mit Microsoft Technologien
Referenz

Siemens AG: SharePoint statt Excel bei komplexen Formularen

Zur Verwaltung und Auswertung der Projekt- und Arbeitsstunden nutzte Siemens in der Vergangenheit komplexe Excel Tabellen. Diese Tabellen setzte novaCapta für Siemens in eine einfach zu bedienende, intuitive Anwendung in Microsoft SharePoint um.

Ausschnitt vom Firmenevent 2023 der novaCapta
Blog 05.12.23

Warum Firmenevents Teil unserer Unternehmenskultur sind

Unsere Firmenevents sind fester Bestandteil unserer Unternehmenskultur. Warum dem so ist erfahrt ihr im Video! 🎉

Smiling middle aged executive, mature male hr manager holding documents using laptop looking at pc computer in office at desk, checking financial data in report, doing account paper plan overview.
Blog 30.09.24

Warum KI ein stringentes Contentmanagement benötigt

Content- und Dokumentenmanagement ist wichtig, damit KI ihr volles Potential ausschöpfen kann. Wie Sie das Thema erfolgreich angehen, erklärt unser Experte Wolfgang Raestrup im Video-Interview.

Young man chatting with people from Power Platform Community
Blog 20.10.22

Warum Unternehmen Power Platform Communities fördern sollten

Die Idee hinter Communities: Eine Gruppe soll es einfacher machen, dass Thema zu verstehen, Fragen zu stellen und Lösungen anzubieten. Das gilt auch für die Power Platform.

Close up of female hands while typing on laptop
Blog 24.09.18

Grundlagen der Gestaltung

Die Gestaltgesetze der Wahrnehmungspsychologie

Zwei Frauen schauen gemeinsam auf einen Bildschirm
Blog 08.07.15

Change Management in IT-Projekten

Viele IT-Projekte scheitern am Zusammenspiel verschiedener Faktoren, wie unklare Ziele, ungenügende Ressourcen, schlechte Kommunikation und fehlende User-Akzeptanz.

Blue sky and clouds
Blog 12.08.14

Farben zur Optimierung des SharePoint-Kalender

Auch in SharePoint kann man Kategorien für Teamkalender-Einträge farblich abheben und damit die Lesbarkeit erhöhen. Wir zeigen Ihnen, wie das geht.

Hands of man using online virtual app on mobile phone. Millennial guy chatting on smartphone, using banking services, reading text message, typing, shopping, making call, browsing internet. Close up
Blog 09.05.19

Teams Extensions – Erstellen von Erweiterungen für Teams

Mit der Entwicklung von Extensions kann Teams einfach erweitert werden. Hierfür gibt es das App Studio, welches über den Teams Store installiert werden kann.

Zwei Frauen schauen gemeinsam auf einen Bildschirm
Blog 27.11.18

Tipps und Tricks mit Entity Framework

In diesem Blogbeitrag möchte ich einige Tipps und Tricks rund um Entity Framework mit euch teilen. In allen Beispielen gehen wir vom Code-First Ansatz aus.

Hands of man using online virtual app on mobile phone. Millennial guy chatting on smartphone, using banking services, reading text message, typing, shopping, making call, browsing internet. Close up
Blog 20.12.18

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.

Close up of female hands while typing on laptop
Blog 20.11.18

SharePoint Framework Client-Side Webparts mit React

React ist ein Framework zum Erstellen von Benutzeroberflächen. In der SharePoint Online Entwicklung bietet es sich für die Entwicklung von Client-Side Webparts an.

News der novaCapta
Blog 22.08.18

Zentralisiertes Logging – Simpler Logging-Stack mit Graylog

Logging ist ein komplexes und doch essenzielles Thema. Gute Logs vereinfachen einem Supporter die Arbeit und ermöglichen es, Probleme schneller einzugrenzen.

Hands of man using online virtual app on mobile phone. Millennial guy chatting on smartphone, using banking services, reading text message, typing, shopping, making call, browsing internet. Close up
Blog 10.02.16

Produktiver lernen mit SharePoint

Bringt die aktuelle Version der SharePoint-Plattform so viele neue Features mit, es zu einem perfekten Learning Management System zu machen? Wir beleuchten es.

novaCapta: Ihr Partner für die digitale Transformation mit Microsoft Technologien
Blog 14.02.16

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

SharePoint ist eine vielseitige und mächtige technologische Plattform mit vielen Funktionen. Unseren fünf Expertentipps erhöhen die Adoption.

Zwei Frauen schauen gemeinsam auf einen Bildschirm
Blog 21.01.16

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

Die Generation Y stellt im Arbeitsumfeld neue Anforderungen an Unternehmens-Software und -Systeme. Unsere fünf Tipps, um die Adoption einer Software erhöhen.

novaCapta: Ihr Partner für die digitale Transformation mit Microsoft Technologien
Blog 28.10.15

Drei Tipps für mehr SharePoint-Begeisterung

Wir geben Tipps zur der Microsoft Serverplattform für Content Management, (Social)-Collaboration, Portalfunktion, Business Intelligence und Enterprise Search.

Aug 26