BrazilJS 2014 Talk

BrazilJS 2014 Talk

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

1d5d4c232779777398e3b56773d71121?s=128

Mauricio Wolff

August 22, 2014
Tweet

Transcript

  1. COMO LIMPAR CSS GIGANTES COM JS

  2. @bitbonsai

  3. None
  4. None
  5. None
  6. html css img img request start first paint load complete

  7. 4095

  8. 4095

  9. automate all the things

  10. uncss

  11. None
  12. None
  13. + Se

  14. None
  15. None
  16. None
  17. cssi: CSS Selector Scene Investigation

  18. None
  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
  22. None
  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

  30. None
  31. cssi main.css (266Kb, 2852 sel)

  32. cssi css/ (366Kb, 4305 sel)

  33. cssi http://… (139Kb, 253 sel)

  34. None
  35. None
  36. conclusões

  37. None
  38. sshot report automação++-- node++ git help log++

  39. blame

  40. None
  41. github.com/bitbonsai/cssi

  42. None
  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 ?