Ask HN : How to keep my CSS clean?
Is there something that goes trough all your html (or .erb or whatever) and tell me which CSS element is unused?
Is there something that goes trough all your html (or .erb or whatever) and tell me which CSS element is unused?
Best approach I've found to keep it all under control and avoid getting in a mess in the first place is to use SASS (http://sass-lang.com/) & Compass (http://wiki.github.com/chriseppstein/compass).
The 960.gs helps me keep my css clean because I'm able to establish the bulk of the site design using predefined grid classes as opposed to custom defined classes which are tightly coupled to a particular layout.
This may not be as popular but I also started writing my styles on a single line (eg #header {height: 100px; background: silver; padding: 0 0 20px 0;}). I've found it much easier to scroll through my stylesheets and find the classes I'm looking for.
I would recommend using code folding over single line CSS which can easily get cluttered. By using cold folding you get the benefit of having one line per style, but you can jump down into a particular declaration and still have the readability of multiline styles.
Just found a firefox tool that helps with this: http://www.sitepoint.com/dustmeselectors/
When you're done, you can export the unused selector list to a CSV file. Each column is a style sheet, and each row is a selector.
It's a lot faster than doing it by hand, but it does assume that you can see everything that anyone can see. At the very least, you can take that list and search your files for <div class="crazyselector"> and see if it is truly never used. If it's the only occurance, maybe you can refactor that HTML to use a more common selector.
So far I haven't found anything more reliable than simple grepping. This can range from completely awesome if your class/id names are unique in the codebase, to painstakingly tedious if you have generic class names that match your controllers, models, libraries and everything else. However given all the places that a CSS name could hang out, it has proven to be the most robust.
The reason we have 5000 lines of well-organized CSS instead of 10000 lines of poorly-organized CSS is thanks to some heavy refactoring that we have done after most of the pages had been built. Don't underestimate the cost of building a unique brand. We can't all get by on 37signals style.
WTH does this mean in this context? Not being snarky; I can't figure it out for the life of me.
However in our case we had a graphic designer who had never done anything on the web before. This may seem like an insane way to design a web product, but the result is that we ended up with a brand that was entirely unique on the web, and this gave us a real tangible benefit when it came to attracting our initial userbase and business partnerships.
In the end the same functionality could have been built and reasonably well styled with 1000 lines of CSS, but we purposefully chose to go the longer route for branding purposes.