Der Schmetterlingseffekt - CSS in größeren Projekten

46
Der Schmetterlingseffekt CSS in größeren Projekten Sebastian Reiners open knowledge GmbH

Transcript of Der Schmetterlingseffekt - CSS in größeren Projekten

Page 1: Der Schmetterlingseffekt - CSS in größeren Projekten

Der SchmetterlingseffektCSS in größeren Projekten

Sebastian Reinersopen knowledge GmbH

Page 2: Der Schmetterlingseffekt - CSS in größeren Projekten

Herbstcampus 2015 2

Worum soll es gehen?

• Was haben Schmetterlinge und CSS gemeinsam?

• Was macht ein wartbares CSS aus?

• Was kann mir die Arbeit erleichtern?

• Bekomme ich das alles in meine Projektabläufe integriert?

02.09.15

Page 3: Der Schmetterlingseffekt - CSS in größeren Projekten

02.05.2023 Herbstcampus 2015 3

Kleine Ursache ...

Wir haben die Webseite im Vorstand präsentiert.

Die hätten das Ganze lieber in wärmeren Farben. Mit wesentlich mehr Blautönen!

Page 4: Der Schmetterlingseffekt - CSS in größeren Projekten

02.05.2023 Herbstcampus 2015 4

Kleine Ursache ...

Ja, aber ...

Und die Navigation soll statt oben an der linken Seite sein.

Aber in 2 Wochen ist der Livegang!

Page 5: Der Schmetterlingseffekt - CSS in größeren Projekten

02.05.2023 Herbstcampus 2015 5

Kleine Ursache ...

Das weiß der Vorstand. Deshalb muss das auch diese Woche fertig werden,

damit sie nochmal drüberschauen können.

Außerdem ist Blau keine warme Farbe!

Page 6: Der Schmetterlingseffekt - CSS in größeren Projekten

02.05.2023 Herbstcampus 2015 6

... und große Wirkung

• Der Schmetterlings-Effekt

• vom Flügelschlag zum Wirbelsturm

• kleine Änderungen an der Gestaltung => komplexe Änderungen am CSS

Page 7: Der Schmetterlingseffekt - CSS in größeren Projekten

02.05.2023 Herbstcampus 2015 7

Inhalt

1. Ausgangslage

2. Aufbau und Strukturierung

3. CSS Frameworks

4. CSS Preprocessing

5. Qualitätssicherung und Buildprozess

6. Fazit

Page 8: Der Schmetterlingseffekt - CSS in größeren Projekten

02.05.2023 Herbstcampus 2015 8

Größere Projekte?

• Nicht nur umfangreiches CSS

• sondern auch:

• Projekte mit mehreren Leuten

• CSS mit häufigen Änderungen

• CSS in mehreren Varianten

Page 9: Der Schmetterlingseffekt - CSS in größeren Projekten

02.05.2023 Herbstcampus 2015 9

Was sind die Ursachen?

• CSS ...

• ... wird häufig stiefmütterlich behandelt

• ... ist eine Arbeit die "nebenher" erledigt wird

• ... wird häufig unterschätzt

• ... wird genau so komplex werden wie jeder andere Teil des Sourcecode

Page 10: Der Schmetterlingseffekt - CSS in größeren Projekten

02.05.2023 Herbstcampus 2015 10

kurze Begriffsklärung

Aufbau von Regeln:

a:hover { text-decoration: underline;}

Selektor

Eigenschaft Wert

Eigenschafts-Deklaration

Regel

Page 11: Der Schmetterlingseffekt - CSS in größeren Projekten

02.05.2023 Herbstcampus 2015 11

Gestaltungsfaktoren CSS

• Dateiaufteilung

• Sortierung / Aufbau der Regeln

• Aufbau der Selektoren

• Aufbau der Deklarationen

Page 12: Der Schmetterlingseffekt - CSS in größeren Projekten

02.05.2023 Herbstcampus 2015 12

Dateistrukturen für CSS

• Basis Stylesheet (Reset, Einzelelement CSS)

• Layout (ggf. Unterscheidung Desktop/Mobile)

