Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Evaluating CSS

Koji Ishimoto
February 22, 2015

Evaluating CSS

Koji Ishimoto

February 22, 2015
Tweet

More Decks by Koji Ishimoto

Other Decks in Design

Transcript

  1. t32k.me
    Evaluating CSS
    Koji Ishimoto, Web Developer
    @Frontrend Final Conference on February 21, 2015

    View full-size slide

  2. • Why CSS is so difficult?
    • Evaluate your CSS
    • Conclusion
    Agenda

    View full-size slide

  3. Hi, I’m t32k!
    • Web Developer
    • Unemployment

    in Manila

    in Vancouver

    View full-size slide

  4. Why CSS is so difficult?

    View full-size slide

  5. Reading is dreaming with
    opening your eyes.

    View full-size slide

  6. div,%section%{%
    %%%%margin:%5px;%
    %%%%padding:%10px;%
    %%%%color:%red;%
    }

    View full-size slide

  7. div,%section%{%
    %%%%margin:%5px;%
    %%%%padding:%10px;%
    %%%%color:%red;%
    }
    Rule

    View full-size slide

  8. div,%section%{%
    %%%%margin:%5px;%
    %%%%padding:%10px;%
    %%%%color:%red;%
    }
    Rule Selector

    View full-size slide

  9. div,%section%{%
    %%%%margin:%5px;%
    %%%%padding:%10px;%
    %%%%color:%red;%
    }
    Rule Selector
    Declaration

    View full-size slide

  10. div,%section%{%
    %%%%margin:%5px;%
    %%%%padding:%10px;%
    %%%%color:%red;%
    }
    Rule Selector
    Declaration
    Property

    View full-size slide

  11. div,%section%{%
    %%%%margin:%5px;%
    %%%%padding:%10px;%
    %%%%color:%red;%
    }
    Rule Selector
    Declaration
    Property Value

    View full-size slide

  12. Super Difficult!?

    View full-size slide

  13. CSS Increase

    View full-size slide

  14. 90,000
    93,750
    97,500
    101,250
    105,000
    108,750
    112,500
    116,250
    120,000
    Byte
    app.css size per deploy
    300 0
    150 75
    225

    View full-size slide

  15. 90,000
    93,750
    97,500
    101,250
    105,000
    108,750
    112,500
    116,250
    120,000
    Byte
    app.css size per deploy
    300 0
    150 75
    225

    View full-size slide

  16. ʊਓਓਓਓਓਓਓਓʊ
    ʼɹ Sweet Deathɹʻ
    ʉY^Y^Y^Y^Y^Y^Yʉ

    View full-size slide

  17. Critical Rendering Path

    View full-size slide

  18. Up to your Design

    View full-size slide

  19. Web Design Layers
    Contents
    Presentation
    Behavior

    View full-size slide

  20. Visual Design
    Web Design Layers
    Contents
    Presentation
    Behavior

    View full-size slide

  21. Design pages
    Design systems!
    Jina Bolton, Senior Product Designer, Salesforce UX

    View full-size slide

  22. Design pages
    Design systems!
    Jina Bolton, Senior Product Designer, Salesforce UX

    View full-size slide

  23. Component Guide

    View full-size slide

  24. CSS Engineer!?

    View full-size slide

  25. An engineer is a professional practitioner
    of engineering
    Engineer - Wikipedia

    View full-size slide

  26. • Requirements, Design
    • Construction
    • Testing, Debugging
    • Deployment, Maintenance
    Software Development Process

    View full-size slide

  27. Evaluate your CSS

    View full-size slide

  28. StyleStats A npm package to collect CSS statistics.

    View full-size slide

  29. • Style Sheets
    • Style Elements
    • Size
    • Gzipped Size
    • Data URI Size
    • Ratio of Data URI Size
    • Simplicity
    • Rules
    • Selectors
    • Most Identifier
    • Most Identifier Selector
    • Lowest Cohesion
    • Lowest Cohesion
    • Selector
    • Total Unique Font Sizes
    • Unique Font Sizes
    • Total Unique Font
    Families
    • Unique Font Families
    • Total Unique Colors
    • Unique Colors
    • ID Selectors
    • Universal Selectors
    • Unqualified Attribute
    Selectors
    • JavaScript Specific
    Selectors
    • User Specified
    Selectors
    • Important Keywords
    • Float Properties
    • Media Queries
    • Properties Count
    Metrics StyleStats v5.0.0

    View full-size slide

  30. $%npm%install%stylestats%

    View full-size slide

  31. $%stylestats%<!!Usage:!stylestats![options]!!
    %%Options:%
    %%%%%%%%%%%%%%%%%
    %%%%%%%%%%%%%%%%

    View full-size slide

  32. Vision is the art of seeing what is invisible.
    Jonathan Swift, Essayist, Poet

    View full-size slide

  33. CSS Dig(Chrome Extension)

    View full-size slide

  34. CSS Stats(Web)

    View full-size slide

  35. StyleStats(Web)

    View full-size slide

  36. $%stylestats%path/to/app.css
    var%StyleStats%=%require('stylestats');%
    var%stats%=%new%StyleStats(‘path/to/app.css');%
    stats.parse(function%(error,%result)%{%
    %%console.log(JSON.stringify(result,%null,%2));%
    });
    Command Line Way
    Programmatical Way

    View full-size slide

  37. Use StyleStats from…
    CLI Grunt Gulp GUI(Web)

    View full-size slide

  38. Slack Integration

    View full-size slide

  39. Engineering Tools

    View full-size slide

  40. Continuous Integration

    View full-size slide

  41. Continuous integration (CI) is the
    practice, in software engineering, of
    merging all developer working
    copies with a shared mainline
    several times a day.
    Continuous integration - Wikipedia

    View full-size slide

  42. Continuous Integration
    Test
    Build
    Monitor Deploy

    View full-size slide

  43. Plot with Jenkins

    View full-size slide

  44. Plot with Jenkins

    View full-size slide

  45. kaelig/moniteur

    View full-size slide

  46. Plot with moniteur

    View full-size slide

  47. {%
    %%"userSpecifiedSelectors":%%
    %“^\\.component\\<[a}
    User Specified Selectors
    config.json
    EX.%
    .component.component…

    View full-size slide

  48. The number of components

    View full-size slide

  49. Disallow IDs in selectors

    View full-size slide

  50. {%
    %%"defaults":%{%
    %%%%"operation":%"<",%
    %%},%
    %%"results":%{%
    %%%%"size":%20000,%
    %%%%"idSelectors":%{%
    %%%%%%"min":%2,%
    %%%%%%"max":%8%
    %%%%}%
    %}%
    }%
    Test specs file
    specs.json

    View full-size slide

  51. $%stylestats%path/to/app.css%

    View full-size slide

  52. Test on Travis

    View full-size slide

  53. • CSS still sucks!
    • CSS engineers don’t suck!
    • Share your CSS!
    Conclusion

    View full-size slide

  54. Evaluate your CSS
    Evaluate yourself!

    View full-size slide

  55. Thanks!
    t32k
    @t32k
    koji.ishimoto

    View full-size slide