Slide 1
Slide 1 text
Evaluating your stylesheets
Koji Ishimoto @Shinjuku I-Land Tower
© 2015 Kaizen Platform, Inc.
Slide 2
Slide 2 text
Koji Ishimoto
@t32k
Front-end Engineer
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
Are you checking your stylesheets?
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
StyleStats
An evaluating tool for writing better CSS.
Slide 8
Slide 8 text
Demo
Slide 9
Slide 9 text
www.stylestats.org
Slide 10
Slide 10 text
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
Slide 11
Slide 11 text
Who is using StyleStats?
Slide 12
Slide 12 text
StyleStats in Kaizen Platform
Slide 13
Slide 13 text
Kaizen Platform Styleguide
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
We can find some bugs immediately
in our CSS using StyleStats.
๑•̀䝱•́
و✧
Slide 16
Slide 16 text
We are hiring around the world!
Slide 17
Slide 17 text
Thanks!