• Module (klar separierbare oder wiederkehrende Elemente)

• Status (Gestaltung der Module in versch. Zusammenhängen)

• Theming ("kundenspezifische" Einstellungen)

Page 13: Der Schmetterlingseffekt - CSS in größeren Projekten

02.05.2023 Herbstcampus 2015 13

Dateistrukturen für CSS

• bestimmte Dateien nur laden, wenn sie benötigt werden

• bei Mobile Stylesheets

• bei sehr komplexem CSS für einzelne Module

Page 14: Der Schmetterlingseffekt - CSS in größeren Projekten

02.05.2023 Herbstcampus 2015 14

Organisation in den Dateien

• Regeln thematisch sortieren

• mit Kommentaren

• Andere Sortierungen unhandlich bis unsinnig.

• Ständige Frage: Gehört die Regel noch in diese Datei?

Page 15: Der Schmetterlingseffekt - CSS in größeren Projekten

02.05.2023 Herbstcampus 2015 15

Aufbau der Regeln

• Regeln sollten ...

• ... nicht redundant sein

• ... wiederverwendbar sein

• Selektoren sollten ...

• ... sich nur nach guter Überlegung direkt auf HTML Elemente beziehen

• ... möglichst wenig IDs enthalten

• ... nicht überspezifisch sein

div#mySpecialContainer > div#mySpecialSubContainer {background-color: #999;color: #222;border: 1px solid #922;

}

Page 16: Der Schmetterlingseffekt - CSS in größeren Projekten

02.05.2023 Herbstcampus 2015 16

Aufbau der Regeln

• Klassen sollten ...

• ... semantisch benannt sein

• Eigenschafts-Deklarationen sollten ...

• ... alphabetisch sortiert sein

• ... Kurzschreibweisen benutzen

• ... auf !important verzichten

• ... nicht in style-Attribute geschrieben werden

Page 17: Der Schmetterlingseffekt - CSS in größeren Projekten

02.05.2023 Herbstcampus 2015 17

Objektorientiertes CSS

• Möglichkeit der CSS Strukturierung

• überträgt OO-Prinzipien auf HTML/CSS

• wiederverwendbare Komponenten

• konzeptioniert durch Nicole Sullivan

Page 18: Der Schmetterlingseffekt - CSS in größeren Projekten

02.05.2023 Herbstcampus 2015 18

Objektorientiertes CSS

• Was ist ein "Objekt" in OOCSS?

• Verbund aus:

• HTML

• CSS

• zugehörige Elemente (bspw. Bilder)

Page 19: Der Schmetterlingseffekt - CSS in größeren Projekten

02.05.2023 Herbstcampus 2015 19

Objektorientiertes CSS - Grundprinzipien

• Trennen von Struktur und Gestaltung

• wiederholte Styles herausziehen

• Klassen zur Benennung von Objekten und Komponenten

• Container von Inhalt trennen

• keine "ortsabhängigen" Styles

• stattdessen eigene Klasse

Page 20: Der Schmetterlingseffekt - CSS in größeren Projekten

02.05.2023 Herbstcampus 2015 20

Objektorientiertes CSS

• Inhalt

• HTML Elemente + direktes CSS

• Container

• komplexere Strukturen, die Inhalte gruppieren

• Objekte

• Container + Layout + Skin CSS

Page 21: Der Schmetterlingseffekt - CSS in größeren Projekten

02.05.2023 Herbstcampus 2015 21

Beispiel-Objekt

<div class="panel panel-warning">

<div class="panelheading">

<h3>Überschrift im Panel</h3>

</div>

<div class="panelbody">

<p>Und hier steht dann ...</p>

</div>

</div>

Page 22: Der Schmetterlingseffekt - CSS in größeren Projekten

02.05.2023 Herbstcampus 2015 22

OOCSS – Pro und Contra

Pro:• Wiederverwendbare Strukturen

• erheblich kleineres CSS

• bessere Verteilbarkeit im Team

Contra:• leicht größeres HTML (Classitis)

• bricht mit Prinzip der Kaskadierung

Page 23: Der Schmetterlingseffekt - CSS in größeren Projekten

