The CSS Ratiocinator automatically refactors your CSS and generates a
new stylesheet for your site. It works by examining your site's live DOM
in the browser and reverse engineering a new, more elegant definition
that captures styles down to the pixel.
It addresses the problem of old CSS whose styles accumulate and
contradict each other. After a certain point all CSS seems to grow only
by internal antagonism. The Ratiocinator wipes the slate clean and
provides a harmonious new beginning.
Usage
This program runs from the command line using the
PhantomJS headless browser.
- Install PhantomJS
- Clone this repo
- In the cloned directory, run
phantomjs ratiocinate.js URL - The new CSS will appear.
- (optionally) Feed output through sass-convert
Faq
Mechanism
The Ratiocinator proceeds in two phases: assessment and consolidation.
During assessment it determines which nodes will need which styles,
accounting for browser defaults and cascade rules. The browser provides
a full list of computed style for every node, and our first step is to
prune redundancies from cascaded style in a depth-first process called
"lifting."
The last step in assessment is stripping default styles. The final
style needn't specify CSS defaults, so we remove them prior to the
consolidation phase.
Next comes consolidation, where we find shared pieces of style
throughout the cleaned DOM tree and extract them to CSS declarations.
In the diagram above, the Ratiocinator will choose to output a
declaration for the styles in red before those in blue. Although there
are more blue items than red in element aside.foo, there are more red
elements overall. The red has greater "volume." Hence the Ratiocinator
will extract styles for all elements with class foo first and then for
aside elements second.
Finally the Ratiocinator detects media query width breakpoints and
samples the page style between them. It analyzes the responsive
portfolio and extracts common base-style. It outputs the base-style and
each width-specific style with appropriate media queries.
Bugs and Edge Cases
Currently, anything Phantom considers to be an invalid property, value,
or selector is discarded. This means that the following CSS...
body {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
::selection{
background:rgba(246,55,0,0.9);
color:#fff;
}
::-moz-selection{
background:rgba(246,55,0,0.9);
color:#fff;
}
Is compressed to the following CSS...
body {
display: -webkit-box;
}
This is an invalid compression. A solution is being worked on in
issue #52.
Contributing
It is currently very easy to contribute. Just find something that the
Ratiocinator does wrong and tell me. The best complaints are very
specific, preferably made into a new test and submitted via a pull
request. Luckily that's easy too:
- Find some styles that the Ratiocinator is botching.
- Think of the smallest example that will illustrate the problem.
- Add a new test by copying
test/template.htmland filling in the blanks. - Save your new test in the
test/folder. - Run
phantomjs test.jsand make sure it fails. - Submit pull request to the
bug-reportsbranch.
License
The CSS Ratiocinator is Copyright © 2012 Joe Nelson. It is free
software, and may be redistributed under the terms specified in the
LICENSE file.