Hey just fyi, I didn't develop this, just found it online and wanted to share here. I'll let the developer know.
Thanks for sharing.
Mincss "clears the junk out of your CSS"
41–50 of 52 posts
Re: Mincss "clears the junk out of your CSS"
#42Not very sure if it good tool, for sites with one css file applying to all pages. Very possible, some css rules are only used in 1 or 2 pages.
If you CAN use it for one page at a time, excellent. If not, you have to be more careful.
Here's an example of using it on just one page at a time http://www.peterbe.com/plog/mincss-in-action
Re: Mincss "clears the junk out of your CSS"
#43I am using the CSS Usage extension [1] for Firebug as a tool for this. Quote: How does it work? - Open up the first page of the site you want to check and press the "Scan" button in the "CSS Coverage" Firebug tab. - In case of a rich (Ajax or DHTML) site, open up as many divs/popups/tabs in the page as possible and press "Scan" again. - Visit other pages of your site and press "Scan" again. Each time you press "Scan"…
That looks really cool! I'm impressed. That looks like a great tool for manual inspection when there's a lot of Javascript and conditional loading at play.
I installed it.
Re: Mincss "clears the junk out of your CSS"
#44The problem I have with these CSS mini programs is that a 'dynamic' site might not always load the css on each page, unless under certain specific circumstances. i.e. what about ajax calls that result in a new div showing? or a responsive CSS file with media queries depending upon the size of the screen?
How about running it as a background to the website, over say, a month, at the end of which you'd have pretty good confidence that you'd have hit all paths.
Yeah, you could have a proxy that saves the whole HTML with its URL for every hit.
Then run an analysis after a couple of days and you should get a pretty good idea.
Re: Mincss "clears the junk out of your CSS"
#45I wrote something simliar a while back called CSSess[1]. It's entirely JS and runs in the browser. It's based on yet another project called Helium[2]. The primary difference is that it crawls your site and checks over multiple pages. This is a must have feature for pretty much all sites. I've been meaning to port it to node and run it with a headless browser. Contributions are always welcome. 1: http://cssess.com 2:…
Have you considered combining it with a headless browser, like phantomjs, or with node.js + jsdom (a js based DOM that can run jquery)?
Re: Mincss "clears the junk out of your CSS"
#46To echo other sentiments on this page, how does this work with a one page, ajax application? The other issue, is that it is all to often that user events trigger the adding, subtracting or refactoring selectors. How does this handle these scenarios?
Sorry for having to say this, but read the article. It explains there the predicament of using (or rather, not using) Javascript and/or complex AJAX.
Re: Mincss "clears the junk out of your CSS"
#47This looks a lot like https://github.com/begriffs/css-ratiocinator
Re: Mincss "clears the junk out of your CSS"
#48Too bad I didn't catch this while it was still on the front page.
I wrote Helium CSS a few years ago, https://github.com/geuis/helium-css.
There are many problems with the approach being taken with MinCSS that are reflected in how Helium was constructed.
1) Server-side parsing is brittle. Using regex's for this is a no-no. Helium uses document.querySelector in the browser to really test if a selector matches or not. It even has Sizzle for older browser support.
2) Different css is used to target different browsers, or at least different capabilities. Running this server-side doesn't tell you which browser some totally valid css is meant to be used for.
3) Removing un-matched css rules by default is a no-no. Again, tools like this can be clever but they're never smart. It takes the engineer's eye to say, "This is something I actually need to keep" or "Yup, remove this".
4) Helium works in the browser. This lets you easily run it across multiple browsers that you need to support.
You could make a headless browser that uses Helium, but you're going to be limited to Webkit (phantomjs). Its a thought I've had, but never really thought it was worth the trouble of building such a limiting system.
I encourage anyone who needs a versatile tool to try Helium. Feel free to contribute patches and stuff.
Re: Mincss "clears the junk out of your CSS"
#49This used to be common practice for front-end developers, back when Firefox was the most popular browser: https://addons.mozilla.org/en-us/firefox/addon/dust-me-selec...
Re: Mincss "clears the junk out of your CSS"
#50A few years ago I wrote a python script which does this and more. It inlines the CSS to the page and reduces it to only the used CSS rules [1]. Additionally, my version can also inline the page images as base-64 encoded blocks. Cheers! [1] https://github.com/jaytaylor/python-inlineify-html
BTW, I like your wget.py. Did you write that? I suspect I've seen it before.
Thanks! I did write it, and I think I've also seen somebody else's "wget.py" in some other python project before, though I can't recall where. At any rate, I've found it an extremely useful tool in a multitude of different contexts.
Here is a link to my latest version of it:
https://gist.github.com/4596861
At this point it has become less simple and more versatile.
Enjoy!
-Jay