StyleStats is a Node.js library to collect CSS statistics.
StyleStats works on Node.js 0.10.x
$ npm install -g stylestats
$ stylestats path/to/stylesheet.css
StyleStats!
┌─────────────────────────────────┬────────────────┐
│ Style Sheets │ 1 │
├─────────────────────────────────┼────────────────┤
│ Size │ 240B │
├─────────────────────────────────┼────────────────┤
│ Data URI Size │ 0 │
├─────────────────────────────────┼────────────────┤
│ Rules │ 7 │
├─────────────────────────────────┼────────────────┤
│ Selectors │ 12 │
├─────────────────────────────────┼────────────────┤
│ Simplicity │ 58.3% │
├─────────────────────────────────┼────────────────┤
│ Most Identifier │ 3 │
├─────────────────────────────────┼────────────────┤
│ Most Identifier Selector │ .foo .bar .baz │
├─────────────────────────────────┼────────────────┤
│ Lowest Cohesion │ 2 │
├─────────────────────────────────┼────────────────┤
│ Lowest Cohesion Selector │ .foo │
├─────────────────────────────────┼────────────────┤
│ Total Unique Font Sizes │ 2 │
├─────────────────────────────────┼────────────────┤
│ Unique Font Size │ 12px │
│ │ 16px │
├─────────────────────────────────┼────────────────┤
│ Total Unique Colors │ 3 │
├─────────────────────────────────┼────────────────┤
│ Unique Color │ #333 │
│ │ #CCC │
│ │ RED │
├─────────────────────────────────┼────────────────┤
│ ID Selectors │ 1 │
├─────────────────────────────────┼────────────────┤
│ Universal Selectors │ 1 │
├─────────────────────────────────┼────────────────┤
│ Unqualified Attribute Selectors │ 1 │
├─────────────────────────────────┼────────────────┤
│ JavaScript Specific Selectors │ 0 │
├─────────────────────────────────┼────────────────┤
│ Important Keywords │ 1 │
├─────────────────────────────────┼────────────────┤
│ Float Properties │ 1 │
├─────────────────────────────────┼────────────────┤
│ Properties Count │ color: 4 │
│ │ font-size: 3 │
│ │ margin: 2 │
│ │ float: 1 │
├─────────────────────────────────┼────────────────┤
│ Media Queries │ 0 │
└─────────────────────────────────┴────────────────┘Specified css file will be analyzed.
# Multiple input is also supported.
$ stylestats foo.css bar.css baz.cssCSS files in specified directory will be analyzed.
$ stylestats path/to/dirGlob(required quotations) input is supported.
$ stylestats 'path/**/*.css'You can specify remote CSS file.
$ stylestats http://t32k.me/static/blog/skelton.cssIf you set HTML page, StyleStats will analyze stylesheets and style elements.
$ stylestats http://t32k.me/-t option output JSON, CSV and HTML.
$ stylestats foo.css -t [json|csv|html]If you installed gist tool, you can upload StyleStats data to GitHub Gist with one-liner command.
$ stylestats http://t32k.me/ -t html > stats.md && gist stats.md
https://gist.github.com/9725673- https://github.com/tvooo/grunt-stylestats by @tvooo
- https://github.com/1000ch/gulp-stylestats by @1000ch
The Simplicity is measured as Rules divided by Selectors.
The Lowest Cohesion metrics is the number of selector declaration.
The Unqualified Attribute Selectors metrics is the number of unqualified attribute selectors.
The following patterns will be counted:
[type=text] {
color: red;
}
.selected [type=text] {
color: red;
}The following patterns are considered as okay and will not be counted:
/* unqualified attribute selector is not key */
.selected [type=text] a {
color: red;
}
See also:
The JavaScript Specific Selectors metrics is the number of JavaScript-specific selectors, such as js-*. the selectors only for JavaScript hooks, you should not to hang any presentation off them.
See also:
The Properties Count is the number of property declaration. Default option is set to display the top 10 properties.
You can configure StyleStats.
CLI:
$ stylestats -c path/to/.stylestatsrcAPI:
var StyleStats = require('stylestats');
var stats = new StyleStats('path/to/stylesheet.css', 'path/to/.stylestatsrc');Default configuration is here.
Here is an example JSON to enable display gzipped size:
{
"gzippedSize": true
}
gzippedSize attribute is false by default. Because it is pretty slow.
$ stylestats -h
Usage: stylestats [options] <file ...>
Options:
-h, --help output usage information
-V, --version output the version number
-c, --config [path] Path and name of the incoming JSON file.
-t, --type [format] Specify the output format. <json|html|csv>
-s, --simple Show compact style's log.
-g, --gzip Show gzipped file size.
-n, --number Show only numeral metrics.
-u, --ua [OS] Specify the user agent. <ios|android>$ stylestats path/to/stylesheet.css -s -c path/to/.stylestatsrc
StyleStats!
┌───────────────────────────┬───────────────┐
│ Rules │ 7 │
│ Selectors │ 11 │
│ Lowest Cohesion │ 6 │
│ Total Unique Font Sizes │ 5 │
│ Total Unique Colors │ 2 │
│ ID Selectors │ 1 │
│ Important Keywords │ 1 │
│ Media Queries │ 1 │
└───────────────────────────┴───────────────┘stylesheetRequiredString|ArrayStylesheet file path or its array.configOptionalString|ObjectConfiguration JSON file path or object.
var StyleStats = require('stylestats');
var stats = new StyleStats('path/to/stylesheet.css');
stats.parse(function (error, result) {
console.log(JSON.stringify(result, null, 2));
});CSS example:
* { float: left; }
body { color: #333; }
h1, h2, h3, h4, h5, h6 { margin: 0; }
a[src] { color: red !important; }
.foo { color: #ccc; font-size: 12px; }
.foo .bar .baz { color: #ccc; font-size: 12px; }
#bar { margin: 10px; font-size: 16px; }Statistics tree of above css:
{
"published": "2014-03-23T15:54:39.825Z",
"paths": [ "test/fixture/example.css" ],
"stylesheets": 1,
"size": 240,
"dataUriSize": 0,
"rules": 7,
"selectors": 12,
"simplicity": 0.5833333333333334,
"mostIdentifers": 3,
"mostIdentifersSelector": ".foo .bar .baz",
"lowestCohesion": 2,
"lowestCohesionSelector": [ ".foo" ],
"totalUniqueFontSizes": 2,
"uniqueFontSize": [ "12px", "16px" ],
"totalUniqueColors": 3,
"uniqueColor": [ "#333", "#CCC", "RED" ],
"idSelectors": 1,
"universalSelectors": 1,
"unqualifiedAttributeSelectors": 1,
"javascriptSpecificSelectors": 0,
"importantKeywords": 1,
"floatProperties": 1,
"mediaQueries": 0,
"propertiesCount": [
{ "property": "color", "count": 4 },
{ "property": "font-size", "count": 3 },
{ "property": "margin", "count": 2 },
{ "property": "float", "count": 1 }
]
}We launched online tool for StyleStats!
- v4.0.0: API is changed:
StyleStats.parse(). Improve CLI tool. - v3.2.0: Support request option, and add ClI options.
- v3.1.0: Support compiled Less/Stylus files.
- v3.0.0: API is changed: CLI option. Support parse HTML page.
- v2.3.0: Support HTML output CLI option.
- v2.2.0: Add
dataUriSize,ratioOfDataUriSizemetics. - v2.1.0: Add
javascriptSpecificSelectorsmetics, and fix counting properties in mediaQueries. - v2.0.0: API is changed:
StyleStats.parse(). Add metrics. - v1.2.0: Support multiple input files.
- v1.1.0: Add
universalSelectorsmetrics. - v1.0.0: Major release.
Code is released under the MIT license.