Generate interactive Specificity Graphs for your CSS
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
bin functional node module, added instructions in readme Feb 28, 2015
img Added one line summary of what graph means Nov 8, 2014
template cli tool: embed generated jsonData into template Feb 22, 2015
.gitignore update gitignore Nov 23, 2014
LICENSE-MIT add license Nov 8, 2014 rm Changelog from readme Jul 18, 2015
example.js cli tool: embed generated jsonData into template Feb 22, 2015
package.json 0.1.7 Apr 16, 2016
specificity-graph-standalone.js Build specificity-graph-standalone - fix #14 Feb 22, 2015
style.min.css add option for launching browser with generated chart Feb 22, 2015

Specificity Graph (for CSS)

NPM version Build Status

Idea by Harry Roberts

The generated graph Generate an interactive line graph showing the specificity in your stylesheet. Uses d3, css-parser, and specificity.


npm install specificity-graph


specifity-graph can be used in different ways:


specificity-graph <cssFile> [options]

Creates a directory containing

  • json file with specificity data for your CSS
  • html file with interactive specificity graph for CSS
  • necessary JS files to run graph


Flag Description
-o --output name for generated directory (default: specificity-graph)
-b --browser auto launch browser to view generated chart
-h --help Help

Node module

var specificityGraph = require('specificity-graph');

specificityGraph(directory, css, function(directory){
  console.log('specificity-graph files created in ' + directory);

Via JavaScript

First get the specificityGraph accessible in your code:

Using Browserify (or similar)

Just require('specificity-graph').

Standalone (no module loader)

Add <script src="specificity-graph-standalone.js"></script>, this will expose specificityGraph as a global variable.


  • specificityGraph.create(css, options)
  • specificityGraph.createFromData(specificityData, options),
  • specificityGraph.update(css)
Name Description
css String with css to generate specificity graph for
specificityData JSON object with css specificity data. CLI write a JSON in this format, as does the lib/lineChart's create function'
Create options
Create option name Description
svgSelector Selector for svg element to draw specificity graph inside. Defaults to .js-graph.
width default 1000. You should set a viewBox value on the SVG element to match width and height, f.e. viewbox='0 0 1000 4000'.
height default 400
showTicks Boolean. Show scale and ticks. Default false.
xProp (possible values: 'selectorIndex', 'line'). What to base the x dimension, 'location in stylesheet' in graph on: index of selector in CSS, or line number for selector in CSS. Default 'selectorIndex'.
yProp default 'specificity'