$30 off During Our Annual Pro Sale. View Details »

BrazilJS 2014 Talk

BrazilJS 2014 Talk

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

Mauricio Wolff

August 22, 2014
Tweet

More Decks by Mauricio Wolff

Other Decks in Programming

Transcript

  1. COMO LIMPAR CSS
    GIGANTES
    COM JS

    View Slide

  2. @bitbonsai

    View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. html
    css
    img
    img
    request start first paint load complete

    View Slide

  7. 4095

    View Slide

  8. 4095

    View Slide

  9. automate all

    the things

    View Slide

  10. uncss

    View Slide

  11. View Slide

  12. View Slide

  13. + Se

    View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. cssi:
    CSS Selector Scene Investigation

    View Slide

  18. View Slide

  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"
    }

    View Slide

  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);

    View Slide

  21. cssi
    --css [file | dir | url]
    --repo /local/repo
    —-reverse
    --exclude
    --tpl
    —-debug
    --out

    View Slide

  22. View Slide

  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)

    View Slide

  24. cssi --css [file] --repo [repo]
    #bookwrapper .bootstrapped-input:hover
    !
    .wl-dropdown-toggle:not(:first-child)

    View Slide

  25. cssi --css [file] --repo [repo]
    Executing git-grep on [repo] for each
    selector
    !
    NOT FOUND: [class] .uc-notification-promo
    !
    3

    View Slide

  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

    View Slide

  27. cssi --reverse
    --reverse option detected, will be passed
    to git-log
    !
    First
    8b547f5
    signin prompt, WL-186 SR filters -
    Wolff

    View Slide

  28. cssi --debug

    View Slide

  29. cssi --exclude

    View Slide

  30. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  34. View Slide

  35. View Slide

  36. conclusões

    View Slide

  37. View Slide

  38. sshot report
    automação++--

    node++

    git help log++

    View Slide

  39. blame

    View Slide

  40. View Slide

  41. github.com/bitbonsai/cssi

    View Slide

  42. View Slide

  43. npmjs.org/package/cssi

    View Slide

  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
    ?

    View Slide