3 ms·

Ask HN: Review my app, UnusedCSS.com

10 points by mnemonik 17y ago

mnemonik 17y ago
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!
tptacek 17y ago
Would pay for something like this, if it was solid, always up, and didn't require a plugin.
- qeorge 17y ago
  Does this require a plugin? I missed it if so.
  - mnemonik 17y ago
    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.
qeorge 17y ago
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.
- rlivsey 17y ago
  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.
  - mnemonik 17y ago
    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?
    - daleharvey 17y ago
      I am the same I would prefer it to work along the same lines as http://validator.w3.org/checklink http://validator.w3.org/checklink where it just automatically spiders
raju 17y ago
(I left this as a feedback on your site as well). I agree... works well. But in the case of http://inclojure.com/ 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.
- mnemonik 17y ago
  Hmmm, you are right, it isn't working for http://inclojure.com/ http://inclojure.com/ (now with a www). I will look in to it right now, thanks for the feedback!
matt1 17y ago
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.
- mnemonik 17y ago
  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
  - matt1 17y ago
    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.
    - mnemonik 17y ago
      Identical from a CSS styling point of view or just multiple links to the same URL?
JonAtkinson 17y ago
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.
- mnemonik 17y ago
  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?
benologist 17y ago
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.
- mnemonik 17y ago
  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 http://developer.yahoo.com/performance/rules.html
John212 17y ago
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.
- mnemonik 17y ago
  That's a great idea! Thanks!
duck 17y ago
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).
- mnemonik 17y ago
  Will do, Thanks!
vijaydev 17y ago
just hangs forever on some sites.. Tried far too many times.
- mnemonik 17y ago
  Can you give me an example or two of the sites that made the app hang? Thanks.
  - vijaydev 17y ago
    Try www.heymath.com
dmix 17y ago
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).
- mnemonik 17y ago
  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?
  - dmix 17y ago
    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.
vitovito 17y ago
It errors out on many pages of my personal site, including the home page: http://vi.to/ http://vi.to/ I'd guess it doesn't like the inline data: URL I use for an alternate stylesheet.

10 points by mnemonik 17y ago

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!

tptacek 17y ago

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

qeorge 17y ago
Does this require a plugin? I missed it if so.
- mnemonik 17y ago
  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.

qeorge 17y ago

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.

rlivsey 17y ago
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.
- mnemonik 17y ago
  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?
  - daleharvey 17y ago
    I am the same I would prefer it to work along the same lines as http://validator.w3.org/checklink http://validator.w3.org/checklink where it just automatically spiders

raju 17y ago

(I left this as a feedback on your site as well). I agree... works well. But in the case of http://inclojure.com/ 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.

mnemonik 17y ago
Hmmm, you are right, it isn't working for http://inclojure.com/ http://inclojure.com/ (now with a www). I will look in to it right now, thanks for the feedback!

matt1 17y ago

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.

mnemonik 17y ago
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
- matt1 17y ago
  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.
  - mnemonik 17y ago
    Identical from a CSS styling point of view or just multiple links to the same URL?

JonAtkinson 17y ago

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.

mnemonik 17y ago
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?

benologist 17y ago

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.

mnemonik 17y ago
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 http://developer.yahoo.com/performance/rules.html

John212 17y ago

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.

mnemonik 17y ago
That's a great idea! Thanks!

duck 17y ago

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

mnemonik 17y ago
Will do, Thanks!

vijaydev 17y ago

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

mnemonik 17y ago
Can you give me an example or two of the sites that made the app hang? Thanks.
- vijaydev 17y ago
  Try www.heymath.com

dmix 17y ago

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

mnemonik 17y ago
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?
- dmix 17y ago
  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.

vitovito 17y ago

It errors out on many pages of my personal site, including the home page: http://vi.to/ http://vi.to/ I'd guess it doesn't like the inline data: URL I use for an alternate stylesheet.