SlideShare ist ein Scribd-Unternehmen logo
1 von 46
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 Arbeit erleichtern?
• Bekomme ich das alles in meine Projektabläufe
integriert?
02.09.15 Herbstcampus 2015 2
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!
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!
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!
... 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
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
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
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
kurze Begriffsklärung
Aufbau von Regeln:
a:hover {
text-decoration: underline;
}
09.09.2015 Herbstcampus 2015 10
Selektor
Eigenschaft Wert
Eigenschafts-Deklaration
Regel
Gestaltungsfaktoren CSS
• Dateiaufteilung
• Sortierung / Aufbau der Regeln
• Aufbau der Selektoren
• Aufbau der Deklarationen
09.09.2015 Herbstcampus 2015 11
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
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
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
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;
}
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
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
Objektorientiertes CSS
• Was ist ein "Objekt" in OOCSS?
• Verbund aus:
• HTML
• CSS
• zugehörige Elemente (bspw. Bilder)
09.09.2015 Herbstcampus 2015 18
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
Objektorientiertes CSS
• Inhalt
• HTML Elemente + direktes CSS
• Container
• komplexere Strukturen, die Inhalte gruppieren
• Objekte
• Container + Layout + Skin CSS
09.09.2015 Herbstcampus 2015 20
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>
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
Ü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
Immer wieder neu...
• Muss ich bei jedem Projekt immer wieder von vorne
anfangen?
• vorgefertigte Stylesheets
• fertiger Werkzeugkasten
09.09.2015 Herbstcampus 2015 24
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
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
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
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
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. Wiederholungen in Selektoren
• bei bestimmten Änderungen sehr schlecht handhabbar
09.09.2015 Herbstcampus 2015 31
"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
{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
Was bietet {Less}?
• Variablen
• Nesting
• Verschachtelung von Klassen
• Vererbung und Mixins
• Funktionen und Operationen
09.09.2015 Herbstcampus 2015 34
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 organisiertem CSS
• zumindest im Quellcode
09.09.2015 Herbstcampus 2015 36
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
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
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
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
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
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
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
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
Fragen?
09.09.2015 Herbstcampus 2015 45
Vielen Dank
Sebastian Reiners
open knowledge GmbH
www.openknowledge.de
facebook.com/openknowledge
twitter.com/_openknowledge

Weitere ähnliche Inhalte

Andere mochten auch

Tecnologia de la informacion[1]
Tecnologia de la informacion[1]Tecnologia de la informacion[1]
Tecnologia de la informacion[1]Yuya Sanz
 
CUPCAKES Y CHOCOMENSAJES ♥
CUPCAKES Y CHOCOMENSAJES ♥CUPCAKES Y CHOCOMENSAJES ♥
CUPCAKES Y CHOCOMENSAJES ♥Yure Jimenezz
 
Investigacion dhtics
Investigacion dhticsInvestigacion dhtics
Investigacion dhticsandy-92
 
5 ice de-l-encuesta utn
5  ice de-l-encuesta utn5  ice de-l-encuesta utn
5 ice de-l-encuesta utnyanina.pairola
 
Desarrollo del apoyo respiratorio
Desarrollo del apoyo respiratorio Desarrollo del apoyo respiratorio
Desarrollo del apoyo respiratorio Pauly Vero
 
10 Todesurteile für Corporate Blogs
10 Todesurteile für Corporate Blogs10 Todesurteile für Corporate Blogs
10 Todesurteile für Corporate BlogsFaktenkontor
 
Screencasts erstellen - Wie, Warum und Wozu?
Screencasts erstellen - Wie, Warum und Wozu?Screencasts erstellen - Wie, Warum und Wozu?
Screencasts erstellen - Wie, Warum und Wozu?Wolfgang Wagner
 
Vollkommene liebe - Perfect Love
Vollkommene liebe - Perfect LoveVollkommene liebe - Perfect Love
Vollkommene liebe - Perfect LoveFreekidstories
 
Trainings für Instandhaltung und Produktion - Termine 2014
Trainings für Instandhaltung und Produktion - Termine 2014Trainings für Instandhaltung und Produktion - Termine 2014
Trainings für Instandhaltung und Produktion - Termine 2014dankl+partner consulting gmbh
 
Infografik: Die 20 beliebtesten Marken im Social Web
Infografik: Die 20 beliebtesten Marken im Social WebInfografik: Die 20 beliebtesten Marken im Social Web
Infografik: Die 20 beliebtesten Marken im Social WebFaktenkontor
 

Andere mochten auch (18)

Tecnologia de la informacion[1]
Tecnologia de la informacion[1]Tecnologia de la informacion[1]
Tecnologia de la informacion[1]
 
CUPCAKES Y CHOCOMENSAJES ♥
CUPCAKES Y CHOCOMENSAJES ♥CUPCAKES Y CHOCOMENSAJES ♥
CUPCAKES Y CHOCOMENSAJES ♥
 
Lengua
LenguaLengua
Lengua
 
Tema 6 cono
Tema 6 conoTema 6 cono
Tema 6 cono
 
AMBIENTAL
AMBIENTALAMBIENTAL
AMBIENTAL
 
Investigacion dhtics
Investigacion dhticsInvestigacion dhtics
Investigacion dhtics
 
5 ice de-l-encuesta utn
5  ice de-l-encuesta utn5  ice de-l-encuesta utn
5 ice de-l-encuesta utn
 
Desarrollo del apoyo respiratorio
Desarrollo del apoyo respiratorio Desarrollo del apoyo respiratorio
Desarrollo del apoyo respiratorio
 
Lernstand8
Lernstand8Lernstand8
Lernstand8
 
10 gebote
10 gebote10 gebote
10 gebote
 
10 Todesurteile für Corporate Blogs
10 Todesurteile für Corporate Blogs10 Todesurteile für Corporate Blogs
10 Todesurteile für Corporate Blogs
 
Screencasts erstellen - Wie, Warum und Wozu?
Screencasts erstellen - Wie, Warum und Wozu?Screencasts erstellen - Wie, Warum und Wozu?
Screencasts erstellen - Wie, Warum und Wozu?
 
Slideshare
SlideshareSlideshare
Slideshare
 
Vollkommene liebe - Perfect Love
Vollkommene liebe - Perfect LoveVollkommene liebe - Perfect Love
Vollkommene liebe - Perfect Love
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
Trainings für Instandhaltung und Produktion - Termine 2014
Trainings für Instandhaltung und Produktion - Termine 2014Trainings für Instandhaltung und Produktion - Termine 2014
Trainings für Instandhaltung und Produktion - Termine 2014
 
Infografik: Die 20 beliebtesten Marken im Social Web
Infografik: Die 20 beliebtesten Marken im Social WebInfografik: Die 20 beliebtesten Marken im Social Web
Infografik: Die 20 beliebtesten Marken im Social Web
 
Erfolg nach Rolf Berth
Erfolg nach Rolf BerthErfolg nach Rolf Berth
Erfolg nach Rolf Berth
 

Ähnlich wie Der Schmetterlingseffekt - CSS in größeren Projekten

OOCSS Session Barcamp Mainz 2009
OOCSS Session Barcamp Mainz 2009OOCSS Session Barcamp Mainz 2009
OOCSS Session Barcamp Mainz 2009ogleba
 
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)Developing UXD
 
