Refactoring CSS
Refactoring CSS
Yuya Saito at REMIXING
Slide 2
Slide 2 text
ιʔείʔυཧղ͘͢͠
ͳΒͳ͚ΕͳΒͳ͍ɻ
Slide 3
Slide 3 text
selector {
property: value;
}
Slide 4
Slide 4 text
CSS is Simple
Slide 5
Slide 5 text
But CSS is
Programming Language!
Slide 6
Slide 6 text
“The skills required to
write good CSS code are
by and large the same
skills required to write
good code in general.”
— Lea Verou
Slide 7
Slide 7 text
ϏδϡΞϧɾϓϨθϯςʔγϣϯ
ϨΠΞτ
ΠϯλϥΫγϣϯ+Ξχϝʔγϣϯ
Slide 8
Slide 8 text
ׂ͕ଟ্͍ʹɺڧ͍ґଘΛ࣋ͪɺ
ݴޠͱܾͯͯ͠͠ڧྗͩͱݴ͍͕͍ͨɻ
Slide 9
Slide 9 text
$44Ͱ༏ΕͨίʔυΛॻ͘͜ͱ
͍͜͠ͱɻ
Slide 10
Slide 10 text
ϢʔβମݧΛ্ͤ͞ΔͨΊʹ
࠷༏Εͨํ๏
Slide 11
Slide 11 text
Iteration
Slide 12
Slide 12 text
ϦϑΝΫλϦϯάɺ
ͦͷ༏ΕͨCSSΛॻͨ͘Ίʹ
ඞཁෆՄܽͳϫʔΫϑϩʔɻ
Slide 13
Slide 13 text
Foundation
Approach
Agenda
جૅ
ఏҊ
Slide 14
Slide 14 text
Foundation
Foundation
جૅ
Slide 15
Slide 15 text
What is “Good” CSS?
Slide 16
Slide 16 text
Refactoring (noun): a change made to the internal
structure of software to make it easier to
understand and cheaper to modify without
changing its observable behaviour.
Slide 17
Slide 17 text
Predictable (༧ଌ͍͢͠)
Reusable (࠶ར༻͍͢͠)
Maintainable (อक͍͢͠)
Scalable (֦ு͍͢͠)
The Goals of
Good CSS Architecture
by Philip Walton
Slide 18
Slide 18 text
ͭͷੑ࣭Λ$44Ͱຬͨ͢͜ͱ
ඇৗʹ͍͜͠ͱɻ
Slide 19
Slide 19 text
A Brief History of
CSS Architecture
Slide 20
Slide 20 text
slideshare.net/hiloki/modern-cssarchitectureqcon
Slide 21
Slide 21 text
OOCSS
by Nicole Sullivan
Object Oriented CSS
Slide 22
Slide 22 text
github.com/stubbornella/oocss/wiki
Slide 23
Slide 23 text
SMACSS
by Jonathan Snook
Scalable and Modular
Architecture for CSS
Slide 24
Slide 24 text
smacss.com
Slide 25
Slide 25 text
BEM
by Yandex
Block, Element, Modifier
Slide 26
Slide 26 text
bem.info
Slide 27
Slide 27 text
42
No Silver Bullet
Again
Slide 28
Slide 28 text
ͦΕͧΕͷํ๏ʹ
͋ΔҰ؏ͨ͠ڞ௨߲͕ଘࡏ͢Δɻ
Slide 29
Slide 29 text
ύλʔϯΛͲͷΑ͏ʹ
ൃݟ͠ɺ࣮͠ɺ໋໊͢Δͷ͔ɻ
Slide 30
Slide 30 text
Approach
Approach
ఏҊ
Slide 31
Slide 31 text
Just an Example
Slide 32
Slide 32 text
Bret Victor
The Future of Programming
@DBX Conference 2013
Slide 33
Slide 33 text
“The most dangerous thought you can have as
a creative person is to think you know what
you're doing.”
Slide 34
Slide 34 text
“Learn tools, and use tools,
but don't accept tools.
Always distrust them; always be alert for
alternative ways of thinking. ”
— Bret Victor
Slide 35
Slide 35 text
Style Guide / Pattern Library
Slide 36
Slide 36 text
github.com/styleguide/css
Slide 37
Slide 37 text
ݸʑͷUIύλʔϯϨΠΞτΛ
ࣗಈతʹ1ϖʔδʹू͢Δπʔϧɻ
Slide 38
Slide 38 text
Comment
Slide 39
Slide 39 text
warpspire.com/kss/
Slide 40
Slide 40 text
jacobrask.github.io/styledocco
Slide 41
Slide 41 text
trulia.github.io/hologram
Slide 42
Slide 42 text
Snippets
Slide 43
Slide 43 text
github.com/adactio/Pattern-Primer
Slide 44
Slide 44 text
pea.rs
Slide 45
Slide 45 text
A Lots More...
Slide 46
Slide 46 text
Document First
Slide 47
Slide 47 text
“ࣗͷ͍ͨॴɺͦ͜Λग़ͯߦ͘ͱ͖ɺ
དྷͨ࣌ΑΓ͖Ε͍ʹ͠ͳ͚ΕͳΒͳ͍ɻ”
— The Boy Scout Rule