Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
CSS Modules: Who, what, where, when and why? @chrisui
Slide 2
Slide 2 text
Chris Pearce Front-end Engineer at Lystable @chrisui
Slide 3
Slide 3 text
Who is behind CSS Modules?
Slide 4
Slide 4 text
Glen Maddern @geelen Mark Dalgleish @markdalgleish Tobias Koppers @sokra
Slide 5
Slide 5 text
What is CSS Modules?
Slide 6
Slide 6 text
Locally scoped CSS ● Selectors scoped to file ● Only accessible by direct reference
Slide 7
Slide 7 text
GLOBAL! What do we do now?
Slide 8
Slide 8 text
What do we really we do now?
Slide 9
Slide 9 text
What would CSS Modules do?
Slide 10
Slide 10 text
styles-a.css styles-b.css
Slide 11
Slide 11 text
How do we consume styles from CSS Modules?
Slide 12
Slide 12 text
CSS Modules fundamentally changes the way we think about and write our styles
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
Where should I use CSS Modules?
Slide 16
Slide 16 text
Component driven applications Especially when: Many components? Many developers?
Slide 17
Slide 17 text
When can I use CSS Modules?
Slide 18
Slide 18 text
Anytime! ● Will require special loading ● Can live happily alongside existing global CSS ● Better templating support soon
Slide 19
Slide 19 text
Why should I use CSS Modules?
Slide 20
Slide 20 text
‘The Three Code-Ilities’
Slide 21
Slide 21 text
Maintainability Strong component encapsulation means it is easy to locate where to make changes and doesn’t require external contextual thought.
Slide 22
Slide 22 text
Scalability Encapsulated component and style architecture means infinite developers can work on infinite components atomically.
Slide 23
Slide 23 text
Stability Pure styles makes testing easy and breaking things difficult.
Slide 24
Slide 24 text
Bonus: How do I stay DRY?
Slide 25
Slide 25 text
Composition in CSS Modules
Slide 26
Slide 26 text
Component Composition
Slide 27
Slide 27 text
In summary CSS Modules has provided us greater sanity when writing styles at Lystable
Slide 28
Slide 28 text
That’s all! @chrisui