back

CSS Rant -- 5 tips for rails developer sanity

Your app’s CSS can be a nice flower or a gigantic pus filled wart. Here are five tips I’ve picked up from working on projects with anywhere from 200 to 10,000 lines of CSS.

Use body ids

Use similar ids on every page, then style things specifically by setting the body id of a page, rather than styling things using classes or ids for each element.

This will let you quickly change styles both page by page and sitewide, while at the same time keep your html clean. While I would have to give huge examples to really argue for this, it’s definitly saved me hours and hours of time over the past few months.

Before doing this, I had bs like this:

1
2
3
4
5
6
7
8
9
10


<body>

<div id="core" class="dashboard border_bottom funky_image">
<div id="item" class="funky_item act2 g">

</div>
</div>

</body>

1
2
3
4
5
6
7
8
9


#core{}
.border_bottom{}
.funky_image{}

#item{}
.dashboard #item{}
.act2{}
.g{}

By using body ids, you can instead end up with:

1
2
3
4
5
6
7
8
9
10


<body id="dashboard">

<div id="core">
<div id="item">

</div>
</div>

</body>

1
2
3
4

#core{}
#dashboard #core{}
#item{}
#dashboard #item{}

To make this easier, I include a body_id helper in most of my apps. It looks something like this:

1
2
3

def body_id(name)
  content_for(:body_id){name}
end

1

<body id="<%= yield :body_id -%>">

This lets me do

1

<% body_id('dashboard') %>

in my views.

Be specific

I love to delete code. It makes me really happy. So, when I come across something like:

1

#underneath {}

I’m disappointed, b/c this means that I have to do a code search for where #underneath is being used. Of course, if it’s a major id that’s used on every page, I know I can’t delete it, but if I’ve never seen it before and I suspect it’s unused, then it’s really a pain to figure out if I can delete it or not.

Furthermore, it’s totally unclear what it’s for.

Instead, I prefer to be super specific about where I’m using something:

1

#content #core #images #underneath {}

While it’s lengthier to include the additional ids, it has turned out to be super useful in the long run, b/c it’s immediately clear where and what the styles are for.

While this may seem trivial, it’s super important in CSS, b/c CSS isn’t tested. Refactoring CSS is hard, because you have no easy way of knowing, for example, whether the id you’re messing with is used in some other way someplace else, where changing 690px to 700px will totally screw the layout, or suddenly screw ie7 folks. The only way I know of to test things like that is to load it up in all of the browsers. What a pain.

By being super specific about where things are used, it lets other developers know exactly where / why they have to test it in other places if they change it.

Specific styles also mean that I can a) reuse it if I need to, b) know where it’s used / not used, and c) delete it if it’s no longer used.

On projects that last more than a few months, the ability to quickly delete CSS becomes vital, as otherwise stylesheets quickly reach into infinity.

Organize coherently

I am always bummed to see stylesheets that are disorganized. In one case, I found that the styles for a single id were spread out between 6 different locaions on a 2000+ line stylesheet. This made it really hard for a developer to quickly go in and change something, because it required either moving everything together, or paying attention to all 6 locations.

To avoid this, make sure that when you add styles you are not just adding them at the bottom of the stylesheet. This will lead to pain, warts, and pus. Instead, search or browse the stylesheet for where the elements similar to the one that you are styling are.

Fuck acronyms, really

Oh my god please don’t name classes things like “mtb1” or “byb”. I have no idea what that stands for. Please don’t even name things with slightly more guessable names like “ct”, “top”, “fl”, or “trms”.

Nobody is charging you per character. While there are some reasons to have smaller names (file size, etc), imo they just pale in comparison to having readable, reusable CSS.

Is it seriously that painful to include vowels in your id names? No, it’s not. Plus, it makes your CSS not suck for people other than you, such as yourself 2 weeks from now.

Stylesheets with tons of acronyms, I’ve found, tend to be disorganized, huge stylesheets. This is because developers constantly re-code basic crap. It doesn’t matter if you have a class like “fl” (float: left), because people are just going to be too lazy to figure that out, so they are just not going to use it. You really shouldn’t have a float: left class anyway!

Reuse

It’s so painful to read through thousands of lines of CSS most of which is the same except for borders and widths and a few other things.

To avoid this, come up with basic design for all of your pages, then make clear, easily guessable, non-surprising ids for the basic elements on each page. Then use them.

Please don’t re-invent the entire wheel every page, by making your own version of all of the same elements on every other page. If you want to customize stuff, use the body id, not tons of custom classes and ids.

Avoid clearfix

Clearfix is nice, b/c it’s like “oops, my page suddenly works” when you add it in. However, it’s super addicting. Clearfix addition is easily spottable b/c on sites that are addicted there are clearfixes like every other div. Use widths and other more subtle techniques to avoid using clearfixes whenever possible.

February 21, 2009