Pro Yearly is on sale from $80 to $50! »

Evaluating CSS

4cf842e43a782a585d8707f2ba7f9a5c?s=47 Koji Ishimoto
February 22, 2015

Evaluating CSS

4cf842e43a782a585d8707f2ba7f9a5c?s=128

Koji Ishimoto

February 22, 2015
Tweet

Transcript

  1. t32k.me Evaluating CSS Koji Ishimoto, Web Developer @Frontrend Final Conference

    on February 21, 2015
  2. • Why CSS is so difficult? • Evaluate your CSS

    • Conclusion Agenda
  3. Hi, I’m t32k! • Web Developer • Unemployment
 in Manila


    in Vancouver
  4. Why CSS is so difficult?

  5. Reading is dreaming with opening your eyes.

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

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

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

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

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

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

  12. Super Easy!

  13. Super Difficult!?

  14. None
  15. None
  16. None
  17. CSS Increase

  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
  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
  20. ʊਓਓਓਓਓਓਓਓʊ ʼɹ Sweet Deathɹʻ ʉY^Y^Y^Y^Y^Y^Yʉ

  21. Critical Rendering Path

  22. Up to your Design

  23. Web Design Layers Contents Presentation Behavior

  24. Visual Design Web Design Layers Contents Presentation Behavior

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

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

    UX
  27. Component Guide

  28. CSS Engineer!?

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

    Wikipedia
  30. • Requirements, Design • Construction • Testing, Debugging • Deployment,

    Maintenance Software Development Process
  31. Evaluate your CSS

  32. StyleStats A npm package to collect CSS statistics.

  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
  34. $%npm%install%stylestats%<g

  35. $%stylestats%<<help% !!Usage:!stylestats![options]!<file!...>! %%Options:% %%%%<h,%<<help%%%%%%%%%%%%%output%usage%information% %%%%<V,%<<version%%%%%%%%%%output%the%version%number% %%%%<c,%<<config%[path]%%%%set%configurations% %%%%<f,%<<format%[format]%%set%the%output%format%<json|html|md|csv>% %%%%<t,%<<template%[path]%%set%the%template%path%for%output%formant% %%%%<s,%<<specs%[path]%%%%%run%test%with%your%test%specs%file% %%%%<n,%<<number%%%%%%%%%%%show%only%numeral%metrics%

    %%%%<m,%<<mobile%%%%%%%%%%%set%the%mobile%user%agent
  36. Vision is the art of seeing what is invisible. Jonathan

    Swift, Essayist, Poet
  37. None
  38. CSS Dig(Chrome Extension)

  39. CSS Stats(Web)

  40. StyleStats(Web)

  41. None
  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
  43. Use StyleStats from… CLI Grunt Gulp GUI(Web)

  44. Slack Integration

  45. Who use it?

  46. Engineering Tools

  47. Continuous Integration

  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
  49. Continuous Integration Test Build Monitor Deploy

  50. Monitor

  51. Plot with Jenkins

  52. Plot with Jenkins

  53. kaelig/moniteur

  54. Plot with moniteur

  55. {% %%"userSpecifiedSelectors":%% %“^\\.component\\<[a<z0<9A<Z]+”,% } User Specified Selectors config.json EX.% .component<fooBarBaz%{}%

    .component<foo1234%{}% …
  56. The number of components

  57. Test

  58. CSS Lint

  59. Disallow IDs in selectors

  60. {% %%"defaults":%{% %%%%"operation":%"<",% %%},% %%"results":%{% %%%%"size":%20000,% %%%%"idSelectors":%{% %%%%%%"min":%2,% %%%%%%"max":%8% %%%%}%

    %}% }% Test specs file specs.json
  61. $%stylestats%path/to/app.css%<s%specs.json

  62. Test on Travis

  63. None
  64. Conclusion

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

    Share your CSS! Conclusion
  66. Evaluate your CSS Evaluate yourself!

  67. Thanks! t32k @t32k koji.ishimoto