{"id":13435890,"url":"https://github.com/t32k/stylestats","last_synced_at":"2025-05-15T05:05:31.293Z","repository":{"id":14450181,"uuid":"17161821","full_name":"t32k/stylestats","owner":"t32k","description":"StyleStats is a library to collect CSS statistics.","archived":false,"fork":false,"pushed_at":"2018-05-02T08:34:27.000Z","size":483,"stargazers_count":1826,"open_issues_count":5,"forks_count":70,"subscribers_count":51,"default_branch":"master","last_synced_at":"2025-04-14T08:07:57.923Z","etag":null,"topics":["css","stylestats"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/t32k.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-02-25T04:53:08.000Z","updated_at":"2025-03-15T20:58:58.000Z","dependencies_parsed_at":"2022-08-31T09:11:30.388Z","dependency_job_id":null,"html_url":"https://github.com/t32k/stylestats","commit_stats":null,"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/t32k%2Fstylestats","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/t32k%2Fstylestats/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/t32k%2Fstylestats/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/t32k%2Fstylestats/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/t32k","download_url":"https://codeload.github.com/t32k/stylestats/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254276446,"owners_count":22043866,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","stylestats"],"created_at":"2024-07-31T03:00:40.428Z","updated_at":"2025-05-15T05:05:31.256Z","avatar_url":"https://github.com/t32k.png","language":"CSS","funding_links":[],"categories":["CSS","Frameworks / Resources"],"sub_categories":["S"],"readme":"# [StyleStats](http://www.stylestats.org/) [![Build Status](https://secure.travis-ci.org/t32k/stylestats.svg?branch=master)](http://travis-ci.org/t32k/stylestats) [![Dependency Status](https://david-dm.org/t32k/stylestats.svg)](https://david-dm.org/t32k/stylestats) [![Coverage Status](http://img.shields.io/coveralls/t32k/stylestats.svg)](https://coveralls.io/r/t32k/stylestats) [![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg)](https://github.com/sindresorhus/xo) \n\n## Installation\n\nStyleStats works on Node.js `\u003e=6.x`.\n\n```\n$ npm install -g stylestats\n```\n\n## Usage\n\n```sh\n$ stylestats path/to/stylesheet.css\nStyleStats!\n┌─────────────────────────────────┬──────────────────────────┐\n│ Published                       │ June 14, 2017 10:35 AM   │\n├─────────────────────────────────┼──────────────────────────┤\n│ Paths                           │ path/to/stylesheet.css   │\n├─────────────────────────────────┼──────────────────────────┤\n│ Style Sheets                    │ 1                        │\n├─────────────────────────────────┼──────────────────────────┤\n│ Style Elements                  │ 0                        │\n├─────────────────────────────────┼──────────────────────────┤\n│ Size                            │ 240.0B                   │\n├─────────────────────────────────┼──────────────────────────┤\n│ Data URI Size                   │ 0                        │\n├─────────────────────────────────┼──────────────────────────┤\n│ Ratio of Data URI Size          │ 0                        │\n├─────────────────────────────────┼──────────────────────────┤\n│ Gzipped Size                    │ 158.0B                   │\n├─────────────────────────────────┼──────────────────────────┤\n│ Rules                           │ 7                        │\n├─────────────────────────────────┼──────────────────────────┤\n│ Selectors                       │ 12                       │\n├─────────────────────────────────┼──────────────────────────┤\n│ Simplicity                      │ 58.3%                    │\n├─────────────────────────────────┼──────────────────────────┤\n│ Average of Identifier           │ 1.250                    │\n├─────────────────────────────────┼──────────────────────────┤\n│ Most Identifier                 │ 3                        │\n├─────────────────────────────────┼──────────────────────────┤\n│ Most Identifier Selector        │ .foo .bar .baz           │\n├─────────────────────────────────┼──────────────────────────┤\n│ Average of Cohesion             │ 1.429                    │\n├─────────────────────────────────┼──────────────────────────┤\n│ Lowest Cohesion                 │ 2                        │\n├─────────────────────────────────┼──────────────────────────┤\n│ Lowest Cohesion Selector        │ .foo                     │\n├─────────────────────────────────┼──────────────────────────┤\n│ Total Unique Font Sizes         │ 2                        │\n├─────────────────────────────────┼──────────────────────────┤\n│ Unique Font Sizes               │ 12px                     │\n│                                 │ 16px                     │\n├─────────────────────────────────┼──────────────────────────┤\n│ Total Unique Font Families      │ 0                        │\n├─────────────────────────────────┼──────────────────────────┤\n│ Unique Font Families            │ N/A                      │\n├─────────────────────────────────┼──────────────────────────┤\n│ Total Unique Colors             │ 3                        │\n├─────────────────────────────────┼──────────────────────────┤\n│ Unique Colors                   │ #333333                  │\n│                                 │ #CCCCCC                  │\n│                                 │ RED                      │\n├─────────────────────────────────┼──────────────────────────┤\n│ Total Unique Background Images  │ 0                        │\n├─────────────────────────────────┼──────────────────────────┤\n│ Unique Background Images        │ N/A                      │\n├─────────────────────────────────┼──────────────────────────┤\n│ ID Selectors                    │ 1                        │\n├─────────────────────────────────┼──────────────────────────┤\n│ Universal Selectors             │ 1                        │\n├─────────────────────────────────┼──────────────────────────┤\n│ Unqualified Attribute Selectors │ 1                        │\n├─────────────────────────────────┼──────────────────────────┤\n│ JavaScript Specific Selectors   │ 0                        │\n├─────────────────────────────────┼──────────────────────────┤\n│ Important Keywords              │ 1                        │\n├─────────────────────────────────┼──────────────────────────┤\n│ Float Properties                │ 1                        │\n├─────────────────────────────────┼──────────────────────────┤\n│ Properties Count                │ color: 4                 │\n│                                 │ font-size: 3             │\n│                                 │ margin: 2                │\n│                                 │ float: 1                 │\n├─────────────────────────────────┼──────────────────────────┤\n│ Media Queries                   │ 0                        │\n└─────────────────────────────────┴──────────────────────────┘\n```\n\nSpecified css file will be analyzed.\n\n```sh\n# Providing multiple input is also supported.\n$ stylestats foo.css bar.css baz.css\n```\n\nCSS files in specified directory will be analyzed.\n\n```sh\n$ stylestats path/to/dir\n```\n\nGlob input is supported (quotes are required).\n\n```sh\n$ stylestats 'path/**/*.css'\n```\n\nYou can specify a remote CSS file.\n\n```sh\n$ stylestats https://t32k.me/wisteria/css/wisteria.css\n```\n\nIf you specify an HTML page, StyleStats will analyze stylesheets and `style` elements.\n\n```sh\n$ stylestats https://t32k.me/\n```\n\n`--format` option outputs JSON and CSV.\n\n```sh\n$ stylestats foo.css -f \u003cjson|csv\u003e\n```\n\nIf you have __[gist](https://github.com/defunkt/gist)__ installed, you can upload StyleStats data to [GitHub Gist](https://gist.github.com/) with a one-liner command.\n\n```sh\n$ stylestats https://t32k.me/ \u003e stats.txt \u0026\u0026 gist stats.txt\n\u003e\u003e https://gist.github.com/anonymous/d6259fce3d80d2c71ebc7edc71c06088\n```\n\n## Metrics\n\n![Metrics](http://i.imgur.com/oEABjEl.png)\n\n### Simplicity\n\nThe __Simplicity__ is measured as __Rules__ divided by __Selectors__.\n\n### Average of Identifier\n\nThe __Average of Identifier__ is measured as __Total Identifiers__ divided by __Selectors__.\n\n### Average of Cohesion\n\nThe __Average of Cohesion__ is measured as __Total declarations__ divided by __Rules__.\n\n### Lowest Cohesion\n\nThe __Lowest Cohesion__ metric is the number of selector declarations.\n\nSee also:\n\n+ [SOLID CSS | Blog | Miller Medeiros](http://blog.millermedeiros.com/solid-css/)\n\n### Unqualified Attribute Selectors\n\nThe __Unqualified Attribute Selectors__ metrics is the number of unqualified attribute selectors.\n\nThe following patterns will be counted:\n\n```css\n[type=text] {\n    color: red;\n}\n\n.selected [type=text] {\n    color: red;\n}\n```\n\nThe following patterns are considered to be okay and will not be counted:\n\n```\n/* unqualified attribute selector is not key */\n.selected [type=text] a {\n    color: red;\n}\n```\n\nSee also:\n\n+ [Disallow unqualified attribute selectors · stubbornella/csslint Wiki](https://github.com/stubbornella/csslint/wiki/Disallow-unqualified-attribute-selectors)\n\n### JavaScript Specific Selectors\n\nThe __JavaScript Specific Selectors__ metrics is the number of JavaScript-specific selectors, such as `js-*`. The selectors are only for JavaScript hooks; you should not to hang any presentation off them.\n\nSee also:\n\n+ [About HTML semantics and front-end architecture – Nicolas Gallagher](http://nicolasgallagher.com/about-html-semantics-front-end-architecture/#javascript-specific-classes)\n\n\n### User Specified Selectors\n\nThe __User Specified Selectors__ metrics is the number of user-specified selectors. Default is `false`. For instance, you can count the number of components if you specify `\"\\\\.component\\\\-\"` using reqular expression in `.stylestatsrc` .\n\n\n### Properties Count\n\nThe __Properties Count__ is the number of property declarations. The default is to display the top `10` properties.\n\n\n## Configuration\n\nYou can configure StyleStats.\n\nCLI:\n\n```shell\n$ stylestats -c path/to/.stylestatsrc\n```\n\nAPI:\n\n```js\nconst StyleStats = require('stylestats');\nconst stats = new StyleStats('path/to/stylesheet.css', 'path/to/.stylestatsrc');\n```\n\nDefault configuration is [here](assets/default.json).\n\nHere is an example JSON to disable display gzipped size:\n\n```\n{\n  \"gzippedSize\": false\n}\n```\n\n\n## CLI Reference\n\nHelp:\n\n```shell\n$ stylestats --help\n\n  Usage: stylestats [options] \u003cfile ...\u003e\n\n  Options:\n\n    -h, --help             output usage information\n    -V, --version          output the version number\n    -c, --config \u003cpath\u003e    set configurations\n    -f, --format \u003cformat\u003e  set the output format \u003cjson|csv\u003e\n    -p, --prettify         prettify raw data\n    -n, --number           show only numeral metrics\n    -m, --mobile           set the mobile user agent\n```\n\nExample:\n\n```shell\n$ stylestats path/to/stylesheet.css -c .stylestatsrc\n StyleStats!\n┌────────────────────────────┬────────┐\n│ Style Sheets               │ 1      │\n├────────────────────────────┼────────┤\n│ Size                       │ 19.0KB │\n├────────────────────────────┼────────┤\n│ Gzipped Size               │ 3.7KB  │\n├────────────────────────────┼────────┤\n│ Total Unique Font Families │ 3      │\n└────────────────────────────┴────────┘\n```\n\n### Integration\n\n+ [Plot your data with Jenkins](https://github.com/t32k/stylestats/wiki/Plot-with-Jenkins)\n+ [Plot your data with moniteur](https://github.com/t32k/stylestats/wiki/Plot-with-moniteur)\n+ [Plot your data with Google Analytics](https://github.com/t32k/stylestats/wiki/Plot-with-Google-Analytics)\n\n## API Reference\n\n### `new StyleStats(stylesheet, [config])`\n\n1. `stylesheet` Required `String|Array` Stylesheet's file path or its array.\n2. `config` Optional `String|Object` Configuration JSON file path or object.\n\n#### `config`\n\nConfig list is show to [default.json](https://github.com/t32k/stylestats/blob/master/assets/default.json)\n\n### `StyleStats#parse()`\n\n```javascript\nconst StyleStats = require('stylestats');\nconst stats = new StyleStats('path/to/stylesheet.css');\n\nstats.parse()\n  .then((result) =\u003e console.log(JSON.stringify(result, null, 2)))\n  .catch((err) =\u003e console.log(error));\n```\n\n### `StyleStats#prettify(result)`\n\n1. `result` Required `Object` Result StyleStats parsed.\n\n```javascript\n\nstats.parse()\n  .then((result) =\u003e stats.prettify(result));\n```\n\n## Example\n\nCSS example:\n\n```css\n* { float: left; }\nbody { color: #333; }\nh1, h2, h3, h4, h5, h6 { margin: 0; }\na[src] { color: red !important; }\n.foo { color: #ccc; font-size: 12px; }\n.foo .bar .baz { color: #ccc; font-size: 12px; }\n#bar { margin: 10px; font-size: 16px; }\n```\n\nStatistics tree of above css:\n\n```json\n{\n  \"published\": \"2017-06-14T10:24:30.124Z\",\n  \"paths\": [ \"test/fixture/example.css\" ],\n  \"stylesheets\": 1,\n  \"styleElements\": 0,\n  \"size\": 240,\n  \"dataUriSize\": 0,\n  \"ratioOfDataUriSize\": 0,\n  \"gzippedSize\": 158,\n  \"rules\": 7,\n  \"selectors\": 12,\n  \"simplicity\": 0.5833333333333334,\n  \"averageOfIdentifier\": 1.25,\n  \"mostIdentifier\": 3,\n  \"mostIdentifierSelector\": \".foo .bar .baz\",\n  \"averageOfCohesion\": 1.4285714285714286,\n  \"lowestCohesion\": 2,\n  \"lowestCohesionSelector\": [ \".foo\" ],\n  \"totalUniqueFontSizes\": 2,\n  \"uniqueFontSizes\": [ \"12px\", \"16px\" ],\n  \"totalUniqueFontFamilies\": 0,\n  \"uniqueFontFamilies\": [],\n  \"totalUniqueColors\": 3,\n  \"uniqueColors\": [ \"#333333\", \"#CCCCCC\", \"RED\" ],\n  \"totalUniqueBackgroundImages\": 0,\n  \"uniqueBackgroundImages\": [],\n  \"idSelectors\": 1,\n  \"universalSelectors\": 1,\n  \"unqualifiedAttributeSelectors\": 1,\n  \"javascriptSpecificSelectors\": 0,\n  \"importantKeywords\": 1,\n  \"floatProperties\": 1,\n  \"propertiesCount\": [\n    { \"property\": \"color\", \"count\": 4 },\n    { \"property\": \"font-size\", \"count\": 3 },\n    { \"property\": \"margin\", \"count\": 2 },\n    { \"property\": \"float\", \"count\": 1 }\n  ],\n  \"mediaQueries\": 0\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ft32k%2Fstylestats","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ft32k%2Fstylestats","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ft32k%2Fstylestats/lists"}