Blank Template - less is more #jd13ch
Blank Template - less is more #jd13chBlank Template - less is more #jd13ch
Blank Template - less is more #jd13chAlexander Schmidt
 
CSS Seminar
CSS SeminarCSS Seminar
CSS Seminartutego
 
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Andreas Wissel
 
Developing UXD - Workshop bei XING
Developing UXD - Workshop bei XINGDeveloping UXD - Workshop bei XING
Developing UXD - Workshop bei XINGDeveloping UXD
 
Devops ohne root
Devops ohne rootDevops ohne root
Devops ohne rootcusy GmbH
 
Modularisierung von Webseiten
Modularisierung von WebseitenModularisierung von Webseiten
Modularisierung von WebseitenJens Grochtdreis
 
201903 seo campixx ur ls komprimieren - slideshare
201903 seo campixx   ur ls komprimieren - slideshare201903 seo campixx   ur ls komprimieren - slideshare
201903 seo campixx ur ls komprimieren - slideshareVisionary Online Marketing
 
ColdFusion im Enterprise Umfeld - Deep Dive
ColdFusion im Enterprise Umfeld - Deep DiveColdFusion im Enterprise Umfeld - Deep Dive
ColdFusion im Enterprise Umfeld - Deep DiveBokowsky + Laymann GmbH
 
