Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Evaluating your stylesheets

Evaluating your stylesheets

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

Koji Ishimoto

August 01, 2015
Tweet

More Decks by Koji Ishimoto

Other Decks in Programming

Transcript

  1. Evaluating your stylesheets
    Koji Ishimoto @Shinjuku I-Land Tower
    © 2015 Kaizen Platform, Inc.

    View Slide

  2. Koji Ishimoto
    @t32k
    Front-end Engineer

    View Slide

  3. View Slide

  4. Are you checking your stylesheets?

    View Slide

  5. View Slide

  6. View Slide

  7. StyleStats
    An evaluating tool for writing better CSS.

    View Slide

  8. Demo

    View Slide

  9. www.stylestats.org

    View Slide

  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

    View Slide

  11. Who is using StyleStats?

    View Slide

  12. StyleStats in Kaizen Platform

    View Slide

  13. Kaizen Platform Styleguide

    View Slide

  14. View Slide

  15. We can find some bugs immediately
    in our CSS using StyleStats.
    ๑•̀䝱•́
    و✧

    View Slide

  16. We are hiring around the world!

    View Slide

  17. Thanks!

    View Slide