Skip to content
Tools for keeping CSS files and usage in check.
CoffeeScript JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
js
.gitignore
Cakefile
LICENSE
README.mkd
package.json

README.mkd

CSSKeeper

A set of utilites for keeping CSS files and usage in check.

It is written in CoffeScript, mainly for running on Node.js.

Install

The easiest way is to use NPM:

$ npm install csskeeper

The CLI

Master villain or just a selector skeleton keeper?

The sceletor command is an entry point for the features of CSSKeeper.

Synopsis:

$ 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 tool.

Tree

Synopsis:

$ sceletor tree HTML_SOURCE_GLOB

Example:

$ 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

CSS Usage

Synopsis:

$ sceletor usage HTML_SOURCE_GLOB CSS_GLOB, ...

Example:

$ 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.

Modules

See the source.

  • csskeeper/tree
  • csskeeper/cssuse
  • csskeeper/util
  • csskeeper/cli/sceletor

Tribute

CSSKeeper uses the following packages for all the heavy work:

And of course, Node and CoffeScript.

Something went wrong with that request. Please try again.