02.05.2023 Herbstcampus 2015 23

Über CSS hinaus

• Dokumentation, auch für das Stylesheet!

• auch wenn man alleine arbeitet

• aufwändigere Erklärungen nicht im CSS!

• Festlegung von Coding Guidelines

• Was gehört wo hin?

• Code Formatierung

Page 24: Der Schmetterlingseffekt - CSS in größeren Projekten

02.05.2023 Herbstcampus 2015 24

Immer wieder neu...

• Muss ich bei jedem Projekt immer wieder von vorne anfangen?

• vorgefertigte Stylesheets

• fertiger Werkzeugkasten

Page 25: Der Schmetterlingseffekt - CSS in größeren Projekten

02.05.2023 Herbstcampus 2015 25

CSS Frameworks

• Bieten vorgefertigte Lösungen

• Erstellung von Grids

• Formatierung von typischen Elementen

• Buttons

• Tab-Leisten

• ...

• automatische Anpassung für Mobile Browser

Page 26: Der Schmetterlingseffekt - CSS in größeren Projekten

02.05.2023 Herbstcampus 2015 26

Frameworks - Vorteile

• sind sehr robuste Stylesheets

• kümmern sich idR. schon um Cross-Browser Probleme

• sehr schnell anwendbar

• gemeinsame Grundlage für alle Beteiligten

• nehmen einem "Basisarbeit" ab

Page 27: Der Schmetterlingseffekt - CSS in größeren Projekten

02.05.2023 Herbstcampus 2015 27

Frameworks - Nachteile

• häufig ein eigenes Look & Feel

• setzen bestimmten Stil voraus

• sind oft "mehr als man braucht"

• da häufig Multi-Purpose

• Kollisionsgefahr mit eigenem CSS und JavaScript (sofern schon etwas besteht)

• jeder muss das Framework kennen

Page 28: Der Schmetterlingseffekt - CSS in größeren Projekten

02.05.2023 Herbstcampus 2015 28

Frameworks - Einsatz

• Ich benutze Frameworks wenn ...

• ich schnell ein Ergebnis brauche

• keine besonderen Anforderungen an das Aussehen gestellt werden

• ich Arbeit abgenommen bekommen möchte

• ich noch am Anfang des Projektes stehe

Page 29: Der Schmetterlingseffekt - CSS in größeren Projekten

02.05.2023 Herbstcampus 2015 29

Welche Frameworks gibt es?

Page 30: Der Schmetterlingseffekt - CSS in größeren Projekten

02.05.2023 Herbstcampus 2015 30

Kurzes Beispiel

Anhand von Bootstrap

Page 31: Der Schmetterlingseffekt - CSS in größeren Projekten

02.05.2023 Herbstcampus 2015 31

"Aber CSS ist doof ..."

• CSS wirkt manchmal etwas unvollständig

• hat eine nicht ganz intuitive Syntax

• bspw. Wiederholungen in Selektoren

• bei bestimmten Änderungen sehr schlecht handhabbar

Page 32: Der Schmetterlingseffekt - CSS in größeren Projekten

02.05.2023 Herbstcampus 2015 32

"Aber CSS ist doof ..."

• Was wenn man eine Skriptsprache hätte, die all das kann, was man möchte?

• Was wenn man über diese ein CSS generieren könnte?

• CSS Preprocessor

• {Less}

• Sass (Syntactically Awesome Stylesheets)

• Myth (CSS the way it was imagined.)

Page 33: Der Schmetterlingseffekt - CSS in größeren Projekten

02.05.2023 Herbstcampus 2015 33

{Less} – Ein Preprocessor

• in JavaScript geschrieben

• kann als Script in HTML eingebunden werden

• oder über Node.js ausgeführt werden

• {Less} Skripte sind eine Obermenge von CSS

• alles aus CSS ist in {Less} gültig

Page 34: Der Schmetterlingseffekt - CSS in größeren Projekten

02.05.2023 Herbstcampus 2015 34

Was bietet {Less}?

• Variablen

• Nesting

• Verschachtelung von Klassen

• Vererbung und Mixins

• Funktionen und Operationen

