der schmetterlingseffekt - css in größeren projekten
TRANSCRIPT
![Page 1: Der Schmetterlingseffekt - CSS in größeren Projekten](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/1.jpg)
Der SchmetterlingseffektCSS in größeren Projekten
Sebastian Reinersopen knowledge GmbH
![Page 2: Der Schmetterlingseffekt - CSS in größeren Projekten](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/2.jpg)
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](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/3.jpg)
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](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/4.jpg)
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](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/5.jpg)
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](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/6.jpg)
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](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/7.jpg)
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](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/8.jpg)
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](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/9.jpg)
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](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/10.jpg)
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](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/11.jpg)
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](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/12.jpg)
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](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/13.jpg)
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](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/14.jpg)
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](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/15.jpg)
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](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/16.jpg)
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](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/17.jpg)
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](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/18.jpg)
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](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/19.jpg)
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](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/20.jpg)
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](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/21.jpg)
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](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/22.jpg)
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](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/23.jpg)
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](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/24.jpg)
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](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/25.jpg)
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](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/26.jpg)
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](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/27.jpg)
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](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/28.jpg)
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](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/29.jpg)
02.05.2023 Herbstcampus 2015 29
Welche Frameworks gibt es?
![Page 30: Der Schmetterlingseffekt - CSS in größeren Projekten](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/30.jpg)
02.05.2023 Herbstcampus 2015 30
Kurzes Beispiel
Anhand von Bootstrap
![Page 31: Der Schmetterlingseffekt - CSS in größeren Projekten](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/31.jpg)
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](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/32.jpg)
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](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/33.jpg)
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](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/34.jpg)
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](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/35.jpg)
02.05.2023 Herbstcampus 2015 35
Kurzes Beispiel
Wir machen was mit {Less}.
![Page 36: Der Schmetterlingseffekt - CSS in größeren Projekten](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/36.jpg)
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](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/37.jpg)
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](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/38.jpg)
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](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/39.jpg)
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](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/40.jpg)
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](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/41.jpg)
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](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/42.jpg)
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](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/43.jpg)
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](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/44.jpg)
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](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/45.jpg)
02.05.2023 Herbstcampus 2015 45
Fragen?
?????
![Page 46: Der Schmetterlingseffekt - CSS in größeren Projekten](https://reader036.vdokument.com/reader036/viewer/2022062503/58d055381a28ab02108b5e91/html5/thumbnails/46.jpg)
Vielen DankSebastian Reiners
open knowledge GmbH
www.openknowledge.de
facebook.com/openknowledge
twitter.com/_openknowledge