SQL EXPLAIN for CSS selectors
JavaScript Makefile
Latest commit d34e3bc Jul 25, 2015 @josh Merge pull request #12 from gokaygurcan/patch-1
Fix small typo
Failed to load latest commit information.
.gitignore Ignore node_modules/ Apr 19, 2012
.jshintrc Tighter jshint rules Dec 9, 2012
.travis.yml Add travis config Dec 7, 2012
LICENSE Add license Apr 19, 2012
Makefile Tighter jshint rules Dec 9, 2012
README.md
component.json Add bower component.json Sep 10, 2012
css-explain.js Tighter jshint rules Dec 9, 2012
package.json Add npm test script Dec 7, 2012
test.js Tighter jshint rules Dec 9, 2012

README.md

CSS EXPLAIN

Think of it like SQL EXPLAIN, but for CSS selectors.

Usage

cssExplain("li .item")
{
  "selector": "li .item",
  "parts": ["li", ".item"],
  "specificity": [0, 1, 1],
  "category": "class",
  "key": "item",
  "score": 6
}

Results

selector

The String selector input.

parts

Parsed Array of selector components.

specificity

Computed Array of specificy values.

See W3C calcuating selector specificity.

category

Category index key selector falls under. Either 'id', 'class', 'tag' or 'universal'.

Modeled after WebKit's rule set grouping optimizations. CSS rules in WebKit are indexed and grouped in a hash table to avoid having to do a full test on the element being matched. So its better to have selectors fall under unique id or class indexes rather than under more broad indexes like tags. Selectors in the universal category will always have to be tested against every element.

{
  "id": {
    "about": ["#about"]
  },
  "class": {
    "item": ["li .item"],
    "menu": ["ul.menu"],
    "minibutton": [".minibutton"]
  },
  "tag": {
    "a": ["ul.menu a", ".message a"],
    "span": [".nav > span"]
  },
  "universal": ["*", "[input=text]"]
}

To match against <a class="minibutton">, the rule set would include class -> minibutton, tag -> a and universal which is [".minibutton", "ul.menu a", ".message a", "*", "[input=text]"].

See RuleSet::addRule for reference.

key

Hash used for indexing under the category.

score

1-10 rating. 1 being the most efficient and 10 being the least.

NOTE: Don't take this value so seriously

messages

Array of infomational reasons for why the score was computed.

Contributing

$ git clone https://github.com/josh/css-explain.git
$ cd css-explain/

Run tests

$ make test