Stylestats for popular Front-End Frameworks
Checkout stylestats here: https://github.com/t32k/stylestats
The Simplicity is measured as Rules divided by Selectors. Higher number means more simple.
The Lowest Cohesion metric is the count of the declarations of the most declared selector.
The Lowest Cohesion Selector is the selector with most declarations.
The Properties Count is ranking of declared properties. Default option is display the top 10.
stylestats bootstrap.min.css
┌──────────────────────────┬───────────────────────┐
│ Size │ 97.6KB │
├──────────────────────────┼───────────────────────┤
│ Rules │ 1024 │
├──────────────────────────┼───────────────────────┤
│ Selectors │ 1763 │
├──────────────────────────┼───────────────────────┤
│ Simplicity │ 58.08% │
├──────────────────────────┼───────────────────────┤
│ Lowest Cohesion │ 18 │
├──────────────────────────┼───────────────────────┤
│ Lowest Cohesion Selector │ .dropdown-menu │
├──────────────────────────┼───────────────────────┤
│ Total Unique Font Sizes │ 21 │
├──────────────────────────┼───────────────────────┤
│ Unique Font Size │ inherit │
│ │ 0 │
│ │ 1em │
│ │ 2em │
│ │ 12px │
│ │ 13px │
│ │ 14px │
│ │ 16px │
│ │ 17.5px │
│ │ 18px │
│ │ 20px │
│ │ 21px │
│ │ 24px │
│ │ 30px │
│ │ 36px │
│ │ 62.5% │
│ │ 65% │
│ │ 75% │
│ │ 80% │
│ │ 85% │
│ │ 90% │
├──────────────────────────┼───────────────────────┤
│ Total Unique Colors │ 91 │
├──────────────────────────┼───────────────────────┤
│ Unique Color │ #000 │
│ │ #000 \9 │
│ │ #080808 │
│ │ #101010 │
│ │ #222 │
│ │ #245269 │
│ │ #262626 │
│ │ #269ABC │
│ │ #285E8E │
│ │ #2A6496 │
│ │ #2B542C │
│ │ #3071A9 │
│ │ #31708F │
│ │ #31B0D5 │
│ │ #3276B1 │
│ │ #333 │
│ │ #357EBD │
│ │ #398439 │
│ │ #39B3D7 │
│ │ #3C763D │
│ │ #428BCA │
│ │ #444 │
│ │ #449D44 │
│ │ #46B8DA │
│ │ #47A447 │
│ │ #4CAE4C │
│ │ #555 │
│ │ #5BC0DE │
│ │ #5CB85C │
│ │ #5E5E5E │
│ │ #66512C │
│ │ #66AFE9 │
│ │ #737373 │
│ │ #777 │
│ │ #843534 │
│ │ #888 │
│ │ #8A6D3B │
│ │ #999 │
│ │ #A6E1EC │
│ │ #A94442 │
│ │ #AC2925 │
│ │ #ADADAD │
│ │ #AFD9EE │
│ │ #BCE8F1 │
│ │ #C1E2B3 │
│ │ #C4E3F3 │
│ │ #C7254E │
│ │ #C9302C │
│ │ #C9E2B3 │
│ │ #CCC │
│ │ #D0E9C6 │
│ │ #D2322D │
│ │ #D43F3A │
│ │ #D58512 │
│ │ #D6E9C6 │
│ │ #D9534F │
│ │ #D9EDF7 │
│ │ #DDD │
│ │ #DFF0D8 │
│ │ #E1EDF7 │
│ │ #E4B9B9 │
│ │ #E4B9C0 │
│ │ #E5E5E5 │
│ │ #E7E7E7 │
│ │ #E8E8E8 │
│ │ #EBCCCC │
│ │ #EBCCD1 │
│ │ #EBEBEB │
│ │ #EC971F │
│ │ #ED9C28 │
│ │ #EEA236 │
│ │ #EEE │
│ │ #EEE #EEE #DDD │
│ │ #F0AD4E │
│ │ #F2DEDE │
│ │ #F5F5F5 │
│ │ #F7E1B5 │
│ │ #F7ECB5 │
│ │ #F7F7F7 │
│ │ #F8F8F8 │
│ │ #F9F2F4 │
│ │ #F9F9F9 │
│ │ #FAEBCC │
│ │ #FAF2CC │
│ │ #FCF8E3 │
│ │ #FFF │
│ │ GRAY │
│ │ INHERIT │
│ │ RGBA(0,0,0,.15) │
│ │ RGBA(0,0,0,.25) │
│ │ RGBA(0,0,0,0) │
├──────────────────────────┼───────────────────────┤
│ Id Selectors │ 0 │
├──────────────────────────┼───────────────────────┤
│ Universal Selectors │ 5 │
├──────────────────────────┼───────────────────────┤
│ Important Keywords │ 8 │
├──────────────────────────┼───────────────────────┤
│ Media Queries │ 48 │
├──────────────────────────┼───────────────────────┤
│ Properties Count │ content: 214 │
│ │ color: 159 │
│ │ background-color: 157 │
│ │ display: 71 │
│ │ padding: 67 │
│ │ border-color: 66 │
│ │ margin-left: 55 │
│ │ margin-bottom: 54 │
│ │ font-size: 53 │
│ │ border-radius: 52 │
├──────────────────────────┼───────────────────────┤
stylestats foundation..min.css
┌──────────────────────────┬───────────────────────────────────────────────────────────┐
│ Size │ 143.3KB │
├──────────────────────────┼───────────────────────────────────────────────────────────┤
│ Rules │ 774 │
├──────────────────────────┼───────────────────────────────────────────────────────────┤
│ Selectors │ 1181 │
├──────────────────────────┼───────────────────────────────────────────────────────────┤
│ Simplicity │ 65.54% │
├──────────────────────────┼───────────────────────────────────────────────────────────┤
│ Lowest Cohesion │ 28 │
├──────────────────────────┼───────────────────────────────────────────────────────────┤
│ Lowest Cohesion Selector │ .preloader │
├──────────────────────────┼───────────────────────────────────────────────────────────┤
│ Total Unique Font Sizes │ 26 │
├──────────────────────────┼───────────────────────────────────────────────────────────┤
│ Unique Font Size │ inherit │
│ │ 0.6em │
│ │ 0.625rem │
│ │ 0.6875rem │
│ │ 0.75rem │
│ │ 0.8125rem │
│ │ 0.875rem │
│ │ 0.875em │
│ │ 0.9375rem │
│ │ 1rem │
│ │ 1.0625rem │
│ │ 1.125rem │
│ │ 1.21875rem │
│ │ 1.25rem │
│ │ 1.375rem │
│ │ 1.6875rem │
│ │ 2rem │
│ │ 2.125rem │
│ │ 2.5rem │
│ │ 12px │
│ │ 16px │
│ │ 24px │
│ │ 30px │
│ │ 60% │
│ │ 90% │
│ │ 100% │
├──────────────────────────┼───────────────────────────────────────────────────────────┤
│ Total Unique Colors │ 67 │
├──────────────────────────┼───────────────────────────────────────────────────────────┤
│ Unique Color │ #007095 │
│ │ #0078A0 │
│ │ #008CBA │
│ │ #1CC7FF │
│ │ #222 │
│ │ #333 │
│ │ #333 TRANSPARENT TRANSPARENT TRANSPARENT │
│ │ #368A55 │
│ │ #3A945B │
│ │ #43AC6A │
│ │ #4D4D4D │
│ │ #4F4F4F │
│ │ #555 │
│ │ #555 #FFF │
│ │ #676767 │
│ │ #6F6F6F │
│ │ #737373 │
│ │ #74BFDD │
│ │ #777 │
│ │ #888 │
│ │ #999 │
│ │ #A0D3E8 │
│ │ #AAA │
│ │ #B3B3B3 │
│ │ #B6EDFF │
│ │ #B9B9B9 │
│ │ #BD260D │
│ │ #C7C7C7 │
│ │ #CCC │
│ │ #CCC TRANSPARENT TRANSPARENT TRANSPARENT │
│ │ #CF2A0E │
│ │ #D8D8D8 │
│ │ #DCDCDC │
│ │ #DDD │
│ │ #DE2D0F │
│ │ #DE770F │
│ │ #E7E7E7 │
│ │ #EDEDED │
│ │ #EEE │
│ │ #F04124 │
│ │ #F08A24 │
│ │ #F3F3F3 │
│ │ #F4F4F4 │
│ │ #F6F6F6 │
│ │ #FAFAFA │
│ │ #FFF │
│ │ #FFF TRANSPARENT TRANSPARENT TRANSPARENT │
│ │ #FFFFFF │
│ │ NONE │
│ │ RGBA(0,0,0,0) │
│ │ RGBA(0,0,0,0.1) │
│ │ RGBA(0,0,0,0.3) │
│ │ RGBA(0,0,0,0.75) │
│ │ RGBA(255,255,255,0.3) │
│ │ RGBA(255,255,255,0.5) │
│ │ RGBA(255,255,255,0.7) │
│ │ RGBA(51,51,51,0.8) │
│ │ TRANSPARENT #CCC TRANSPARENT TRANSPARENT │
│ │ TRANSPARENT #FFF TRANSPARENT TRANSPARENT │
│ │ TRANSPARENT TRANSPARENT #333 TRANSPARENT │
│ │ TRANSPARENT TRANSPARENT #CCC TRANSPARENT │
│ │ TRANSPARENT TRANSPARENT #FFF TRANSPARENT │
│ │ TRANSPARENT TRANSPARENT TRANSPARENT #333 │
│ │ TRANSPARENT TRANSPARENT TRANSPARENT #CCC │
│ │ TRANSPARENT TRANSPARENT TRANSPARENT #FFF │
│ │ TRANSPARENT TRANSPARENT TRANSPARENT RGBA(255,255,255,0.4) │
│ │ WHITE │
├──────────────────────────┼───────────────────────────────────────────────────────────┤
│ Id Selectors │ 3 │
├──────────────────────────┼───────────────────────────────────────────────────────────┤
│ Universal Selectors │ 79 │
├──────────────────────────┼───────────────────────────────────────────────────────────┤
│ Important Keywords │ 61 │
├──────────────────────────┼───────────────────────────────────────────────────────────┤
│ Media Queries │ 69 │
├──────────────────────────┼───────────────────────────────────────────────────────────┤
│ Properties Count │ display: 152 │
│ │ color: 112 │
│ │ width: 109 │
│ │ position: 98 │
│ │ background: 96 │
│ │ height: 90 │
│ │ font-size: 75 │
│ │ padding: 75 │
│ │ left: 64 │
│ │ border-color: 61 │
├──────────────────────────┼──────────────────────────────────────────────────────────────┤