WordPress Professional – SEO Campixx
WordPress Professional – SEO CampixxWordPress Professional – SEO Campixx
WordPress Professional – SEO CampixxSebastian Blum
 
Collaboration Days 2011 - Damit die Tester schneller ran können.
Collaboration Days 2011 - Damit die Tester schneller ran können.Collaboration Days 2011 - Damit die Tester schneller ran können.
Collaboration Days 2011 - Damit die Tester schneller ran können.David Schneider
 
Azure Data Factory – Data Management für die Cloud
Azure Data Factory – Data Management für die CloudAzure Data Factory – Data Management für die Cloud
Azure Data Factory – Data Management für die Cloudinovex GmbH
 
Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal Acquia
 
Frontend Development für Backend Developer
Frontend Development für Backend DeveloperFrontend Development für Backend Developer
Frontend Development für Backend DeveloperChristoph Hautzinger
 
Rapid Prototyping mit jQuery (German)
Rapid Prototyping mit jQuery (German)Rapid Prototyping mit jQuery (German)
Rapid Prototyping mit jQuery (German)Paul Bakaus
 

Ähnlich wie Der Schmetterlingseffekt - CSS in größeren Projekten (20)

OOCSS Session Barcamp Mainz 2009
OOCSS Session Barcamp Mainz 2009OOCSS Session Barcamp Mainz 2009
OOCSS Session Barcamp Mainz 2009
 
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
 
Blank Template - less is more #jd13ch
Blank Template - less is more #jd13chBlank Template - less is more #jd13ch
Blank Template - less is more #jd13ch
 
CSS Seminar
CSS SeminarCSS Seminar
CSS Seminar
 
Gutenberg Theme Entwicklung leicht gemacht
Gutenberg Theme Entwicklung leicht gemachtGutenberg Theme Entwicklung leicht gemacht
Gutenberg Theme Entwicklung leicht gemacht
 
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
 
Developing UXD - Workshop bei XING
Developing UXD - Workshop bei XINGDeveloping UXD - Workshop bei XING
Developing UXD - Workshop bei XING
 
Devops ohne root
Devops ohne rootDevops ohne root
Devops ohne root
 
Modularisierung von Webseiten
Modularisierung von WebseitenModularisierung von Webseiten
Modularisierung von Webseiten
 
Frontend2017
Frontend2017Frontend2017
Frontend2017
 
JavaScript Architektur
JavaScript ArchitekturJavaScript Architektur
JavaScript Architektur
 
201903 seo campixx ur ls komprimieren - slideshare
201903 seo campixx   ur ls komprimieren - slideshare201903 seo campixx   ur ls komprimieren - slideshare
201903 seo campixx ur ls komprimieren - slideshare
 
ColdFusion im Enterprise Umfeld - Deep Dive
ColdFusion im Enterprise Umfeld - Deep DiveColdFusion im Enterprise Umfeld - Deep Dive
ColdFusion im Enterprise Umfeld - Deep Dive
 
