BrazilJS 2014 Talk

Cleaning huge CSS with JS. A different approach to clean up massive CSS sets n complex commerce websites.

Transcript

1. COMO LIMPAR CSS GIGANTES COM JS
2. @bitbonsai
6. html css img img request start first paint load complete
9. automate all the things
10. uncss
13. + Se
17. cssi: CSS Selector Scene Investigation
19. "dependencies": { "colors": "^0.6.2", "css-parse": "^2.0.0", "event-emitter": "^0.3.1", "exec-queue": "0.0.2", "minimist": "^1.1.0" }
20. emitter.on('getCss_ok', parseCss); emitter.on('parseCss_ok', parseRules); emitter.on('parseRules_ok', testGit); emitter.on('testGit_ok', grepCss); emitter.on('grepCss_ok', gitLogAllTheThings); emitter.on('gitLogAllTheThings_ok', createReport);
21. cssi --css [file | dir | url] --repo /local/repo —-reverse --exclude --tpl —-debug --out
23. cssi --css [file] --repo [repo] Getting css: css/sampl…_profile.css… Parsing 2.25 kB of CSS... The original CSS has 21 selectors ! Getting nested, removing :pseudos and duplicates, 20 were found (1 ids 19 classes)
24. cssi --css [file] --repo [repo] #bookwrapper .bootstrapped-input:hover ! .wl-dropdown-toggle:not(:first-child)
25. cssi --css [file] --repo [repo] Executing git-grep on [repo] for each selector ! NOT FOUND: [class] .uc-notification-promo ! 3
26. cssi --css [file] --repo [repo] Now git logs will be checked against the ghosts ! This could take some time, go grab a ! Latest trace of .uc-notification-promo: 8b547f5 signin prompt, WL-186 SR filters - Wolff
27. cssi --reverse --reverse option detected, will be passed to git-log ! First 8b547f5 signin prompt, WL-186 SR filters - Wolff
28. cssi --debug
29. cssi --exclude
31. cssi main.css (266Kb, 2852 sel)
32. cssi css/ (366Kb, 4305 sel)
33. cssi http://… (139Kb, 253 sel)
36. conclusões
38. sshot report automação++-- node++ git help log++
39. blame
41. github.com/bitbonsai/cssi
43. npmjs.org/package/cssi
44. [UX HACKATHON] time - Nicolò Bertoncin people - Scott Lewis languages - Lek Potharam money - Daniele Catalanotto / ECAL scale - athanagore x git - Dmitry Baranovskiy dashboard - Björn Andersson hand - Maico Amorim ghost - nikki rodriguez steps - Jule Steffen & Matthias Schmidt cc - Five by Five All by thenounproject.com ?