josh/css-explain — pull request #7 by parkr (2012-12-07 22:19:19+00:00)
Title: Added CLI: `css-explain`

Just put together a CLI which allows one to score the CSS using css-explain.

### Installation

```bash
$ npm install -g css-explain
```

### Usage

```bash
$ css-explain my-styles.css # analyze one file
$ css-explain fork.css spoon.css # analyze as many files as you want
```

### Sample output

```
$ css-explain home.css screen.css
Results for home.css:
Results with score of 7:
header#main-header div a, header#main-header div a:hover, #content #body
header, #content nav, #content #body .section-type .stuff p[class=bio],
#content #body .section-type .stuff span, #content nav a, #content #body
.section-type .stuff .photo img
Results with score of 6:
#content #body .section-type .stuff p[class=bio] > a:hover
Results with score of 3:
#content #body .section-type .stuff .photo .caption, #content #body
.section-type, #content #body .section-type a.person, #content #body
.section-type .stuff, #content #body .section-type a.person
span.name:hover, #content #body .section-type a.person span.name, #content
#body .section-type a.person:hover, #content #body .section-type .stuff
.photo
Results with score of 2:
header#main-header div#features-link, body:after, a:hover, a,
header#main-header div#leacocks-logo, header#main-header div#photos-link,
html
Results with score of 1:
span.namehovered, span.current-bio, header#main-header, #content #body
#landing, .current, .current:hover
Results for screen.css:
Results with score of 7:
ol li, header#main-header div, header#main-header div a, header#main-header
div a:hover, #content #body header, #content #body .section-type .stuff
.photo img, #content #body .section-type .stuff p[class=bio], .content p,
#content #body .section-type .stuff span, #content nav a, #content nav
Results with score of 6:
#content #body .section-type .stuff p[class=bio] > a, #content #body
.section-type .stuff p[class=bio] > a:hover
Results with score of 3:
#content #body .section-type, #content #body .section-type a.person,
#content #body .section-type .stuff, #content #body .section-type a.person
span.name:hover, #content #body .section-type a.person span.name, #content
#body .section-type a.person:hover, #content #body .section-type .stuff
.photo, #content #body .section-type .stuff .photo .caption::after
Results with score of 2:
h1, summary, section, nav, menu, hgroup, header, footer, figure,
figcaption, details, aside, article, h5, blockquote:after,
blockquote:before, q:after, q:before, blockquote, q, td, th, caption,
table, ul, ol, html, video, audio, mark, time, summary, section, ruby,
output, nav, menu, hgroup, header, footer, figcaption, figure, embed,
details, canvas, aside, article, td, th, tr, thead, tfoot, tbody, caption,
table, legend, label, a:hover, fieldset, li, a, ol, dd, dt, dl, center, i,
u, b, var, tt, sup, sub, strong, strike, small, samp, s, q, kbd, ins, img,
em, dfn, del, code, cite, big, address, acronym, abbr, a, pre, blockquote,
p, h6, h5, h4, h3, h2, h1, iframe, object, applet, span, div, body, html,
h6, h1, h2, h3, h4, h5, h6, html, header#main-header div#leacocks-logo, a,
a:hover, header, header#main-header div#photos-link, html, footer, ul, pre,
code, em, blockquote, ol, body, header#main-header div#campuspot-link,
header#main-header div#about-us-link, header#main-header div#features-link,
body:after
Results with score of 1:
.current, .current:hover, .line-break, .site-description, .date, #content
#body, span.namehovered, span.current-bio, #content #body #landing
```

### Future

In the future, it'd be cool to have:

* ability for file args to be directories and get all `.css` files in that dir
* colorized output:
* red = bad score
* yellow = ok score
* green = good score

Let me know what you think, @josh!