PATTERNPLATE & ATOMIC
DESIGN
WORUM GEHT’S?
/ ATOMIC DESIGN
/ PATTERNPLATE
/ CSS-MODULES
WORUM GEHT’S?
/ ATOMIC DESIGN
/ PATTERNPLATE
/ CSS-MODULES
WEBDESIGN IST SCHWER
SINNERSCHRADER SINNERSCHRADER | O2 CORPORATE WEBSITE | 09.09.2015 6
Responsive Design
Dynamische Views
Single Page Apps
RESPONSIVE DESIGN
SINNERSCHRADER SINNERSCHRADER | O2 CORPORATE WEBSITE | 09.09.2015 8
PROBLEM
Viele verschiedene Zielgeräte,
Viewports & Use...
SINNERSCHRADER SINNERSCHRADER | O2 CORPORATE WEBSITE | 09.09.2015 9
ZIEL
Bestmögliche Darstellung der Inhalte
auf allen Vi...
DYNAMISCHE VIEWS
UND SINGLE PAGE APPS
SINNERSCHRADER SINNERSCHRADER | O2 CORPORATE WEBSITE | 09.09.2015 11
PROBLEM
Wir können nicht mehr nur in Seiten
denken, d...
SINNERSCHRADER SINNERSCHRADER | O2 CORPORATE WEBSITE | 09.09.2015 12
ZIEL
Greifbare Bestandteile, die man
beschreiben und ...
LÖSUNG: DESIGN SYSTEME
SINNERSCHRADER TECHNIK OFFSITE | 01.10.2015 14
FÜR RESPONSIVE DESIGN
DESIGN SYSTEME
/ Definition von relativen Darstellung...
SINNERSCHRADER TECHNIK OFFSITE | 01.10.2015 15
FÜR DYNAMISCHE VIEWS
DESIGN SYSTEME
/ Identifizieren wiederkehrender Patter...
ATOMIC DESIGN
SINNERSCHRADER SINNERSCHRADER | O2 CORPORATE WEBSITE | 09.09.2015 17
AUFTEILUNG VON LAYOUTS
IN WIEDERVERWENDBARE
KOMPONENT...
SINNERSCHRADER TECHNIK OFFSITE | 01.10.2015 18
ATOMIC DESIGN
Interfaces are made up of smaller
components. This means we c...
SINNERSCHRADER SINNERSCHRADER | O2 CORPORATE WEBSITE | 09.09.2015
TRENDS IN CORPORATE WEB DESIGN
EIN BLICK AUF ANDERE LEAD...
SINNERSCHRADER TECHNIK OFFSITE | 01.10.2015 20
ATOMS
Atome sind die Grundbausteine von Materie.
Im Web z. B. unsere HTML-T...
SINNERSCHRADER TECHNIK OFFSITE | 01.10.2015 21
MOLECULES
Moleküle sind Gruppierungen von
Atomen und die kleinsten
Grundein...
SINNERSCHRADER TECHNIK OFFSITE | 01.10.2015 22
ORGANISMS
Organismen sind Gruppen von Molekülen.
Sie stellen eine relativ k...
SINNERSCHRADER TECHNIK OFFSITE | 01.10.2015 23
TEMPLATES
Templates enthalten Gruppen von
Organismen, die zusammen die
Vorl...
SINNERSCHRADER TECHNIK OFFSITE | 01.10.2015 24
PAGES
Seiten sind spezifische Instanzen von
Templates, in denen die Platzhal...
SINNERSCHRADER SINNERSCHRADER | O2 CORPORATE WEBSITE | 09.09.2015
TRENDS IN CORPORATE WEB DESIGN
EIN BLICK AUF ANDERE LEAD...
SINNERSCHRADER TECHNIK OFFSITE | 01.10.2015 26
ATOMIC DESIGN
AM BEISPIEL DES TELEFÓNICA DASHBOARDS
SINNERSCHRADER TECHNIK OFFSITE | 01.10.2015 27
ATOMIC DESIGN
AM BEISPIEL DES TELEFÓNICA DASHBOARDS
SINNERSCHRADER TECHNIK OFFSITE | 01.10.2015 28
ATOMIC DESIGN
AM BEISPIEL DES TELEFÓNICA DASHBOARDS
SINNERSCHRADER TECHNIK OFFSITE | 01.10.2015 29
ATOMIC DESIGN
AM BEISPIEL DES TELEFÓNICA DASHBOARDS
SINNERSCHRADER TECHNIK OFFSITE | 01.10.2015 30
ATOMIC DESIGN
AM BEISPIEL DES TELEFÓNICA DASHBOARDS
SINNERSCHRADER TECHNIK OFFSITE | 01.10.2015 31
ATOMIC DESIGN
AM BEISPIEL DES TELEFÓNICA DASHBOARDS
STYLEGUIDES
SINNERSCHRADER TECHNIK OFFSITE | 01.10.2015 33
ATOMIC DESIGN IN DER ANWENDUNG
/ Dokumentation: Wie werden Design-Komponent...
SINNERSCHRADER TECHNIK OFFSITE | 01.10.2015 34
STYLEGUIDE BISHER
/ Wird in der Design-Phase erstellt
/ Oft als vermaßtes P...
WORUM GEHT’S?
/ ATOMIC DESIGN
/ PATTERNPLATE
/ CSS-MODULES
SINNERSCHRADER S2 | ATOMIC DESIGN & PATTERNPLATE | 01.10.2015 36
LIVING STYLEGUIDE
PATTERNPLATE
BY SINNERSCHRADER
PATTERN… WHAT?!
LIVING STYLEGUIDE
SINNERSCHRADER S2 | ATOMIC DESIGN & PATTERNPLATE | 01.10.2015 39
LIVING STYLEGUIDE
Der Living Styleguide ist ein zentrales...
SINNERSCHRADER S2 | ATOMIC DESIGN & PATTERNPLATE | 01.10.2015 40
VORTEILE EINES ZENTRALEN REPOSITORY
LIVING STYLEGUIDE
LIV...
SINNERSCHRADER S2 | ATOMIC DESIGN & PATTERNPLATE | 01.10.2015 41
LIVING STYLEGUIDE
PATTERNPLATE
BY SINNERSCHRADER
SINNERSCHRADER S2 | ATOMIC DESIGN & PATTERNPLATE | 01.10.2015 42
PATTERNPLATE ENTHÄLT…
/ … eine Entwicklungsumgebung zur E...
SINNERSCHRADER S2 | ATOMIC DESIGN & PATTERNPLATE | 01.10.2015 43
PATTERNPLATE
/ Ein Ordner pro Pattern
/ JavaScript, CSS, ...
SINNERSCHRADER S2 | ATOMIC DESIGN & PATTERNPLATE | 01.10.2015 44
DEMO
SINNERSCHRADER S2 | ATOMIC DESIGN & PATTERNPLATE | 01.10.2015 45
LIVING STYLEGUIDE
PATTERNPLATE
GUESS WHAT?
SINNERSCHRADER S2 | ATOMIC DESIGN & PATTERNPLATE | 01.10.2015
github.com/sinnerschrader/patternplate
46
LIVING STYLEGUIDE
...
START YOUR ENGINES!
WORUM GEHT’S?
/ ATOMIC DESIGN
/ PATTERNPLATE
/ CSS-MODULES
SAVE CSS
SINNERSCHRADER SINNERSCHRADER | MASTER | 08.04.2015 50
CSS styling findet aktuell immer im
globalen Namespace statt.
SINNERSCHRADER | MASTER | 08.04.2015SINNERSCHRADER 51
/ Inline Styling
/ Naming Conventions
/ CSS in JS
/ Scoped CSS
BISHE...
SINNERSCHRADER | MASTER | 08.04.2015SINNERSCHRADER 52
✓ Eindeutiges Scoping

