{"id":13495222,"url":"https://github.com/macbre/analyze-css","last_synced_at":"2026-04-03T00:52:22.626Z","repository":{"id":12502948,"uuid":"15172553","full_name":"macbre/analyze-css","owner":"macbre","description":"CSS selectors complexity and performance analyzer","archived":false,"fork":false,"pushed_at":"2025-05-09T17:55:03.000Z","size":4823,"stargazers_count":698,"open_issues_count":10,"forks_count":26,"subscribers_count":19,"default_branch":"master","last_synced_at":"2025-05-09T18:52:20.918Z","etag":null,"topics":["css","css-selectors-complexity","css-source","dart-sass","metrics","performance-analyzer","phantomas","sass","webperf","webperformance"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/analyze-css","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-2-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/macbre.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2013-12-13T19:51:19.000Z","updated_at":"2025-05-09T17:55:06.000Z","dependencies_parsed_at":"2023-09-25T23:09:34.887Z","dependency_job_id":"83f9ae25-159d-4f06-a19a-cf3e758b502a","html_url":"https://github.com/macbre/analyze-css","commit_stats":{"total_commits":1218,"total_committers":11,"mean_commits":"110.72727272727273","dds":0.5623973727422003,"last_synced_commit":"46821cc92f0ea0b0310ab1cc583b4cbf7f7f722e"},"previous_names":[],"tags_count":216,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/macbre%2Fanalyze-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/macbre%2Fanalyze-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/macbre%2Fanalyze-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/macbre%2Fanalyze-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/macbre","download_url":"https://codeload.github.com/macbre/analyze-css/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254069449,"owners_count":22009557,"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","css-selectors-complexity","css-source","dart-sass","metrics","performance-analyzer","phantomas","sass","webperf","webperformance"],"created_at":"2024-07-31T19:01:32.630Z","updated_at":"2026-01-08T07:18:53.564Z","avatar_url":"https://github.com/macbre.png","language":"JavaScript","readme":"analyze-css\n===========\n\n[![NPM version](https://badge.fury.io/js/analyze-css.png)](http://badge.fury.io/js/analyze-css)\n[![Known Vulnerabilities](https://snyk.io/test/github/macbre/analyze-css/badge.svg)](https://snyk.io/test/github/macbre/analyze-css)\n[![Coverage Status](https://coveralls.io/repos/github/macbre/analyze-css/badge.svg?branch=devel)](https://coveralls.io/github/macbre/analyze-css?branch=devel)\n[![CodeFactor](https://www.codefactor.io/repository/github/macbre/analyze-css/badge)](https://www.codefactor.io/repository/github/macbre/analyze-css)\n\n[![Download stats](https://nodei.co/npm/analyze-css.png?downloads=true\u0026downloadRank=true)](https://nodei.co/npm/analyze-css/)\n\nCSS selectors complexity and performance analyzer. analyze-css is built as a set of rules bound to events fired by CSS parser. Each rule can generate metrics and add \"offenders\" with more detailed information (see Usage section for an example).\n\n## Install\n\nanalyze-css comes as a \"binary\" for command-line and as CommonJS module. Run the following to install them globally:\n\n```\nnpm install --global analyze-css\n```\n\nor to install from GitHub's repository:\n\n```\nnpm install --global @macbre/analyze-css\n```\n\n## Usage\n\n### Command line tool\n\nYou can use analyze-css \"binary\" to analyze local CSS files or remote CSS assets:\n\n```sh\n$ analyze-css --file examples/elecena.css\n\n$ analyze-css --url http://s3.macbre.net/analyze-css/propertyResets.css\n$ analyze-css --url https://s3.macbre.net/analyze-css/propertyResets.css --ignore-ssl-errors\n```\n\nYou can provide CSS via stdin as well (notice the dash: ``-``):\n\n```sh\n$ echo \".foo {margin: 0 \\!important}\" | analyze-css -\n```\n\nThis will emit JSON formatted results on ``stdout``. Use ``--pretty`` (or ``-p`` shortcut) option to make the output readable for human beings.\n\nBasic HTTP authentication can be provided through the options `--auth-user` and `--auth-pass`.\n\nHTTP proxy (e.g. `http://localhost:8080`) can be provided via:\n\n* `--proxy` or `-x` option\n* `HTTP_PROXY` env variable\n\n### CommonJS module\n\n```\nnpm i --save analyze-css\n```\n\n```js\nconst analyze = require('analyze-css');\n\n(async() =\u003e {\n  const results = await analyze('.foo {margin: 0 !important}');\n  console.log(results); // example? see below\n})();\n```\n\n```js\n// options can be provided\nconst opts = {\n  'noOffenders': true\n};\n\n(async() =\u003e {\n  const results = await analyze('.foo {margin: 0 !important}', opts);\n  console.log(results); // example? see below\n})();\n```\n\n### [grunt task](https://www.npmjs.org/package/grunt-contrib-analyze-css)\n\n\u003e Created by @DeuxHuitHuit\n\n```sh\n$ npm i grunt-contrib-analyze-css\n```\n\nIt uses configurable threshold and compares the analyze-css result with it.\n\n### Results\n\n```json\n{\n  \"generator\": \"analyze-css v0.10.2\",\n  \"metrics\": {\n    \"base64Length\": 11332,\n    \"redundantBodySelectors\": 0,\n    \"redundantChildNodesSelectors\": 1,\n    \"colors\": 106,\n    \"comments\": 1,\n    \"commentsLength\": 68,\n    \"complexSelectors\": 37,\n    \"duplicatedSelectors\": 7,\n    \"duplicatedProperties\": 24,\n    \"emptyRules\": 0,\n    \"expressions\": 0,\n    \"oldIEFixes\": 51,\n    \"imports\": 0,\n    \"importants\": 3,\n    \"mediaQueries\": 0,\n    \"notMinified\": 0,\n    \"multiClassesSelectors\": 74,\n    \"parsingErrors\": 0,\n    \"oldPropertyPrefixes\": 79,\n    \"propertyResets\": 0,\n    \"qualifiedSelectors\": 28,\n    \"specificityIdAvg\": 0.04,\n    \"specificityIdTotal\": 25,\n    \"specificityClassAvg\": 1.27,\n    \"specificityClassTotal\": 904,\n    \"specificityTagAvg\": 0.79,\n    \"specificityTagTotal\": 562,\n    \"selectors\": 712,\n    \"selectorLengthAvg\": 1.5722460658082975,\n    \"selectorsByAttribute\": 92,\n    \"selectorsByClass\": 600,\n    \"selectorsById\": 25,\n    \"selectorsByPseudo\": 167,\n    \"selectorsByTag\": 533,\n    \"length\": 55173,\n    \"rules\": 433,\n    \"declarations\": 1288\n  },\n  \"offenders\": {\n    \"importants\": [\n      \".foo {margin: 0 !important}\"\n    ]\n  }\n}\n```\n\n## Metrics\n\n* **base64Length**: total length of base64-encoded data in CSS source (will warn about base64-encoded data bigger than 4 kB)\n* **redundantBodySelectors**: number of redundant body selectors (e.g. ``body .foo``, ``section body h2``, but not ``body \u003e h1``)\n* **redundantChildNodesSelectors**: number of redundant child nodes selectors (e.g. ``ul li``, ``table tr``)\n* **colors**: number of unique colors used in CSS\n* **comments**: number of comments in CSS source\n* **commentsLength**: length of comments content in CSS source\n* **complexSelectors**: number of complex selectors (consisting of more than three expressions, e.g. ``header ul li .foo``)\n* **duplicatedSelectors**: number of CSS selectors defined more than once in CSS source\n* **duplicatedProperties**: number of CSS property definitions duplicated within a selector\n* **emptyRules**: number of rules with no properties (e.g. ``.foo { }``)\n* **expressions**: number of rules with CSS expressions (e.g. ``expression( document.body.clientWidth \u003e 600 ? \"600px\" : \"auto\" )``)\n* **oldIEFixes**: number of fixes for old versions of Internet Explorer (e.g. ``* html .foo {}`` and ``.foo { *zoom: 1 }``, [read](http://blogs.msdn.com/b/ie/archive/2005/09/02/460115.aspx) [more](http://www.impressivewebs.com/ie7-ie8-css-hacks/))\n* **imports** number of ``@import`` rules\n* **importants**: number of properties with value forced by ``!important``\n* **mediaQueries**: number of media queries (e.g. ``@media screen and (min-width: 1370px)``)\n* **notMinified**: set to 1 if the provided CSS is not minified\n* **multiClassesSelectors**: reports selectors with multiple classes (e.g. ``span.foo.bar``)\n* **parsingErrors**: number of CSS parsing errors\n* **oldPropertyPrefixes**: number of properties with no longer needed vendor prefix, powered by data provided by [autoprefixer](https://github.com/ai/autoprefixer) (e.g. ``--moz-border-radius``)\n* **propertyResets**: number of [accidental property resets](http://css-tricks.com/accidental-css-resets/)\n* **qualifiedSelectors**: number of [qualified selectors](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS) (e.g. ``header#nav``, ``.foo#bar``, ``h1.title``)\n* **specificityIdAvg**: average [specificity](http://css-tricks.com/specifics-on-css-specificity/) for ID\n* **specificityIdTotal**: total [specificity](http://css-tricks.com/specifics-on-css-specificity/) for ID\n* **specificityClassAvg**: average [specificity](http://css-tricks.com/specifics-on-css-specificity/) for class, pseudo-class or attribute\n* **specificityClassTotal**: total [specificity](http://css-tricks.com/specifics-on-css-specificity/) for class, pseudo-class or attribute\n* **specificityTagAvg**: average [specificity](http://css-tricks.com/specifics-on-css-specificity/) for element\n* **specificityTagTotal**: total [specificity](http://css-tricks.com/specifics-on-css-specificity/) for element\n* **selectors**: number of selectors (e.g. ``.foo, .bar { color: red }`` is counted as two selectors - ``.foo`` and ``.bar``)\n* **selectorLengthAvg**: average length of selector (e.g. for ``.foo .bar, #test div \u003e span { color: red }`` will be set as 2.5)\n* **selectorsByAttribute**: number of selectors by attribute (e.g. ``.foo[value=bar]``)\n* **selectorsByClass**: number of selectors by class\n* **selectorsById**: number of selectors by ID\n* **selectorsByPseudo**: number of pseudo-selectors (e,g. ``:hover``)\n* **selectorsByTag**: number of selectors by tag name\n* **length**: length of CSS source (in bytes)\n* **rules**: number of rules (e.g. ``.foo, .bar { color: red }`` is counted as one rule)\n* **declarations**: number of declarations (e.g. ``.foo, .bar { color: red }`` is counted as one declaration - ``color: red``)\n\n## Read more\n\n* [Optimize browser rendering](https://developers.google.com/speed/docs/best-practices/rendering) (by Google)\n* [Profiling CSS for fun and profit. Optimization notes.](http://perfectionkills.com/profiling-css-for-fun-and-profit-optimization-notes/)\n* [CSS specificity](http://css-tricks.com/specifics-on-css-specificity/)\n* [CSS Selector Performance has changed! (For the better)](http://calendar.perfplanet.com/2011/css-selector-performance-has-changed-for-the-better/) (by Nicole Sullivan)\n* [GitHub's CSS Performance](https://speakerdeck.com/jonrohan/githubs-css-performance) (by Joh Rohan)\n\n## Dev hints\n\nRunning tests and linting the code:\n\n```sh\n$ npm test \u0026\u0026 npm run-script lint\n```\n\nTurning on debug mode (i.e. verbose logging to stderr via [debug module](https://npmjs.org/package/debug)):\n\n```sh\n$ DEBUG=analyze-css* analyze-css ...\n```\n\n## Stargazers over time\n\n[![Stargazers over time](https://starchart.cc/macbre/analyze-css.svg)](https://starchart.cc/macbre/analyze-css)\n","funding_links":[],"categories":["CSS","JavaScript","0. 前端自动化(Workflow)","Bibliotecas","Bundle Analyzers"],"sub_categories":["References"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmacbre%2Fanalyze-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmacbre%2Fanalyze-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmacbre%2Fanalyze-css/lists"}