Css-explain

css-explain

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

css-explain is one of such rare modules that helps us to learn or explain CSS selectors with ease.

Get it: npm install css-explain

Sample usage:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
> var cssExplain = require('css-explain').cssExplain

> cssExplain("div .info")
{ selector: 'div .info',
  parts: [ 'div', '.info' ],
  category: 'class',
  key: 'info',
  specificity: [ 0, 1, 1 ],
  score: 6,
  messages: [ 'Uses a descendant selector with a rightmost class selector' ] }

> cssExplain("div#info")
{ selector: 'div#info',
  parts: [ 'div#info' ],
  category: 'id',
  key: 'info',
  specificity: [ 1, 0, 1 ],
  score: 2,
  messages: [ 'ID is overly qualified by a tag name' ] }

> cssExplain("div > p#info")
{ selector: 'div > p#info',
  parts: [ 'div', '>', 'p#info' ],
  category: 'id',
  key: 'info',
  specificity: [ 1, 0, 2 ],
  score: 3,
  messages:
   [ 'ID is overly qualified by a tag name',
     'ID is overly qualified by a child selector' ] }

GIF FTW!

css-explain

Thanks to Joshua Peek for css-explain, do checkout the webbased app of the same.

Suggest a module

Comments