Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
KonMariCSS
Vince
November 26, 2017
Programming
0
46
KonMariCSS
How to Tidy Your Space and Change Your Life
Vince
November 26, 2017
Tweet
Share
More Decks by Vince
See All by Vince
snailbites
1
230
Other Decks in Programming
See All in Programming
azdaroth
0
180
line_developers_tw
0
560
hr01
0
1.6k
akkeylab
0
370
muttsu_623
0
550
yaamaa
0
450
shigeruoda
0
490
fkubota
1
400
standfm
1
280
hanakla
2
3.1k
s_uryu
0
230
bkuhlmann
4
620
Featured
See All Featured
kastner
54
1.9k
smashingmag
229
18k
trallard
13
650
frogandcode
127
20k
keavy
106
14k
hannesfritz
27
930
62gerente
587
200k
danielanewman
1
480
lynnandtonic
272
16k
keithpitt
401
20k
jnunemaker
PRO
40
4.6k
jasonvnalue
82
8.1k
Transcript
KonMari CSS How to Tidy Your Space and Change Your
Life*
Vincent Nalupta Senior Software Engineer @snailbites
HUNGRY + ANGRY = HANGRY
First, some context...
None
None
None
None
¯\_(ツ)_/¯
The KonMari Cleaning Method
KonMari CSS How to Tidy Your Space and Change Your
Life*
ANALYZE PLAN REFACTOR OPTIMIZE
ANALYZE PLAN REFACTOR OPTIMIZE
“Place every piece of clothing in the house on the
floor.”
File size Selector count Maintainability Load times
cssstats.com
None
360 KB (76KB minified gzipped)
"Before you start, visualize the destination"
ANALYZE PLAN REFACTOR OPTIMIZE
Identify your goals
1 month 3 months 1 year
What problems are you trying to solve?
Settle on a naming convention
.parent <section class=”parent”> </section> -child <div class=”parent-child”> </div> -gchild <p
class=”parent-child-gchild”> ... </p>
.box--delivery .box--pickup
None
UI Testing
https://github.com/webdriverio/webdrivercss
"The moment you start, you reset your life."
ANALYZE PLAN REFACTOR OPTIMIZE
Refactor a single file “Code as Craft”
None
None
Break
File size Selector count Maintainability Load times
ANALYZE PLAN REFACTOR OPTIMIZE
Style guide driven development
None
Demo
None
Find the outliers
http://bit.ly/2evMYuw
End Game
None
Build some bridges!
None
@snailbites http://snailbites.com/blog/
(504) 229-6828 #KonMariCSS