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
   

   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. View Slide

8. 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