✖ Kein caching
✖ Schwer zu pflegen
✖ Keine Ps...
SINNERSCHRADER | MASTER | 08.04.2015SINNERSCHRADER 54
/ Eindeutige Namen

.my-totally-super-duper-unique-selector-yeah {…}...
SINNERSCHRADER | MASTER | 08.04.2015SINNERSCHRADER 55
✓ Naming Conventions sind die aktuell geläufige Methode um CSS zu “s...
SINNERSCHRADER | MASTER | 08.04.2015SINNERSCHRADER 56
.site-search__input-field——active
UND…
SINNERSCHRADER | MASTER | 08.04.2015SINNERSCHRADER 57
✓ Geläufig in der React Community
✓ Verschiedene Libraries (React St...
SINNERSCHRADER | MASTER | 08.04.2015SINNERSCHRADER 58
✖ keine Pseudoselektoren (:hover, :active, :checked, ::before, etc.)...
SINNERSCHRADER | MASTER | 08.04.2015SINNERSCHRADER 59
<section>
<style scoped>
:scope {
background: #bada55;
}
p {
backgro...
SINNERSCHRADER | MASTER | 08.04.2015SINNERSCHRADER 60
✓ Teil des HTML-Spec
✓ Reines, natives Scoping

✖ Inline Style-Blöck...
SINNERSCHRADER SINNERSCHRADER | MASTER | 08.04.2015 61
BROWSERSUPPORT
Entfernt in Chrome 43 YAY! scoped styling im shadow ...
SINNERSCHRADER | MASTER | 08.04.2015SINNERSCHRADER 62
THE NEW KID ON THE BLOCK
CSS MODULES
SINNERSCHRADER | MASTER | 08.04.2015SINNERSCHRADER 63
/ CSS Scoping Library
/ Erzeugt gehashte Klassennamen
/ Basierend au...
SINNERSCHRADER | MASTER | 08.04.2015SINNERSCHRADER 64
/* components/submit-button.css */
.normal { … }
.disabled { … }
.er...
SINNERSCHRADER | MASTER | 08.04.2015SINNERSCHRADER 65
/* dist/index.html */
<button class="components_submit_button__norma...
SINNERSCHRADER | MASTER | 08.04.2015SINNERSCHRADER 66
/* components/GlobalSelectors.css */
:global .text {
color: #bada55;...
SINNERSCHRADER | MASTER | 08.04.2015SINNERSCHRADER 67
/* components/Compose.css */
.common {
/* all the common styles you ...
SINNERSCHRADER | MASTER | 08.04.2015SINNERSCHRADER 68
/* colors.css */
.primary {
color: #720;
}
.secondary { … }
CSS MODU...
SINNERSCHRADER | MASTER | 08.04.2015SINNERSCHRADER 69
/* dist/index.html*/
<button class="shared_colors__primary__fca929
c...
SINNERSCHRADER | MASTER | 08.04.2015SINNERSCHRADER 70
✓ Klares Scoping durch gehashte Klassen
✓ Menschenlesbare Klassen im...
SINNERSCHRADER | MASTER | 08.04.2015SINNERSCHRADER 71
YAY!
VIELEN DANK FÜR EURE
AUFMERKSAMKEIT!
patternplate und atomic design
patternplate und atomic design
Nächste SlideShare
Wird geladen in …5
×

patternplate und atomic design

551 Aufrufe

Veröffentlicht am

Wir erklären Atomic Design in der Frontend-Entwicklung und zeigen wie wir anhand von patternplate wie moderne Komponenten-Bibliotheken technik-gestützt erstellt und gewartet werden können. Außerdem gehen wir auf neue technische Konzepte wie CSS modules ein und stellen dar welche Vorteile für große Projekte darauf generiert werden können.

Veröffentlicht in: Technologie
0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
551
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
18
Aktionen
Geteilt
0
Downloads
6
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

patternplate und atomic design

  1. 1. PATTERNPLATE & ATOMIC DESIGN
  2. 2. WORUM GEHT’S? / ATOMIC DESIGN / PATTERNPLATE / CSS-MODULES
  3. 3. WORUM GEHT’S? / ATOMIC DESIGN / PATTERNPLATE / CSS-MODULES
  4. 4. WEBDESIGN IST SCHWER
  5. 5. SINNERSCHRADER SINNERSCHRADER | O2 CORPORATE WEBSITE | 09.09.2015 6 Responsive Design Dynamische Views Single Page Apps
  6. 6. RESPONSIVE DESIGN
  7. 7. SINNERSCHRADER SINNERSCHRADER | O2 CORPORATE WEBSITE | 09.09.2015 8 PROBLEM Viele verschiedene Zielgeräte, Viewports & UserAgents
  8. 8. SINNERSCHRADER SINNERSCHRADER | O2 CORPORATE WEBSITE | 09.09.2015 9 ZIEL Bestmögliche Darstellung der Inhalte auf allen Viewports, einheitliches Aussehen gleicher Elemente
  9. 9. DYNAMISCHE VIEWS UND SINGLE PAGE APPS
  10. 10. SINNERSCHRADER SINNERSCHRADER | O2 CORPORATE WEBSITE | 09.09.2015 11 PROBLEM Wir können nicht mehr nur in Seiten denken, das erfasst nicht alle möglichen Zustände
  11. 11. SINNERSCHRADER SINNERSCHRADER | O2 CORPORATE WEBSITE | 09.09.2015 12 ZIEL Greifbare Bestandteile, die man beschreiben und verstehen kann
  12. 12. LÖSUNG: DESIGN SYSTEME
  13. 13. SINNERSCHRADER TECHNIK OFFSITE | 01.10.2015 14 FÜR RESPONSIVE DESIGN DESIGN SYSTEME / Definition von relativen Darstellungsregeln / Mobile first, dann Weiterentwicklung für größere Viewports / Wiederkehrende Elemente, konsistentes Aussehen und Grundstyling für Basis-Elemente
  14. 14. SINNERSCHRADER TECHNIK OFFSITE | 01.10.2015 15 FÜR DYNAMISCHE VIEWS DESIGN SYSTEME / Identifizieren wiederkehrender Patterns / Maximale Wiederverwendung bei wechselndem Content / Baukastensystem für Seiten-Zustände
  15. 15. ATOMIC DESIGN
  16. 16. SINNERSCHRADER SINNERSCHRADER | O2 CORPORATE WEBSITE | 09.09.2015 17 AUFTEILUNG VON LAYOUTS IN WIEDERVERWENDBARE KOMPONENTEN
  17. 17. SINNERSCHRADER TECHNIK OFFSITE | 01.10.2015 18 ATOMIC DESIGN Interfaces are made up of smaller components. This means we can break entire interfaces down into fundamental building blocks and work up from there. That’s the basic gist of atomic design. – Brad Frost, 2013
  18. 18. SINNERSCHRADER SINNERSCHRADER | O2 CORPORATE WEBSITE | 09.09.2015 TRENDS IN CORPORATE WEB DESIGN EIN BLICK AUF ANDERE LEADING BRANDS 19
  19. 19. SINNERSCHRADER TECHNIK OFFSITE | 01.10.2015 20 ATOMS Atome sind die Grundbausteine von Materie. Im Web z. B. unsere HTML-Tags (label, input, form…)
  20. 20. SINNERSCHRADER TECHNIK OFFSITE | 01.10.2015 21 MOLECULES Moleküle sind Gruppierungen von Atomen und die kleinsten Grundeinheiten von Komponenten. Im Web bspw. eine Checkbox mit Label.
  21. 21. SINNERSCHRADER TECHNIK OFFSITE | 01.10.2015 22 ORGANISMS Organismen sind Gruppen von Molekülen. Sie stellen eine relativ komplexe, individuelle Sektion eines Interfaces dar, wie bspw. ein Formular oder ein Teaser.
  22. 22. SINNERSCHRADER TECHNIK OFFSITE | 01.10.2015 23 TEMPLATES Templates enthalten Gruppen von Organismen, die zusammen die Vorlage einer Seite ergeben.
  23. 23. SINNERSCHRADER TECHNIK OFFSITE | 01.10.2015 24 PAGES Seiten sind spezifische Instanzen von Templates, in denen die Platzhalter durch repräsentative Inhalte ausgetauscht werden.
  24. 24. SINNERSCHRADER SINNERSCHRADER | O2 CORPORATE WEBSITE | 09.09.2015 TRENDS IN CORPORATE WEB DESIGN EIN BLICK AUF ANDERE LEADING BRANDS 25 Atomic design gives us the ability to traverse from abstract to concrete. So, we can create systems that promote consistency and scalability while simultaneously showing things in their final context. And by assembling rather than deconstructing, we’re crafting a system right out of the gate instead of cherry picking patterns after the fact.
  25. 25. SINNERSCHRADER TECHNIK OFFSITE | 01.10.2015 26 ATOMIC DESIGN AM BEISPIEL DES TELEFÓNICA DASHBOARDS
  26. 26. SINNERSCHRADER TECHNIK OFFSITE | 01.10.2015 27 ATOMIC DESIGN AM BEISPIEL DES TELEFÓNICA DASHBOARDS
  27. 27. SINNERSCHRADER TECHNIK OFFSITE | 01.10.2015 28 ATOMIC DESIGN AM BEISPIEL DES TELEFÓNICA DASHBOARDS
  28. 28. SINNERSCHRADER TECHNIK OFFSITE | 01.10.2015 29 ATOMIC DESIGN AM BEISPIEL DES TELEFÓNICA DASHBOARDS
  29. 29. SINNERSCHRADER TECHNIK OFFSITE | 01.10.2015 30 ATOMIC DESIGN AM BEISPIEL DES TELEFÓNICA DASHBOARDS
  30. 30. SINNERSCHRADER TECHNIK OFFSITE | 01.10.2015 31 ATOMIC DESIGN AM BEISPIEL DES TELEFÓNICA DASHBOARDS
  31. 31. STYLEGUIDES
  32. 32. SINNERSCHRADER TECHNIK OFFSITE | 01.10.2015 33 ATOMIC DESIGN IN DER ANWENDUNG / Dokumentation: Wie werden Design-Komponenten isoliert dokumentiert? / Implementierung: Wie wird Code Duplication und Bleeding zwischen den Komponenten verhindert? / Integration: Wie werden die erstellten Komponenten im Zielprojekt integriert?
  33. 33. SINNERSCHRADER TECHNIK OFFSITE | 01.10.2015 34 STYLEGUIDE BISHER / Wird in der Design-Phase erstellt / Oft als vermaßtes PDF ausgespielt / Spiegelt den Soll-Zustand wider / Veraltet schnell / Kann keine Interaktion abbilden / Kann kein Responsive-Verhalten darstellen / Graceful Degradation/Progressive Enhancement wird nicht veranschaulicht
  34. 34. WORUM GEHT’S? / ATOMIC DESIGN / PATTERNPLATE / CSS-MODULES
  35. 35. SINNERSCHRADER S2 | ATOMIC DESIGN & PATTERNPLATE | 01.10.2015 36 LIVING STYLEGUIDE PATTERNPLATE BY SINNERSCHRADER
  36. 36. PATTERN… WHAT?!
  37. 37. LIVING STYLEGUIDE
  38. 38. SINNERSCHRADER S2 | ATOMIC DESIGN & PATTERNPLATE | 01.10.2015 39 LIVING STYLEGUIDE Der Living Styleguide ist ein zentrales Repository, welches automatisch den letzten Stand aller auf der Website verwendeten Elemente anzeigt.
 / Während der (laufenden) Entwicklung, wird der Styleguide automatisch aktuell gehalten / Bestehende Elemente sind für jeden dokumentiert (Kunde, Designer, Entwickler, …) / Interaktionen, Animationen, responsives Verhalten werden in ihrer tatsächlichen Form gezeigt / Effektive und teamübergreifende Entwicklung durch Code-Dokumentation / Neue Features können einfach implementiert werden
  39. 39. SINNERSCHRADER S2 | ATOMIC DESIGN & PATTERNPLATE | 01.10.2015 40 VORTEILE EINES ZENTRALEN REPOSITORY LIVING STYLEGUIDE LIVING STYLEGUIDEAUTOMATISIERTER
 BUILD PROCESSES TRANSPARENZ FÜR ALLE PROJEKTMITGLIEDER LIVE PREVIEW FÜR INTERAKTIONS- PATTERNS UND ELEMENTE SCHNELLE UND EINFACHE ENTWICKLUNG 
 SOWIE CMS INTEGRATION
  40. 40. SINNERSCHRADER S2 | ATOMIC DESIGN & PATTERNPLATE | 01.10.2015 41 LIVING STYLEGUIDE PATTERNPLATE BY SINNERSCHRADER
  41. 41. SINNERSCHRADER S2 | ATOMIC DESIGN & PATTERNPLATE | 01.10.2015 42 PATTERNPLATE ENTHÄLT… / … eine Entwicklungsumgebung zur Erstellung von Atomic Designs / … eine Webanwendung zur Präsentation und Dokumentation von Atomic Designs / … ein Build-Tool zur variablen Erzeugung von optimiertem und integrierbarem Code
  42. 42. SINNERSCHRADER S2 | ATOMIC DESIGN & PATTERNPLATE | 01.10.2015 43 PATTERNPLATE / Ein Ordner pro Pattern / JavaScript, CSS, Markup und Dokumentation in jedem Pattern / ReactJS als Templating-Engine und JSX als Template-Sprache / Unterscheidung zwischen Library- und Demo-Code / Dependencies zwischen Patterns sind möglich und transparent STRUKTUR & FEATURES
  43. 43. SINNERSCHRADER S2 | ATOMIC DESIGN & PATTERNPLATE | 01.10.2015 44 DEMO
  44. 44. SINNERSCHRADER S2 | ATOMIC DESIGN & PATTERNPLATE | 01.10.2015 45 LIVING STYLEGUIDE PATTERNPLATE GUESS WHAT?
  45. 45. SINNERSCHRADER S2 | ATOMIC DESIGN & PATTERNPLATE | 01.10.2015 github.com/sinnerschrader/patternplate 46 LIVING STYLEGUIDE PATTERNPLATE OPEN SOURCE!
  46. 46. START YOUR ENGINES!
  47. 47. WORUM GEHT’S? / ATOMIC DESIGN / PATTERNPLATE / CSS-MODULES
  48. 48. SAVE CSS
  49. 49. SINNERSCHRADER SINNERSCHRADER | MASTER | 08.04.2015 50 CSS styling findet aktuell immer im globalen Namespace statt.
  50. 50. SINNERSCHRADER | MASTER | 08.04.2015SINNERSCHRADER 51 / Inline Styling / Naming Conventions / CSS in JS / Scoped CSS BISHERIGE LÖSUNGSANSÄTZE
  51. 51. SINNERSCHRADER | MASTER | 08.04.2015SINNERSCHRADER 52 ✓ Eindeutiges Scoping
 ✖ Kein caching ✖ Schwer zu pflegen ✖ Keine Pseudoselektoren ✖ … INLINE STYLING <section style="color: tomato; font-size: 13px;”> … </section>
  52. 52. SINNERSCHRADER | MASTER | 08.04.2015SINNERSCHRADER 54 / Eindeutige Namen
 .my-totally-super-duper-unique-selector-yeah {…}
 / Eindeutige Ketten
 html body .content .inner .inner-content .select .yeah {…}
 / BEM, OOCSS, …
 .arm__hand—left {…} NAMING CONVENTIONS
  53. 53. SINNERSCHRADER | MASTER | 08.04.2015SINNERSCHRADER 55 ✓ Naming Conventions sind die aktuell geläufige Methode um CSS zu “scopen”
 ✖ können kein hundertprozentiges Scoping garantieren ✖ zu hohe Specificity ✖ erzeugen unschöne Selektorketten und unleserlichen Code ✖ hohe kognitive Belastung ✖ schwerer Einstieg für hinzukommende Entwickler
 
 Fazit:
 Naming Conventions können nahezu eindeutige Selektoren erzeugen,
 sind für Entwickler aber schwer zu maintainen. NAMING CONVENTIONS
  54. 54. SINNERSCHRADER | MASTER | 08.04.2015SINNERSCHRADER 56 .site-search__input-field——active UND…
  55. 55. SINNERSCHRADER | MASTER | 08.04.2015SINNERSCHRADER 57 ✓ Geläufig in der React Community ✓ Verschiedene Libraries (React Style, jsxstyle, Radium) ✓ Klares Scoping ✓ Menschen lesbare Namen CSS IN JS <div style={{ display: 'flex', marginLeft: 'auto', marginRight: Theme.GRID_UNIT * 10, alignItems: 'center' }}>
  56. 56. SINNERSCHRADER | MASTER | 08.04.2015SINNERSCHRADER 58 ✖ keine Pseudoselektoren (:hover, :active, :checked, ::before, etc.) ✖ keine CSS Animations ✖ Dopplung im Code CSS IN JS
  57. 57. SINNERSCHRADER | MASTER | 08.04.2015SINNERSCHRADER 59 <section> <style scoped> :scope { background: #bada55; } p { background: tomato; } </style> <p>Much scoped!</p> </section> SCOPED CSS
  58. 58. SINNERSCHRADER | MASTER | 08.04.2015SINNERSCHRADER 60 ✓ Teil des HTML-Spec ✓ Reines, natives Scoping
 ✖ Inline Style-Blöcke SCOPED CSS
  59. 59. SINNERSCHRADER SINNERSCHRADER | MASTER | 08.04.2015 61 BROWSERSUPPORT Entfernt in Chrome 43 YAY! scoped styling im shadow dom Nicht geplant
  60. 60. SINNERSCHRADER | MASTER | 08.04.2015SINNERSCHRADER 62 THE NEW KID ON THE BLOCK CSS MODULES
  61. 61. SINNERSCHRADER | MASTER | 08.04.2015SINNERSCHRADER 63 / CSS Scoping Library / Erzeugt gehashte Klassennamen / Basierend auf den Entwicklungen der CSS in JS Welt / Nutzt ICSS “Standard” / Aktuell verfügbar für Browserify, Webpack, JSPM / NodeJS & Ruby in Arbeit CSS MODULES
  62. 62. SINNERSCHRADER | MASTER | 08.04.2015SINNERSCHRADER 64 /* components/submit-button.css */ .normal { … } .disabled { … } .error { … } CSS MODULES /* components/submit-button.jsx */ import styles from './submit-button.css'; <Button className={styles.normal} text=“Submit” /> GENERELL
  63. 63. SINNERSCHRADER | MASTER | 08.04.2015SINNERSCHRADER 65 /* dist/index.html */ <button class="components_submit_button__normal__abc5436"> Processing... </button> CSS MODULES GENERELL
  64. 64. SINNERSCHRADER | MASTER | 08.04.2015SINNERSCHRADER 66 /* components/GlobalSelectors.css */ :global .text { color: #bada55; font-size: 24px; } CSS MODULES /* components/global.jsx */ import styles from './GlobalSelectors.css'; <p className="text">Global Selectors</p> GLOBALES STYLING
  65. 65. SINNERSCHRADER | MASTER | 08.04.2015SINNERSCHRADER 67 /* components/Compose.css */ .common { /* all the common styles you want */ } .normal { composes: common; /* anything that only applies to Normal */ } CSS MODULES COMPOSES
  66. 66. SINNERSCHRADER | MASTER | 08.04.2015SINNERSCHRADER 68 /* colors.css */ .primary { color: #720; } .secondary { … } CSS MODULES COMPOSES /* submit-button.css */ .common { /* font-sizes, padding, border-radius */ } .normal { composes: common; composes: primary from "../shared/colors.css"; }
  67. 67. SINNERSCHRADER | MASTER | 08.04.2015SINNERSCHRADER 69 /* dist/index.html*/ <button class="shared_colors__primary__fca929 components_submit_button__common__abc5436 components_submit_button__normal__def6547"> Submit </button> CSS MODULES COMPOSES
  68. 68. SINNERSCHRADER | MASTER | 08.04.2015SINNERSCHRADER 70 ✓ Klares Scoping durch gehashte Klassen ✓ Menschenlesbare Klassen im Source Code (nicht im Kompilat) ✓ Styling und Markup getrennt ✓ Pseudoklassen, Animationen etc.
 ✖ 3rd Party Library SCOPED CSS
  69. 69. SINNERSCHRADER | MASTER | 08.04.2015SINNERSCHRADER 71 YAY!
  70. 70. VIELEN DANK FÜR EURE AUFMERKSAMKEIT!

×