Der Schmetterlingseffekt
CSS in größeren Projekten
Sebastian Reiners
open knowledge GmbH
Worum soll es gehen?
• Was haben Schmetterlinge und CSS gemeinsam?
• Was macht ein wartbares CSS aus?
• Was kann mir die A...
Kleine Ursache ...
09.09.2015 Herbstcampus 2015 3
Wir haben die Webseite im Vorstand
präsentiert.
Die hätten das Ganze lie...
Kleine Ursache ...
09.09.2015 Herbstcampus 2015 4
Ja, aber ...
Und die Navigation soll statt oben an
der linken Seite sein...
Kleine Ursache ...
09.09.2015 Herbstcampus 2015 5
Das weiß der Vorstand. Deshalb muss
das auch diese Woche fertig werden,
...
... und große Wirkung
• Der Schmetterlings-Effekt
• vom Flügelschlag zum Wirbelsturm
• kleine Änderungen an der Gestaltung...
Inhalt
1. Ausgangslage
2. Aufbau und Strukturierung
3. CSS Frameworks
4. CSS Preprocessing
5. Qualitätssicherung und Build...
Größere Projekte?
• Nicht nur umfangreiches CSS
• sondern auch:
• Projekte mit mehreren Leuten
• CSS mit häufigen Änderung...
Was sind die Ursachen?
• CSS ...
• ... wird häufig stiefmütterlich behandelt
• ... ist eine Arbeit die "nebenher" erledigt...
kurze Begriffsklärung
Aufbau von Regeln:
a:hover {
text-decoration: underline;
}
09.09.2015 Herbstcampus 2015 10
Selektor
...
Gestaltungsfaktoren CSS
• Dateiaufteilung
• Sortierung / Aufbau der Regeln
• Aufbau der Selektoren
• Aufbau der Deklaratio...
Dateistrukturen für CSS
• Basis Stylesheet (Reset, Einzelelement CSS)
• Layout (ggf. Unterscheidung Desktop/Mobile)
• Modu...
Dateistrukturen für CSS
• bestimmte Dateien nur laden, wenn sie benötigt werden
• bei Mobile Stylesheets
• bei sehr komple...
Organisation in den Dateien
• Regeln thematisch sortieren
• mit Kommentaren
• Andere Sortierungen unhandlich
bis unsinnig....
Aufbau der Regeln
• Regeln sollten ...
• ... nicht redundant sein
• ... wiederverwendbar sein
• Selektoren sollten ...
• ....
Aufbau der Regeln
• Klassen sollten ...
• ... semantisch benannt sein
• Eigenschafts-Deklarationen sollten ...
• ... alpha...
Objektorientiertes CSS
• Möglichkeit der CSS Strukturierung
• überträgt OO-Prinzipien auf HTML/CSS
• wiederverwendbare Kom...
Objektorientiertes CSS
• Was ist ein "Objekt" in OOCSS?
• Verbund aus:
• HTML
• CSS
• zugehörige Elemente (bspw. Bilder)
0...
Objektorientiertes CSS - Grundprinzipien
• Trennen von Struktur und Gestaltung
• wiederholte Styles herausziehen
• Klassen...
Objektorientiertes CSS
• Inhalt
• HTML Elemente + direktes CSS
• Container
• komplexere Strukturen, die Inhalte gruppieren...
Beispiel-Objekt
09.09.2015 Herbstcampus 2015 21
<div class="panel panel-warning">
<div class="panelheading">
<h3>Überschri...
OOCSS – Pro und Contra
Pro:
• Wiederverwendbare Strukturen
• erheblich kleineres CSS
• bessere Verteilbarkeit im Team
Cont...
Über CSS hinaus
• Dokumentation, auch für das Stylesheet!
• auch wenn man alleine arbeitet
• aufwändigere Erklärungen nich...
Immer wieder neu...
• Muss ich bei jedem Projekt immer wieder von vorne
anfangen?
• vorgefertigte Stylesheets
• fertiger W...
CSS Frameworks
• Bieten vorgefertigte Lösungen
• Erstellung von Grids
• Formatierung von typischen Elementen
• Buttons
• T...
Frameworks - Vorteile
• sind sehr robuste Stylesheets
• kümmern sich idR. schon um Cross-Browser Probleme
• sehr schnell a...
Frameworks - Nachteile
• häufig ein eigenes Look & Feel
• setzen bestimmten Stil voraus
• sind oft "mehr als man braucht"
...
Frameworks - Einsatz
• Ich benutze Frameworks wenn ...
• ich schnell ein Ergebnis brauche
• keine besonderen Anforderungen...
Welche Frameworks gibt es?
09.09.2015 Herbstcampus 2015 29
Kurzes Beispiel
Anhand von Bootstrap
09.09.2015 Herbstcampus 2015 30
"Aber CSS ist doof ..."
• CSS wirkt manchmal etwas unvollständig
• hat eine nicht ganz intuitive Syntax
• bspw. Wiederholu...
"Aber CSS ist doof ..."
• Was wenn man eine Skriptsprache hätte, die all das
kann, was man möchte?
• Was wenn man über die...
{Less} – Ein Preprocessor
• in JavaScript geschrieben
• kann als Script in HTML eingebunden werden
• oder über Node.js aus...
Was bietet {Less}?
• Variablen
• Nesting
• Verschachtelung von Klassen
• Vererbung und Mixins
• Funktionen und Operationen...
Kurzes Beispiel
Wir machen was mit {Less}.
09.09.2015 Herbstcampus 2015 35
Preprocessing - Vorteile
• forciert DRY Pattern im CSS
• teilweise intuitiver
• leichtere Änderbarkeit
• führt zu besser o...
Preprocessing - Nachteile
• Eine weitere Schicht an Komplexität
• fehleranfälliger
• erschwert Debugging
• generiertes CSS...
Wann benutze ich das?
• für Theming wie geschaffen
• um umfangreiche Stylesheets sauber strukturieren zu
können
• auch nac...
Gutes CSS sicherstellen
• Habe ich automatisch ein gutes CSS, wenn ich das alles
mache?
• Vielleicht Ja. Wahrscheinlich Ne...
Was sind das für Fehler?
• inhaltliche Fehler
• Eine kleine Auswahl:
• fehlende Fallback-Werte bei neueren CSS Features
• ...
Kann ich das abfangen?
• Überprüfung mit Developer Tools
• Code-Reviews
• Regelmäßige Überprüfung mit CSS Lint
• ist konfi...
Die Buildumgebung
• Kann ich das auch automatisch machen (lassen)?
• {Less}
• CSS Lint
• Als Maven-Plugin verfügbar
• Sehr...
Fazit
• Tagelanges Probieren erspart mir Stunden an Planung!
• Vieles kann auch bei bestehendem CSS nachträglich
eingeführ...
Fazit
• CSS wird immer Änderungen unterworfen sein.
• gerne auch zu unmöglichen Zeitpunkten
• Ich muss den Änderungen mit ...
Fragen?
09.09.2015 Herbstcampus 2015 45
Vielen Dank
Sebastian Reiners
open knowledge GmbH
www.openknowledge.de
facebook.com/openknowledge
twitter.com/_openknowled...
Nächste SlideShare
Wird geladen in …5
×

