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

Evaluating your stylesheets

Evaluating your stylesheets

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

4cf842e43a782a585d8707f2ba7f9a5c?s=128

Koji Ishimoto

August 01, 2015
Tweet

Transcript

  1. Evaluating your stylesheets Koji Ishimoto @Shinjuku I-Land Tower © 2015

    Kaizen Platform, Inc.
  2. Koji Ishimoto @t32k Front-end Engineer

  3. None
  4. Are you checking your stylesheets?

  5. None
  6. None
  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

  14. None
  15. We can find some bugs immediately in our CSS using

    StyleStats.  ๑•̀䝱•́ و✧
  16. We are hiring around the world!

  17. Thanks!