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 Slide

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

    View Slide

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

    in Manila

    in Vancouver

    View Slide

  4. Why CSS is so difficult?

    View Slide

  5. Reading is dreaming with
    opening your eyes.

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  12. Super Easy!

    View Slide

  13. Super Difficult!?

    View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. CSS Increase

    View Slide

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

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

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

    View Slide

  21. Critical Rendering Path

    View Slide

  22. Up to your Design

    View Slide

  23. Web Design Layers
    Contents
    Presentation
    Behavior

    View Slide

  24. Visual Design
    Web Design Layers
    Contents
    Presentation
    Behavior

    View Slide

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

    View Slide

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

    View Slide

  27. Component Guide

    View Slide

  28. CSS Engineer!?

    View Slide

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

    View Slide

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

    View Slide

  31. Evaluate your CSS

    View Slide

  32. StyleStats A npm package to collect CSS statistics.

    View Slide

  33. • 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 Slide

  34. $%npm%install%stylestats%

    View Slide

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

    View Slide

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

    View Slide

  37. View Slide

  38. CSS Dig(Chrome Extension)

    View Slide

  39. CSS Stats(Web)

    View Slide

  40. StyleStats(Web)

    View Slide

  41. View Slide

  42. $%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 Slide

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

    View Slide

  44. Slack Integration

    View Slide

  45. Who use it?

    View Slide

  46. Engineering Tools

    View Slide

  47. Continuous Integration

    View Slide

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

  49. Continuous Integration
    Test
    Build
    Monitor Deploy

    View Slide

  50. Monitor

    View Slide

  51. Plot with Jenkins

    View Slide

  52. Plot with Jenkins

    View Slide

  53. kaelig/moniteur

    View Slide

  54. Plot with moniteur

    View Slide

  55. {%
    %%"userSpecifiedSelectors":%%
    %“^\\.component\\}
    User Specified Selectors
    config.json
    EX.%
    .component.component…

    View Slide

  56. The number of components

    View Slide

  57. Test

    View Slide

  58. CSS Lint

    View Slide

  59. Disallow IDs in selectors

    View Slide

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

    View Slide

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

    View Slide

  62. Test on Travis

    View Slide

  63. View Slide

  64. Conclusion

    View Slide

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

    View Slide

  66. Evaluate your CSS
    Evaluate yourself!

    View Slide

  67. Thanks!
    t32k
    @t32k
    koji.ishimoto

    View Slide