Mincss "clears the junk out of your CSS" • Hacker News Board

Re: Mincss "clears the junk out of your CSS"

#31

Post by deanclatworthy » Tue, Jan 22, 2013, 11:52 AM UTC

sarwarbhuiyan wrote: post #24

So if I have a large site driven by a web content management system and each page uses different parts of the css, how can we leverage this? Does it mean we have to generate different css files for each page? or have a dynamically generated css file for each page?

You can't. The only way for this tool to be of use is if you have a tiny amount of pages that you can run it against.

Re: Mincss "clears the junk out of your CSS"

#32

Post by deanclatworthy » Tue, Jan 22, 2013, 11:52 AM UTC

SitePoint made an extension that does this years ago. It will try and scan your whole site too, making it a bit more useful than this: http://www.sitepoint.com/dustmeselectors/

Re: Mincss "clears the junk out of your CSS"

#33

Post by esamek » Tue, Jan 22, 2013, 1:31 PM UTC

To 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?

Re: Mincss "clears the junk out of your CSS"

#34

Post by joshstrange » Tue, Jan 22, 2013, 2:01 PM UTC

esamek wrote: post #33

To 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?

This is exactly the point I was coming to make. I like the idea of Mincss, I have even considered making something like it before, but the problem is that if you are adding and removing dom elements with JS then I doubt this program would be able to correctly identify them all and would accidentally clear out CSS that your site needed.

That said, I am sure that static sites/non-JS intensive sites might be able to use this.

Re: Mincss "clears the junk out of your CSS"

#35

Post by JimWestergren » Tue, Jan 22, 2013, 2:14 PM UTC

I 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", the CSS files that are included in the current page are shown with the number of times the rules has been found applied on your page before it.

[1] https://addons.mozilla.org/en-us/firefox/addon/css-usage/

Re: Mincss "clears the junk out of your CSS"

#36

Post by peterbe » Tue, Jan 22, 2013, 2:35 PM UTC

jaytaylor wrote: post #5

A 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

That looks awesome! Had I known about this I might not have built mincss. Now, I can see other benefits with mincss plus it was fun writing it.

Check this out for a use case where I apply mincss and gain a massive performance boost: http://www.peterbe.com/plog/mincss-in-action

Re: Mincss "clears the junk out of your CSS"

#37

Post by peterbe » Tue, Jan 22, 2013, 2:37 PM UTC

sarwarbhuiyan wrote: post #24

So if I have a large site driven by a web content management system and each page uses different parts of the css, how can we leverage this? Does it mean we have to generate different css files for each page? or have a dynamically generated css file for each page?

Your choice.

You can feed mincss a bunch of different URLs and or different .html files and it'll work out the CSS in that. (Note: even if you feed it the raw HTML as a string you need to give it a URL) Or, you do one page at a time. However that's slow and will only be an option if you have serious caching. See http://www.peterbe.com/plog/mincss-in-action

Re: Mincss "clears the junk out of your CSS"

#38

Post by peterbe » Tue, Jan 22, 2013, 2:42 PM UTC

jaytaylor wrote: post #5

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

Re: Mincss "clears the junk out of your CSS"

#39

Post by peterbe » Tue, Jan 22, 2013, 2:43 PM UTC

edgar_di wrote: post #11

thank you, I was looking for something like this, have to keep the label "use with caution". but great work

Yeah, unfortunately you have to know what you're doing with a tool like this. Know, as in, you need to know what's going on in your app/site.

Re: Mincss "clears the junk out of your CSS"

#40

Post by driverdan » Tue, Jan 22, 2013, 2:44 PM UTC

I 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: https://github.com/geuis/helium-css/