Contao und CSS
Contao und CSS Contao und CSS
Contao und CSS
 
WordPress Professional – SEO Campixx
WordPress Professional – SEO CampixxWordPress Professional – SEO Campixx
WordPress Professional – SEO Campixx
 
Collaboration Days 2011 - Damit die Tester schneller ran können.
Collaboration Days 2011 - Damit die Tester schneller ran können.Collaboration Days 2011 - Damit die Tester schneller ran können.
Collaboration Days 2011 - Damit die Tester schneller ran können.
 
Azure Data Factory – Data Management für die Cloud
Azure Data Factory – Data Management für die CloudAzure Data Factory – Data Management für die Cloud
Azure Data Factory – Data Management für die Cloud
 
Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal
 
Frontend Development für Backend Developer
Frontend Development für Backend DeveloperFrontend Development für Backend Developer
Frontend Development für Backend Developer
 
Rapid Prototyping mit jQuery (German)
Rapid Prototyping mit jQuery (German)Rapid Prototyping mit jQuery (German)
Rapid Prototyping mit jQuery (German)
 

Mehr von OPEN KNOWLEDGE GmbH

Cloud-native and Enterprise Java? Hold my beer!
Cloud-native and Enterprise Java? Hold my beer!Cloud-native and Enterprise Java? Hold my beer!
Cloud-native and Enterprise Java? Hold my beer!OPEN KNOWLEDGE GmbH
 
From Zero to still Zero: The most beautiful mistakes going into the cloud.
From Zero to still Zero: The most beautiful mistakes going into the cloud. From Zero to still Zero: The most beautiful mistakes going into the cloud.
From Zero to still Zero: The most beautiful mistakes going into the cloud. OPEN KNOWLEDGE GmbH
 
Ready for the Future: Jakarta EE in Zeiten von Cloud Native & Co
Ready for the Future: Jakarta EE in Zeiten von Cloud Native & CoReady for the Future: Jakarta EE in Zeiten von Cloud Native & Co
Ready for the Future: Jakarta EE in Zeiten von Cloud Native & CoOPEN KNOWLEDGE GmbH
 
Shared Data in verteilten Architekturen
Shared Data in verteilten ArchitekturenShared Data in verteilten Architekturen
Shared Data in verteilten ArchitekturenOPEN KNOWLEDGE GmbH
 
Machine Learning mit TensorFlow.js
Machine Learning mit TensorFlow.jsMachine Learning mit TensorFlow.js
Machine Learning mit TensorFlow.jsOPEN KNOWLEDGE GmbH
 
It's not Rocket Science: Neuronale Netze
It's not Rocket Science: Neuronale NetzeIt's not Rocket Science: Neuronale Netze
It's not Rocket Science: Neuronale NetzeOPEN KNOWLEDGE GmbH
 
Shared Data in verteilten Systemen
Shared Data in verteilten SystemenShared Data in verteilten Systemen
Shared Data in verteilten SystemenOPEN KNOWLEDGE GmbH
 
Mehr Sicherheit durch Automatisierung
Mehr Sicherheit durch AutomatisierungMehr Sicherheit durch Automatisierung
Mehr Sicherheit durch AutomatisierungOPEN KNOWLEDGE GmbH
 
API-Design, Microarchitecture und Testing
API-Design, Microarchitecture und TestingAPI-Design, Microarchitecture und Testing
API-Design, Microarchitecture und TestingOPEN KNOWLEDGE GmbH
 
Supersonic Java für die Cloud: Quarkus
Supersonic Java für die Cloud: QuarkusSupersonic Java für die Cloud: Quarkus
Supersonic Java für die Cloud: QuarkusOPEN KNOWLEDGE GmbH
 
Hilfe, ich will meinen Monolithen zurück!
Hilfe, ich will meinen Monolithen zurück!Hilfe, ich will meinen Monolithen zurück!
Hilfe, ich will meinen Monolithen zurück!OPEN KNOWLEDGE GmbH
 
