Evaluating your stylesheets

円滑なWeb 運用のできるCSS設計＆制作を考えよう
http://yuru2.jp/2015/07/21/cafe48/

Transcript

1. Evaluating your stylesheets Koji Ishimoto @Shinjuku I-Land Tower © 2015 Kaizen Platform, Inc.
2. Koji Ishimoto @t32k Front-end Engineer
4. Are you checking your stylesheets?
7. StyleStats An evaluating tool for writing better CSS.
8. Demo
9. www.stylestats.org
10. Metrics • Style Sheets • Style Elements • Size • Gzipped Size • Data URI Size • Ratio of Data URI Size • Simplicity • Rules • Selectors • Declarations • Average of Identifier • Most Identifier • Most Identifier Selector • Average of Cohesion • 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
11. Who is using StyleStats?
12. StyleStats in Kaizen Platform
13. Kaizen Platform Styleguide
15. We can find some bugs immediately in our CSS using StyleStats.
    ๑•̀䝱•́ و✧
16. We are hiring around the world!
17. Thanks!