Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Mincss "clears the junk out of your CSS"

peterbe.com

Post reply on HN
Print view View original

21–30 of 52 posts

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

#21

Post by EnderMB »

flog wrote: post #19
laurencei wrote: post #8

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

This is an idea I am currently working on, similar to SitePoint's old "Dust Me Selectors" plugin for Firefox, but running in the background for all selected sites until a set amount of time or the user is happy that they have exhausted all dynamic functionality on the site.

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

#22

Post by laurencei »

EnderMB wrote: post #21
flog wrote: post #19

Earlier quoted context omitted.

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.

This is an idea I am currently working on, similar to SitePoint's old "Dust Me Selectors" plugin for Firefox, but running in the background for all selected sites until a set amount of time or the user is happy that they have exhausted all dynamic functionality on the site.

oh cool - i'm very interested in this. Can you please email me? My email is in my profile.

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

#23

Post by ralph »

Firefox will show me what CSS applies to each entity and what attributes result. I'd like something that gave me the same information textually so I can tweak the CSS, e.g. simplifying specificity without intending to change the end result, and check for changes, e.g. diff(1). Anyone know of such a thing?

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

#25

Post by ganarajpr »

EnderMB wrote: post #21
flog wrote: post #19

Earlier quoted context omitted.

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.

This is an idea I am currently working on, similar to SitePoint's old "Dust Me Selectors" plugin for Firefox, but running in the background for all selected sites until a set amount of time or the user is happy that they have exhausted all dynamic functionality on the site.

How about running it as a plugin or something for a suite of functional specs for the website ( if it has one! ). Functional spec's by definition should run all the paths that a user can take, so it should give a pretty good idea of the css that is used.

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

#27

Post by glenjamin »

Heh, I had pretty much the exact same idea in december as well, and produced a system based on Compass/SASS which does a final pre-process step before CSS output, which attempts to remove any unused rules.

Managed to get 100kB of CSS down to about 2kB for the single-page site I was using it on.

Like the author here, I didn't get into exploring how to make this work effectively on a large site with a number of dynamic pages - the only thing I added for this type of approach was to provide a whitelist.

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

#29

Post by oyvindeh »

junto wrote: post #28

I've been looking for something like this, but with support for styles added using JavaScript. I have found anything yet, and it doesn't appear that this would do it either?

I started a similar project before Christmas. It has a whitelist feature, where you can list styles added using JavaScript. It may not be the perfect approach, but it's at least one way of getting around the problem.

It also supports lists of HTML and CSS files to search through. It can perform login, find duplicates, list used rules as well as unused rules, as well as count how many times each rule is matched in the markup.

Requires Node, can be installed with npm.

https://github.com/operasoftware/ucss

Post reply on HN