Ask HN : How to keep my CSS clean?

https://news.ycombinator.com/item?id=876756

by dan_sim • 17 years ago

29 24 17 years ago

news.ycombinator.com

A lot of CSS gets written and sometimes, you just delete an HTML element without deleting the CSS bound to it.

Is there something that goes trough all your html (or .erb or whatever) and tell me which CSS element is unused?

billturner• 17 years ago

Since you mention .erb, I'm guessing Rails. There was a Railscast covering this exact thing recently: http://railscasts.com/episodes/180-finding-unused-css

mikegioia2• 17 years ago

I never even really thought of this until you mentioned it. There's probably a ton of unused elements in my css.

Just found a firefox tool that helps with this: http://www.sitepoint.com/dustmeselectors/

dan_sim• 17 years ago

The problem is that a CSS selector in a rails project may be hidden to you but not to someone else. Thus, it would consider that some selectors are not used when they are by other users.

mikegioia2• 17 years ago

Ahh I gotcha, I'm unfamiliar with rails dev. Thanks.

billybob• 17 years ago

DustMeSelectors is a nice tool for some applications. Here's how you use it. Option 1: Give it a site map. It will scan everything and give you a list of unused selectors. Option 2: Load up one of your pages and tell it to scan. It will give you a list of unused selectors on that page. Go to another page and scan. It will narrow down the previously-gathered list (if a selector was unused on the first page but is used on the second page, it is removed from the list). Repeat until you've covered everything you need to.

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.

madmotive• 17 years ago

Dust-Me Selectors (http://www.sitepoint.com/dustmeselectors/) has worked for me along with getting organised in CSSEdit (http://macrabbit.com/cssedit/).

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

bradgessler• 17 years ago

I can't say enough good things about Sass. Compass is pretty sweet too.

reidman• 17 years ago

Seconding this. Just started using it last week, learned everything I needed to know in a distraction-filled day or two. Any CSS pro could pick up HAML/SASS in a matter of hours, if not less.

devin• 17 years ago

CSSEdit is a Godsend. Also, using Compass = pure win. I use it for all of my projects nowadays.

perezd• 17 years ago

I use sass/compass everyday, changed the way I write CSS.

proee2• 17 years ago

I've started using the 960.gs grid system to design sites and it allowed me to reuse more style sheet code therefore reducing the total lines of css.

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.

antidaily• 17 years ago

Yes! I'm a huge fan of 960.gs and also Blueprint. Both allow me to focus on aesthetics as opposed to, say, how to make a 4 column layout work in IE6. It's probably cut the time it takes me to layout a page design in half.

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.

proee2• 17 years ago

Yes, I'm a big fan now of throwing all my css for a class or id in a single line. The same dang rules are in all the classes or ids, so it's not that big of a deal to look across the line and quickly modify say the height. This reduces the number of lines in your css file by a factor of 5x.

chewbranca• 17 years ago

I like 960.gs a lot. I've also used both YUI grids and blueprint with compass which are also great. To the OP, any combination of a grid system with Sass will make CSS much more of a pleasure to work with.

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.

mlLK• 17 years ago

+1 for you for using grids. Nowadays I try to design everything for YUI's base CSS library (reset-fonts-grids).

dasil0033• 17 years ago

I work on a Rails site with about 5000 lines of CSS. There are spidering tools and other things that you can use to scan for the existence of a class, but I think those tools are often dangerous because in most applications there are tons of pages and/or conditional content that a spider will never see.

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.

solutionyogi• 17 years ago

5000 lines of CSS? You really need to re look at how you have used CSS. I can not imagine any web application needing that many lines of CSS.

dasil0033• 17 years ago

Actually I know amazingly well what I'm doing with CSS. I've been wrangling CSS since IE4/NS4. The reason we have so much CSS is because the site was not originally designed by a web designer. It was designed page by page by a graphic designer. We have 125 controllers and over 300 templates, plus several dozen static pages. Many of these pages have custom layouts and typography.

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.

bkbleikamp• 17 years ago

I work on a giant Rails site that has over well over 5,000 lines of CSS – when you are working on custom promotions, dozens of dynamic pages, and accounting for user generated content the CSS files get long.

cloudhead• 17 years ago

Deadweight: http://github.com/aanand/deadweight/ might be what you're looking for.

synnik• 17 years ago

http://code.google.com/speed/page-speed/

Ask HN : How to keep my CSS clean?

Related Stories