Evaluating CSS

http://frontrend.github.io/conference/

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