A set of utilites for keeping CSS files and usage in check.
The easiest way is to use NPM:
$ npm install csskeeper
Master villain or just a selector skeleton keeper?
sceletor command is an entry point for the features of CSSKeeper.
$ sceletor COMMAND [...]
The available commands mainly work on local HTML files. While this might sound unuseful at first, I assure you it is not. You just have to take an initial step before: run webtests on your webapp and save the live html states.
You can do this with several tools, including WebDriver (Selenium 2) and Zombie.js. (Or for a one-off (or a zen master of rituals) just by browsing and saving the html of interesting web page states.)
With this in mind, consider the following features of CSSKeeper's
$ sceletor tree HTML_SOURCE_GLOB
$ sceletor tree 'webspecs/build/screenshots/**/*-state.html'
Parses html files and prints out a tree representing the structure (css-selector style).
Shows the frequency for how many pages a specific subtree appears in. Can "anonymize" generated ID:s.
TIP: View the output in Vim with these settings:
setfiletype css set shiftwidth=2 foldmethod=indent
$ sceletor usage HTML_SOURCE_GLOB CSS_GLOB, ...
$ sceletor usage 'webspecs/build/screenshots/**/*-state.html' webapp/src/media/css/*.css
This parses the CSS, extracting the selectors, then loops through the HTML files to scan for used CSS selectors. When it's done it prints out a list of unused selectors per CSS file.
See the source.
CSSKeeper uses the following packages for all the heavy work:
And of course, Node and CoffeScript.