Slide 1
Slide 1 text
Think local and compose!
26 july 2016
@milanofrontend
Slide 2
Slide 2 text
JS Frontend Developer at LinkMe Srl
Twitter: @_denb
In love with React and Javascript in general.
I’m a 7-month-old dad
Daniele Bertella
Slide 3
Slide 3 text
CSS
Slide 4
Slide 4 text
React: CSS in JS by vjeux
Slide 5
Slide 5 text
OOCSS,
ACSS,
BEM,
SMACSS
Slide 6
Slide 6 text
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
CSS in JS
Slide 9
Slide 9 text
Slide 10
Slide 10 text
Slide 11
Slide 11 text
If you’re writing React, you have access to
a more powerful styling construct than
CSS class names. You have components.
Slide 12
Slide 12 text
React: CSS in JS by vjeux
Slide 13
Slide 13 text
CSS in JS
https://github.com/MicheleBertoli/css-in-js
React: CSS in JS techniques comparison
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
CSS Modules
Slide 16
Slide 16 text
Not inline styles,
just classes, CSS classes
Slide 17
Slide 17 text
.title {
font-size: 36px;
}
Slide 18
Slide 18 text
No more
Global Scope
Slide 19
Slide 19 text
Titolo
Slide 20
Slide 20 text
No more
Overqualified
Selectors
Slide 21
Slide 21 text
.home h1.big {
font-size: 36px;
}
Slide 22
Slide 22 text
Refactoring
made it easy
Slide 23
Slide 23 text
Titolo
Slide 24
Slide 24 text
How does it
work?
Slide 25
Slide 25 text
Composes
Slide 26
Slide 26 text
.title { font-size: 14px }
.h1 {
composes: title;
composes: bold from ‘./base.
css’;
}
Slide 27
Slide 27 text
Titolo
Slide 28
Slide 28 text
:global
Slide 29
Slide 29 text
:global .title {
font-size: 14px
}
Slide 30
Slide 30 text
Titolo
Slide 31
Slide 31 text
@value
Slide 32
Slide 32 text
@value primary-color: #b04208
.title {
color: primary-color;
}
Slide 33
Slide 33 text
@value primary-color from
'css/base.css';
.title {
color: primary-color;
}
Slide 34
Slide 34 text
Atomic
CSS Modules
Slide 35
Slide 35 text
.image {
composes: left p2 mr1 border
from 'basscss/css/basscss.css';
}
Slide 36
Slide 36 text
Slide 37
Slide 37 text
Atomic CSS Modules
https://medium.com/yplan-eng/atomic-css-modules-cb44d5993b27
Slide 38
Slide 38 text
Are CSS Modules right
for my (next) project?
Slide 39
Slide 39 text
Maybe
Slide 40
Slide 40 text
Happy with
BEM?
Slide 41
Slide 41 text
NO
Slide 42
Slide 42 text
Component
architecture?
Slide 43
Slide 43 text
YES
Slide 44
Slide 44 text
QUESTIONS?
Slide 45
Slide 45 text
Thanks
@_denb