Ask HN: Review my app, UnusedCSS.com | Hacker News Reader

Ask HN: Review my app, UnusedCSS.com

unusedcss.com

10 pointsmnemonik29 comments

Works well, but I need it to consider the whole site.

For instance, I fed it the root URL, and most of the unused selectors it surfaced are in fact used on other parts of the website.

Indeed, this works fine for pages which just contain CSS for that specific page but I'm not sure how often that actually occurs in the wild. And if you've got just a one page site then surely managing the CSS for that isn't a big issue?

For most of the sites I've worked on, I bundle up the CSS into a main stylesheet and then often one specific stylesheet per-section. If this could spider the whole site and generate a report on that then it would certainly be more useful.

Thanks for the feedback!

I halfway implemented traversing whole sitemaps, but never finished because the waits were getting so long that I would need to move away from django and towards something like twisted where I could incrementally update the results and work asynchronously.

Would you rather give a sitemap or a representative list of URLs?

I am the same

I would prefer it to work along the same lines as http://validator.w3.org/checklink where it just automatically spiders

It's cute but I think the ramifications for left over CSS are pretty insignificant except in some very rare edge cases.

It would be cooler if you could feed it a CSS file and have it return a better version of it, well and concisely formatted without redundant declarations, using shorthand etc.

That would take this from something that doesn't really need doing - like css minification in a world where gzip exists, such as our world - to something that would show people a better way to produce CSS and still retain that original functionality if you're convinced there's a need for that.

I think there are 2 main benefits:

1.) Maintainability. Promote re-use of selectors and organization of your css files. I find that CSS gets sloppy very quickly and there will be lots of non-DRY, redundant selectors, as well as legacy selectors that no one will ever remove because "what if something is still using it?" Your css files will slowly get larger and larger, and never smaller. This leads to the next point.

2.) Smaller file size. Less bandwidth used, faster requests. Yahoo has done a ton of research on the benefits of performant web apps: http://developer.yahoo.com/performance/rules.html

It would be helpful if you could create a CSS file with only the used CSSed and allow the user to download and save it.

Maybe even optimize the file by removing all spaces, tabs, line breaks.

That's a great idea! Thanks!

I built this because the only existing solutions to finding old legacy CSS that aren't being used anymore that I could find are Firefox plugins. Dust Me Selectors and CSS Usage being the two big ones.

I found that I am often at a machine without Firefox, or I don't want to install an addon (or addon for an addon in the case of CSS Usage) just to quickly find out what CSS selectors aren't being used on a given page.

All feedback is very welcome!

It would be nice if you could link to the results or query a URL with param so you can send it to someone else (like the designer who created the css).

Will do, Thanks!

(I left this as a feedback on your site as well).

I agree... works well. But in the case of http://inclojure.com/ it says the URL is broken.

On a positive note, I tried it on 2 other sites, and it works really well. Great job.

Hmmm, you are right, it isn't working for http://inclojure.com/ (now with a www).

I will look in to it right now, thanks for the feedback!

Would pay for something like this, if it was solid, always up, and didn't require a plugin.

Does this require a plugin? I missed it if so.

No, it does not require a plugin.

The other solutions to this problem that I have found _do_ require a plugin in the form of Firefox addons.

This was my main motivation for creating the site; making it accessible from wherever I happen to be, regardless of my current browser and browser plugins.

Like others have said, the ability to add multiple URLs so that it can scan the entire site (or better yet, have your code follow the links a few layers deep to discover the pages itself) would be immensely valuable.

Thanks for the feedback!

Of the following, what would you prefer?

  * Ability to enter a sitemap that would be scanned
  * Abililty to enter multiple, representative URLs directly
  * Or your idea to automatically follow links N layers deep

On my site, following N layers would take you to a lot of identical pages. If you site could recognize that they are identical with respect to their CSS, it would save it a lot of energy.

Identical from a CSS styling point of view or just multiple links to the same URL?

I think this is a great idea for an app.

If I could make one suggestion, it would be to ignore some common CSS reset and CSS framework stylesheets to lower the number of false positives; when I scan my site I get a lot of unused selectors from these files, and you would detect them reasonably reliably just by looking at their filenames.

Things like Yahoo's CSS reset?

Right now you can click on the arrow next to a stylesheet's name to hide it. Would you want to be able to completely remove it from the results, rather than just hide it?

It errors out on many pages of my personal site, including the home page: http://vi.to/

I'd guess it doesn't like the inline data: URL I use for an alternate stylesheet.

I would hide the feedback form with a display:none instead of JS. It looks odd when loading, when half the homepage hides once the JS loads (even with Chrome).

I will have to think about how to do this in a nice way. Right now everything is progressively enhanced, so even if you turn off JS, you can still use everything. That's why it hides it after-the-fact. Ideas?

That is likely the best way to do it for larger, general purpose sites. I just figured since you're providing a tool to web developers, finding someone who doesn't use JS is very rare.

just hangs forever on some sites.. Tried far too many times.

Can you give me an example or two of the sites that made the app hang?

Thanks.

Try www.heymath.com

Reply on news.ycombinator.com