Das ist doch alles nur Frontend - Wer braucht da schon Architektur?
Das ist doch alles nur Frontend - Wer braucht da schon Architektur?Das ist doch alles nur Frontend - Wer braucht da schon Architektur?
Das ist doch alles nur Frontend - Wer braucht da schon Architektur?OPEN KNOWLEDGE GmbH
 
Auf geht‘s in die Cloud: „Das kann doch nicht so schwer sein!“
Auf geht‘s in die Cloud: „Das kann doch nicht so schwer sein!“Auf geht‘s in die Cloud: „Das kann doch nicht so schwer sein!“
Auf geht‘s in die Cloud: „Das kann doch nicht so schwer sein!“OPEN KNOWLEDGE GmbH
 
Das Product Goal oder "Ohne Ziele laufen eben alle in die Richtung, die ihnen...
Das Product Goal oder "Ohne Ziele laufen eben alle in die Richtung, die ihnen...Das Product Goal oder "Ohne Ziele laufen eben alle in die Richtung, die ihnen...
Das Product Goal oder "Ohne Ziele laufen eben alle in die Richtung, die ihnen...OPEN KNOWLEDGE GmbH
 
Die Matrix: Enterprise-Architekturen jenseits von Microservices
Die Matrix: Enterprise-Architekturen jenseits von MicroservicesDie Matrix: Enterprise-Architekturen jenseits von Microservices
Die Matrix: Enterprise-Architekturen jenseits von MicroservicesOPEN KNOWLEDGE GmbH
 

Mehr von OPEN KNOWLEDGE GmbH (20)

Nie wieder Log-Files!
Nie wieder Log-Files!Nie wieder Log-Files!
Nie wieder Log-Files!
 
Cloud-native and Enterprise Java? Hold my beer!
Cloud-native and Enterprise Java? Hold my beer!Cloud-native and Enterprise Java? Hold my beer!
Cloud-native and Enterprise Java? Hold my beer!
 
From Zero to still Zero: The most beautiful mistakes going into the cloud.
From Zero to still Zero: The most beautiful mistakes going into the cloud. From Zero to still Zero: The most beautiful mistakes going into the cloud.
From Zero to still Zero: The most beautiful mistakes going into the cloud.
 
API Expand Contract
API Expand ContractAPI Expand Contract
API Expand Contract
 
Ready for the Future: Jakarta EE in Zeiten von Cloud Native & Co
Ready for the Future: Jakarta EE in Zeiten von Cloud Native & CoReady for the Future: Jakarta EE in Zeiten von Cloud Native & Co
Ready for the Future: Jakarta EE in Zeiten von Cloud Native & Co
 
Shared Data in verteilten Architekturen
Shared Data in verteilten ArchitekturenShared Data in verteilten Architekturen
Shared Data in verteilten Architekturen
 
Machine Learning mit TensorFlow.js
Machine Learning mit TensorFlow.jsMachine Learning mit TensorFlow.js
Machine Learning mit TensorFlow.js
 
KI und Architektur
KI und ArchitekturKI und Architektur
KI und Architektur
 
It's not Rocket Science: Neuronale Netze
It's not Rocket Science: Neuronale NetzeIt's not Rocket Science: Neuronale Netze
It's not Rocket Science: Neuronale Netze
 
Shared Data in verteilten Systemen
Shared Data in verteilten SystemenShared Data in verteilten Systemen
Shared Data in verteilten Systemen
 
Business-Mehrwert durch KI
Business-Mehrwert durch KIBusiness-Mehrwert durch KI
Business-Mehrwert durch KI
 
Mehr Sicherheit durch Automatisierung
Mehr Sicherheit durch AutomatisierungMehr Sicherheit durch Automatisierung
Mehr Sicherheit durch Automatisierung
 