Page 35: Der Schmetterlingseffekt - CSS in größeren Projekten

02.05.2023 Herbstcampus 2015 35

Kurzes Beispiel

Wir machen was mit {Less}.

Page 36: Der Schmetterlingseffekt - CSS in größeren Projekten

02.05.2023 Herbstcampus 2015 36

Preprocessing - Vorteile

• forciert DRY Pattern im CSS

• teilweise intuitiver

• leichtere Änderbarkeit

• führt zu besser organisiertem CSS

• zumindest im Quellcode

Page 37: Der Schmetterlingseffekt - CSS in größeren Projekten

02.05.2023 Herbstcampus 2015 37

Preprocessing - Nachteile

• Eine weitere Schicht an Komplexität

• fehleranfälliger

• erschwert Debugging

• generiertes CSS kann "explodieren"

• "von Hand" kann besser sein

Page 38: Der Schmetterlingseffekt - CSS in größeren Projekten

02.05.2023 Herbstcampus 2015 38

Wann benutze ich das?

• für Theming wie geschaffen

• um umfangreiche Stylesheets sauber strukturieren zu können

• auch nachträglich einführbar

• für das Plus an Komfort

Page 39: Der Schmetterlingseffekt - CSS in größeren Projekten

02.05.2023 Herbstcampus 2015 39

Gutes CSS sicherstellen

• Habe ich automatisch ein gutes CSS, wenn ich das alles mache?

• Vielleicht Ja. Wahrscheinlich Nein!

• Noch wesentlich mehr Fehlerquellen, auf die man achten sollte.

• gerade in großen Projekten

Page 40: Der Schmetterlingseffekt - CSS in größeren Projekten

02.05.2023 Herbstcampus 2015 40

Was sind das für Fehler?

• inhaltliche Fehler

• Eine kleine Auswahl:

• fehlende Fallback-Werte bei neueren CSS Features

• CSS Hacks

• Box-Sizing und daraus resultierende Probleme

• übermäßiger Gebrauch von Web-Fonts

Page 41: Der Schmetterlingseffekt - CSS in größeren Projekten

02.05.2023 Herbstcampus 2015 41

Kann ich das abfangen?

• Überprüfung mit Developer Tools

• Code-Reviews

• Regelmäßige Überprüfung mit CSS Lint

• ist konfigurierbar

• nicht jede Regel macht in jedem Fall Sinn

• zumindest einmal vor dem Live-Gang das fertige Stylesheet überprüfen

• besser: in die Build-Umgebung einbinden

Page 42: Der Schmetterlingseffekt - CSS in größeren Projekten

02.05.2023 Herbstcampus 2015 42

Die Buildumgebung

• Kann ich das auch automatisch machen (lassen)?

• {Less}

• CSS Lint

• Als Maven-Plugin verfügbar

• Sehr einfach über Grunt

• "normale" Umgebung der Tools ist idR. Node.js / Grunt

• für alle Vorteile: Grunt aus Maven ansteuern

Page 43: Der Schmetterlingseffekt - CSS in größeren Projekten

02.05.2023 Herbstcampus 2015 43

Fazit

• Tagelanges Probieren erspart mir Stunden an Planung!• Vieles kann auch bei bestehendem CSS nachträglich

eingeführt werden:

• Modularisierung

• Einsatz eines Preprocessors

• Qualitätssicherung

Page 44: Der Schmetterlingseffekt - CSS in größeren Projekten

02.05.2023 Herbstcampus 2015 44

Fazit

• CSS wird immer Änderungen unterworfen sein.

• gerne auch zu unmöglichen Zeitpunkten

• Ich muss den Änderungen mit Struktur begegnen.

• Woanders plane ich ausgiebig. Warum nicht auch bei CSS?

Page 45: Der Schmetterlingseffekt - CSS in größeren Projekten

02.05.2023 Herbstcampus 2015 45

Fragen?

?????

Page 46: Der Schmetterlingseffekt - CSS in größeren Projekten

Vielen DankSebastian Reiners

open knowledge GmbH

www.openknowledge.de

facebook.com/openknowledge

twitter.com/_openknowledge