CSS Modules: Who, what, where, when and why?!

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