API-Design, Microarchitecture und Testing
API-Design, Microarchitecture und TestingAPI-Design, Microarchitecture und Testing
API-Design, Microarchitecture und Testing
 
Supersonic Java für die Cloud: Quarkus
Supersonic Java für die Cloud: QuarkusSupersonic Java für die Cloud: Quarkus
Supersonic Java für die Cloud: Quarkus
 
Hilfe, ich will meinen Monolithen zurück!
Hilfe, ich will meinen Monolithen zurück!Hilfe, ich will meinen Monolithen zurück!
Hilfe, ich will meinen Monolithen zurück!
 
Das ist doch alles nur Frontend - Wer braucht da schon Architektur?
Das ist doch alles nur Frontend - Wer braucht da schon Architektur?Das ist doch alles nur Frontend - Wer braucht da schon Architektur?
Das ist doch alles nur Frontend - Wer braucht da schon Architektur?
 
Auf geht‘s in die Cloud: „Das kann doch nicht so schwer sein!“
Auf geht‘s in die Cloud: „Das kann doch nicht so schwer sein!“Auf geht‘s in die Cloud: „Das kann doch nicht so schwer sein!“
Auf geht‘s in die Cloud: „Das kann doch nicht so schwer sein!“
 
Das Product Goal oder "Ohne Ziele laufen eben alle in die Richtung, die ihnen...
Das Product Goal oder "Ohne Ziele laufen eben alle in die Richtung, die ihnen...Das Product Goal oder "Ohne Ziele laufen eben alle in die Richtung, die ihnen...
Das Product Goal oder "Ohne Ziele laufen eben alle in die Richtung, die ihnen...
 
Serverless Survival Guide
Serverless Survival GuideServerless Survival Guide
Serverless Survival Guide
 
Die Matrix: Enterprise-Architekturen jenseits von Microservices
Die Matrix: Enterprise-Architekturen jenseits von MicroservicesDie Matrix: Enterprise-Architekturen jenseits von Microservices
Die Matrix: Enterprise-Architekturen jenseits von Microservices
 

Der Schmetterlingseffekt - CSS in größeren Projekten

  • 1. Der Schmetterlingseffekt CSS in größeren Projekten Sebastian Reiners open knowledge GmbH
  • 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. 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. 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. 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. ... 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. 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. 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. 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. kurze Begriffsklärung Aufbau von Regeln: a:hover { text-decoration: underline; } 09.09.2015 Herbstcampus 2015 10 Selektor Eigenschaft Wert Eigenschafts-Deklaration Regel
  • 11. Gestaltungsfaktoren CSS • Dateiaufteilung • Sortierung / Aufbau der Regeln • Aufbau der Selektoren • Aufbau der Deklarationen 09.09.2015 Herbstcampus 2015 11
  • 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. 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. 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. 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. 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. 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. Objektorientiertes CSS • Was ist ein "Objekt" in OOCSS? • Verbund aus: • HTML • CSS • zugehörige Elemente (bspw. Bilder) 09.09.2015 Herbstcampus 2015 18
  • 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. 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. 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. 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. Ü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. Immer wieder neu... • Muss ich bei jedem Projekt immer wieder von vorne anfangen? • vorgefertigte Stylesheets • fertiger Werkzeugkasten 09.09.2015 Herbstcampus 2015 24
  • 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. 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. 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. 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. Welche Frameworks gibt es? 09.09.2015 Herbstcampus 2015 29
  • 30. Kurzes Beispiel Anhand von Bootstrap 09.09.2015 Herbstcampus 2015 30
  • 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. "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. {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. Was bietet {Less}? • Variablen • Nesting • Verschachtelung von Klassen • Vererbung und Mixins • Funktionen und Operationen 09.09.2015 Herbstcampus 2015 34
  • 35. Kurzes Beispiel Wir machen was mit {Less}. 09.09.2015 Herbstcampus 2015 35
  • 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. 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. 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. 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. 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. 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. 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. 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. 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
  • 46. Vielen Dank Sebastian Reiners open knowledge GmbH www.openknowledge.de facebook.com/openknowledge twitter.com/_openknowledge

