Evaluating CSS

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

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!?
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
38. CSS Dig(Chrome Extension)
39. CSS Stats(Web)
40. StyleStats(Web)
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
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