
Ask HN : How to keep my CSS clean? - dan_sim
A lot of CSS gets written and sometimes, you just delete an HTML element without deleting the CSS bound to it.<p>Is there something that goes trough all your html (or .erb or whatever) and tell me which CSS element is unused?
======
madmotive
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
I can't say enough good things about Sass. Compass is pretty sweet too.

~~~
reidman
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.

------
billturner
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>

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

~~~
chewbranca
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.

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

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

~~~
robin_reala
Well, that’s standard web app dev really. You have different users, and they
have different pages available to them.

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

~~~
dasil003
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.

~~~
wmeredith
"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.

~~~
dasil003
If I was building the site from scratch I would build it in such a way to
minimize markup as CSS. I would probably do minimal Photoshop mockups and
iterate rapidly in HTML/CSS, and the design would be very much driven by
efficiency of the markup and CSS.

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.

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

------
synnik
<http://code.google.com/speed/page-speed/>