Hinweis der Redaktion

  1. NICHT NUR GROSSES, UMFANGREICHES CSS!
  2. NICHT NUR GROSSES, UMFANGREICHES CSS!
  3. Zuerst die Funktionalität. Ums Aussehen kannst Du dich nachher kümmern! => und dann is es zu spät CSS wird Stück für Stück erweitert, je nachdem wie die Anwendung entwickelt wird => komplexe Lösungen die einfacher hätten sein können Ich muss da ja nur die Abstände ein wenig erhöhen => Und dann verrutscht alles => Das führt zu Punkt 4
  4. Vom Großen zum Kleinen Wichtigkeit von Reset betonen Mandanten-spezifisch näher erläutern!
  5. ALLES ALS MÖGLICHKEITEN, ALS ORIENTIERUNG Wiederverwendbares und immer wiederkehrendes in eigene Klasse auslagern Beispiel mit input[type=button]{} => Was wenn man auf <button> wechselt?
  6. nicht ".redText" sondern ".errorText" Der einzige der in Style-Attribute ins HTML schreibt ist der JavaScript Interpreter im Browser!
  7. ERSTE HINWEISE GINGEN SCHON IN DIESE RICHTUNG Konzept ist nicht unbedingt neu, allerdings durch Nicole Sullivan erstmals so konsequent durchdacht und formuliert
  8. Auch bereits bekannte Prinzipien aus anderen Bereichen Struktur & Gestaltung: -> gemeinsame Styles in eine Klasse herausziehen (Bsp. Hintergrund von Widgets und Tabs) Container & Inhalt: -> Inhalte nicht von den Containern abhängig machen
  9. Auch bereits bekannte Prinzipien aus anderen Bereichen
  10. Auch bereits bekannte Prinzipien aus anderen Bereichen
  11. Auch bereits bekannte Prinzipien aus anderen Bereichen
  12. Verweis auf das Reset Stylesheet
  13. Konfigurierbarkeit von Bootstrap erwähnen!!
  14. 2. sofern das Framework ein eigenes Aussehen mitbringt 3. sei es, dass ich mich mit CSS nicht ganz so gut auskenne oder dass ich die Zeit anderweitig benötige
  15. YAML: Yet another multicolumn layout (nicht Markup-Sprache zur Datenserialisierung)
  16. Man merkt was diese Preprocessor wollen! Ein erweitertes CSS um die Features, die man schon immer gebraucht hat.
  17. zuerst in Ruby
  18. Ich kann mit Variablen (und generell mit Zahlen) auch Berechnungen anstellen.
  19. Erschwertes Debugging: das was im Browser ist, entspricht nicht mehr dem Quellcode Explodieren: Durch wiederholte Vererbung, Includes u.ä. können 10 Zeilen Less Code zu über 200 im CSS anwachsen
  20. => Theming: Bootstrap macht das über Less
  21. da passieren zwangsläufig irgendwann Flüchtigkeitsfehler oder Sachen werden aus Bequemlichkeit heraus gemacht
  22. nur eine Auswahl an Fehlern! neues CSS Features: RGBA-Farben Box-Sizing, Web-Fonts: Problematik erläutern
  23. CSS Lint: ebenfalls mit Beteiligung von Nicole Sullivan => daher auch stark in Richtung OOCSS
  24. Grunt aus Maven => Verweis auf Svens Vortrag
  25. Wann ist es zu spät Qualitätssicherung einzuführen? Eigentlich nie! Sei sie automatisiert oder vielleicht auch einfach in Form von REVIEWS, wie ich sie sonst bei Quellcode auch mache
  26. Behandeln wir CSS bitte wie anderen Quellcode auch