Der Schmetterlingseffekt - CSS in größeren Projekten

664 Aufrufe

Veröffentlicht am

Speaker: Sebastian Reiners

Je größer ein Web-Projekt wird, umso komplizierter und nervenaufreibender wird die Wartung und erst recht die Änderung des bestehenden CSS. Jeder der schon einmal zwei Wochen vor dem Live-Gang das Web-Frontend komplett umstellen durfte oder ein in die Jahre gekommenes (und entsprechend gewachsenes) Stylesheet überarbeiten sollte, wird wissen wovon hier die Rede ist.

In diesem Vortrag werden kleine und größere Tipps gegeben, wie man solchen Situationen begegnet, sie unter Kontrolle behält und bestenfalls von vorneherein vermeidet. Der Fokus wird dabei auf dem Aufbau wartbarer Stylesheets, der Nutzung von CSS-Frameworks wie Bootstrap, CSS-Preprocessing mittels Less und der Integration ins Build-Management liegen.

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Der Schmetterlingseffekt - CSS in größeren Projekten

  1. 1. Der Schmetterlingseffekt CSS in größeren Projekten Sebastian Reiners open knowledge GmbH
  2. 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 Herbstcampus 2015 2
  3. 3. Kleine Ursache ... 09.09.2015 Herbstcampus 2015 3 Wir haben die Webseite im Vorstand präsentiert. Die hätten das Ganze lieber in wärmeren Farben. Mit wesentlich mehr Blautönen!
  4. 4. Kleine Ursache ... 09.09.2015 Herbstcampus 2015 4 Ja, aber ... Und die Navigation soll statt oben an der linken Seite sein. Aber in 2 Wochen ist der Livegang!
  5. 5. Kleine Ursache ... 09.09.2015 Herbstcampus 2015 5 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!
  6. 6. ... und große Wirkung • Der Schmetterlings-Effekt • vom Flügelschlag zum Wirbelsturm • kleine Änderungen an der Gestaltung => komplexe Änderungen am CSS 09.09.2015 Herbstcampus 2015 6
  7. 7. Inhalt 1. Ausgangslage 2. Aufbau und Strukturierung 3. CSS Frameworks 4. CSS Preprocessing 5. Qualitätssicherung und Buildprozess 6. Fazit 09.09.2015 Herbstcampus 2015 7
  8. 8. Größere Projekte? • Nicht nur umfangreiches CSS • sondern auch: • Projekte mit mehreren Leuten • CSS mit häufigen Änderungen • CSS in mehreren Varianten 09.09.2015 Herbstcampus 2015 8
  9. 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 09.09.2015 Herbstcampus 2015 9
  10. 10. kurze Begriffsklärung Aufbau von Regeln: a:hover { text-decoration: underline; } 09.09.2015 Herbstcampus 2015 10 Selektor Eigenschaft Wert Eigenschafts-Deklaration Regel
  11. 11. Gestaltungsfaktoren CSS • Dateiaufteilung • Sortierung / Aufbau der Regeln • Aufbau der Selektoren • Aufbau der Deklarationen 09.09.2015 Herbstcampus 2015 11
  12. 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) 09.09.2015 Herbstcampus 2015 12
  13. 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 09.09.2015 Herbstcampus 2015 13
  14. 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? 09.09.2015 Herbstcampus 2015 14
  15. 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 09.09.2015 Herbstcampus 2015 15 div#mySpecialContainer > div#mySpecialSubContainer { background-color: #999; color: #222; border: 1px solid #922; }
  16. 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 09.09.2015 Herbstcampus 2015 16
  17. 17. Objektorientiertes CSS • Möglichkeit der CSS Strukturierung • überträgt OO-Prinzipien auf HTML/CSS • wiederverwendbare Komponenten • konzeptioniert durch Nicole Sullivan 09.09.2015 Herbstcampus 2015 17
  18. 18. Objektorientiertes CSS • Was ist ein "Objekt" in OOCSS? • Verbund aus: • HTML • CSS • zugehörige Elemente (bspw. Bilder) 09.09.2015 Herbstcampus 2015 18
  19. 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 09.09.2015 Herbstcampus 2015 19
  20. 20. Objektorientiertes CSS • Inhalt • HTML Elemente + direktes CSS • Container • komplexere Strukturen, die Inhalte gruppieren • Objekte • Container + Layout + Skin CSS 09.09.2015 Herbstcampus 2015 20
  21. 21. Beispiel-Objekt 09.09.2015 Herbstcampus 2015 21 <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>
  22. 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 09.09.2015 Herbstcampus 2015 22
  23. 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 09.09.2015 Herbstcampus 2015 23
  24. 24. Immer wieder neu... • Muss ich bei jedem Projekt immer wieder von vorne anfangen? • vorgefertigte Stylesheets • fertiger Werkzeugkasten 09.09.2015 Herbstcampus 2015 24
  25. 25. CSS Frameworks • Bieten vorgefertigte Lösungen • Erstellung von Grids • Formatierung von typischen Elementen • Buttons • Tab-Leisten • ... • automatische Anpassung für Mobile Browser 09.09.2015 Herbstcampus 2015 25
  26. 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 09.09.2015 Herbstcampus 2015 26
  27. 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 09.09.2015 Herbstcampus 2015 27
  28. 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 09.09.2015 Herbstcampus 2015 28
  29. 29. Welche Frameworks gibt es? 09.09.2015 Herbstcampus 2015 29
  30. 30. Kurzes Beispiel Anhand von Bootstrap 09.09.2015 Herbstcampus 2015 30
  31. 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 09.09.2015 Herbstcampus 2015 31
  32. 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.) 09.09.2015 Herbstcampus 2015 32
  33. 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 09.09.2015 Herbstcampus 2015 33
  34. 34. Was bietet {Less}? • Variablen • Nesting • Verschachtelung von Klassen • Vererbung und Mixins • Funktionen und Operationen 09.09.2015 Herbstcampus 2015 34
  35. 35. Kurzes Beispiel Wir machen was mit {Less}. 09.09.2015 Herbstcampus 2015 35
  36. 36. Preprocessing - Vorteile • forciert DRY Pattern im CSS • teilweise intuitiver • leichtere Änderbarkeit • führt zu besser organisiertem CSS • zumindest im Quellcode 09.09.2015 Herbstcampus 2015 36
  37. 37. Preprocessing - Nachteile • Eine weitere Schicht an Komplexität • fehleranfälliger • erschwert Debugging • generiertes CSS kann "explodieren" • "von Hand" kann besser sein 09.09.2015 Herbstcampus 2015 37
  38. 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 09.09.2015 Herbstcampus 2015 38
  39. 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 09.09.2015 Herbstcampus 2015 39
  40. 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 09.09.2015 Herbstcampus 2015 40
  41. 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 09.09.2015 Herbstcampus 2015 41
  42. 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 09.09.2015 Herbstcampus 2015 42
  43. 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 09.09.2015 Herbstcampus 2015 43
  44. 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? 09.09.2015 Herbstcampus 2015 44
  45. 45. Fragen? 09.09.2015 Herbstcampus 2015 45
  46. 46. Vielen Dank Sebastian Reiners open knowledge GmbH www.openknowledge.de facebook.com/openknowledge twitter.com/_openknowledge

×