# analyze-css

> CSS selectors complexity and performance analyzer

Latest version **2.4.54** (published 2026-10-08) · BSD-2-Clause license · 0 weekly downloads

## Install

```sh
npm install analyze-css
pnpm add analyze-css
yarn add analyze-css
bun add analyze-css
```

Provides the command `analyze-css`.

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 2.4.54 |
| Published | 2026-10-08 |
| First published | 2013-12-20 |
| Weekly downloads | 0 |
| License | BSD-2-Clause |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >18 |
| Dependencies | 12 |
| Unpacked size | 135.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| Author | Maciej Brencz |
| Maintainers | macbre |
| Keywords | analysis, complexity, css, stylesheet, webperf |

## Links

- npm: https://www.npmjs.com/package/analyze-css
- Repository: https://github.com/macbre/analyze-css
- Homepage: https://github.com/macbre/analyze-css#readme
- Issues: https://github.com/macbre/analyze-css/issues
- npm.io page: https://npm.io/package/analyze-css

## Dependencies (12)

- [cli](https://npm.io/package/cli.md) ^1.0.1
- [glob](https://npm.io/package/glob.md) ^13.0.0
- [debug](https://npm.io/package/debug.md) ^4.1.1
- [css-what](https://npm.io/package/css-what.md) ^8.0.0
- [onecolor](https://npm.io/package/onecolor.md) ^4.0.0
- [commander](https://npm.io/package/commander.md) ^15.0.0
- [fast-stats](https://npm.io/package/fast-stats.md) 0.0.7
- [node-fetch](https://npm.io/package/node-fetch.md) ^3.0.0
- [specificity](https://npm.io/package/specificity.md) ^1.0.0
- [@adobe/css-tools](https://npm.io/package/@adobe/css-tools.md) ^4.4.2
- [http-proxy-agent](https://npm.io/package/http-proxy-agent.md) ^9.0.0
- [css-shorthand-properties](https://npm.io/package/css-shorthand-properties.md) ^1.1.1

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 2.4.54 (latest) — 2026-10-08
- 2.4.53 — 2026-10-01
- 2.4.52 — 2026-09-24
- 2.4.51 — 2026-09-17
- 2.4.50 — 2026-09-10
- 2.4.49 — 2026-08-27
- 2.4.48 — 2026-08-13
- 2.4.47 — 2026-07-23
- 2.4.46 — 2026-07-16
- 2.4.45 — 2026-07-11
- 2.4.44 — 2026-07-02
- 2.4.43 — 2026-06-25
- 2.4.42 — 2026-06-18
- 2.4.41 — 2026-06-11
- 2.4.40 — 2026-05-21
- … 247 more at https://npm.io/package/analyze-css/versions

## README

analyze-css
===========

[![NPM version](https://badge.fury.io/js/analyze-css.png)](http://badge.fury.io/js/analyze-css)
[![Known Vulnerabilities](https://snyk.io/test/github/macbre/analyze-css/badge.svg)](https://snyk.io/test/github/macbre/analyze-css)
[![Coverage Status](https://coveralls.io/repos/github/macbre/analyze-css/badge.svg?branch=devel)](https://coveralls.io/github/macbre/analyze-css?branch=devel)
[![CodeFactor](https://www.codefactor.io/repository/github/macbre/analyze-css/badge)](https://www.codefactor.io/repository/github/macbre/analyze-css)

[![Download stats](https://nodei.co/npm/analyze-css.png?downloads=true&downloadRank=true)](https://nodei.co/npm/analyze-css/)

CSS 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).

## Install

analyze-css comes as a "binary" for command-line and as CommonJS module. Run the following to install them globally:

```
npm install --global analyze-css
```

or to install from GitHub's repository:

```
npm install --global @macbre/analyze-css
```

## Usage

### Command line tool

You can use analyze-css "binary" to analyze local CSS files or remote CSS assets:

```sh
$ analyze-css --file examples/elecena.css

$ analyze-css --url http://s3.macbre.net/analyze-css/propertyResets.css
$ analyze-css --url https://s3.macbre.net/analyze-css/propertyResets.css --ignore-ssl-errors
```

You can provide CSS via stdin as well (notice the dash: ``-``):

```sh
$ echo ".foo {margin: 0 \!important}" | analyze-css -
```

This will emit JSON formatted results on ``stdout``. Use ``--pretty`` (or ``-p`` shortcut) option to make the output readable for human beings.

Basic HTTP authentication can be provided through the options `--auth-user` and `--auth-pass`.

HTTP proxy (e.g. `http://localhost:8080`) can be provided via:

* `--proxy` or `-x` option
* `HTTP_PROXY` env variable

### CommonJS module

```
npm i --save analyze-css
```

```js
const analyze = require('analyze-css');

(async() => {
  const results = await analyze('.foo {margin: 0 !important}');
  console.log(results); // example? see below
})();
```

```js
// options can be provided
const opts = {
  'noOffenders': true
};

(async() => {
  const results = await analyze('.foo {margin: 0 !important}', opts);
  console.log(results); // example? see below
})();
```

### [grunt task](https://www.npmjs.org/package/grunt-contrib-analyze-css)

> Created by @DeuxHuitHuit

```sh
$ npm i grunt-contrib-analyze-css
```

It uses configurable threshold and compares the analyze-css result with it.

### Results

```json
{
  "generator": "analyze-css v0.10.2",
  "metrics": {
    "base64Length": 11332,
    "redundantBodySelectors": 0,
    "redundantChildNodesSelectors": 1,
    "colors": 106,
    "comments": 1,
    "commentsLength": 68,
    "complexSelectors": 37,
    "duplicatedSelectors": 7,
    "duplicatedProperties": 24,
    "emptyRules": 0,
    "expressions": 0,
    "oldIEFixes": 51,
    "imports": 0,
    "importants": 3,
    "mediaQueries": 0,
    "notMinified": 0,
    "multiClassesSelectors": 74,
    "parsingErrors": 0,
    "oldPropertyPrefixes": 79,
    "propertyResets": 0,
    "qualifiedSelectors": 28,
    "specificityIdAvg": 0.04,
    "specificityIdTotal": 25,
    "specificityClassAvg": 1.27,
    "specificityClassTotal": 904,
    "specificityTagAvg": 0.79,
    "specificityTagTotal": 562,
    "selectors": 712,
    "selectorLengthAvg": 1.5722460658082975,
    "selectorsByAttribute": 92,
    "selectorsByClass": 600,
    "selectorsById": 25,
    "selectorsByPseudo": 167,
    "selectorsByTag": 533,
    "length": 55173,
    "rules": 433,
    "declarations": 1288
  },
  "offenders": {
    "importants": [
      ".foo {margin: 0 !important}"
    ]
  }
}
```

## Metrics

* **base64Length**: total length of base64-encoded data in CSS source (will warn about base64-encoded data bigger than 4 kB)
* **redundantBodySelectors**: number of redundant body selectors (e.g. ``body .foo``, ``section body h2``, but not ``body > h1``)
* **redundantChildNodesSelectors**: number of redundant child nodes selectors (e.g. ``ul li``, ``table tr``)
* **colors**: number of unique colors used in CSS
* **comments**: number of comments in CSS source
* **commentsLength**: length of comments content in CSS source
* **complexSelectors**: number of complex selectors (consisting of more than three expressions, e.g. ``header ul li .foo``)
* **duplicatedSelectors**: number of CSS selectors defined more than once in CSS source
* **duplicatedProperties**: number of CSS property definitions duplicated within a selector
* **emptyRules**: number of rules with no properties (e.g. ``.foo { }``)
* **expressions**: number of rules with CSS expressions (e.g. ``expression( document.body.clientWidth > 600 ? "600px" : "auto" )``)
* **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/))
* **imports** number of ``@import`` rules
* **importants**: number of properties with value forced by ``!important``
* **mediaQueries**: number of media queries (e.g. ``@media screen and (min-width: 1370px)``)
* **notMinified**: set to 1 if the provided CSS is not minified
* **multiClassesSelectors**: reports selectors with multiple classes (e.g. ``span.foo.bar``)
* **parsingErrors**: number of CSS parsing errors
* **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``)
* **propertyResets**: number of [accidental property resets](http://css-tricks.com/accidental-css-resets/)
* **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``)
* **specificityIdAvg**: average [specificity](http://css-tricks.com/specifics-on-css-specificity/) for ID
* **specificityIdTotal**: total [specificity](http://css-tricks.com/specifics-on-css-specificity/) for ID
* **specificityClassAvg**: average [specificity](http://css-tricks.com/specifics-on-css-specificity/) for class, pseudo-class or attribute
* **specificityClassTotal**: total [specificity](http://css-tricks.com/specifics-on-css-specificity/) for class, pseudo-class or attribute
* **specificityTagAvg**: average [specificity](http://css-tricks.com/specifics-on-css-specificity/) for element
* **specificityTagTotal**: total [specificity](http://css-tricks.com/specifics-on-css-specificity/) for element
* **selectors**: number of selectors (e.g. ``.foo, .bar { color: red }`` is counted as two selectors - ``.foo`` and ``.bar``)
* **selectorLengthAvg**: average length of selector (e.g. for ``.foo .bar, #test div > span { color: red }`` will be set as 2.5)
* **selectorsByAttribute**: number of selectors by attribute (e.g. ``.foo[value=bar]``)
* **selectorsByClass**: number of selectors by class
* **selectorsById**: number of selectors by ID
* **selectorsByPseudo**: number of pseudo-selectors (e,g. ``:hover``)
* **selectorsByTag**: number of selectors by tag name
* **length**: length of CSS source (in bytes)
* **rules**: number of rules (e.g. ``.foo, .bar { color: red }`` is counted as one rule)
* **declarations**: number of declarations (e.g. ``.foo, .bar { color: red }`` is counted as one declaration - ``color: red``)

## Read more

* [Optimize browser rendering](https://developers.google.com/speed/docs/best-practices/rendering) (by Google)
* [Profiling CSS for fun and profit. Optimization notes.](http://perfectionkills.com/profiling-css-for-fun-and-profit-optimization-notes/)
* [CSS specificity](http://css-tricks.com/specifics-on-css-specificity/)
* [CSS Selector Performance has changed! (For the better)](http://calendar.perfplanet.com/2011/css-selector-performance-has-changed-for-the-better/) (by Nicole Sullivan)
* [GitHub's CSS Performance](https://speakerdeck.com/jonrohan/githubs-css-performance) (by Joh Rohan)

## Dev hints

Running tests and linting the code:

```sh
$ npm test && npm run-script lint
```

Turning on debug mode (i.e. verbose logging to stderr via [debug module](https://npmjs.org/package/debug)):

```sh
$ DEBUG=analyze-css* analyze-css ...
```

## Stargazers over time

[![Stargazers over time](https://starchart.cc/macbre/analyze-css.svg)](https://starchart.cc/macbre/analyze-css)

---
_Source: https://npm.io/package/analyze-css · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._