Performance: Where Do We Draw the Line?

I endorse the majority of the content of the following presentation:

The Top 5 Mistakes of Massive CSS

Dissension!

It’s not even so much that I disagree with what she’s saying up there. I just apparently have a slightly different comfort level than she does when it comes to altering my work flow for the sake of performance gains. The only point I really have exceptions to is the idea of avoiding IDs in CSS.

I think IDs make perfect sense for major page areas like #footer or for elements that are truly unique like #logo. But I’m not gonna throw the baby out with the bathwater. She’s right that there are trade offs in using IDs and we should be aware of them so that we can make informed decisions.

It only took me 159 lines of CSS to find a use of an ID that makes me question the sanity of my former self. Applying a class to objects using the same design pattern would be more elegant in that situation. I probably have a dozen or so more of those I can clean up when I find the time (HA!).

Case in Point: Facebook

The primary case study in the above presentation is Facebook. Here’s some CSS from Facebook. I see around 20 instances of IDs used in selectors; stuff like #content and #pageFooter. Even her primary example doesn’s practice what she’s preaching with full on zealotry.

We are quick to forget that presentations like this are designed for oral communication. Nicole wants the people in that room with her to leave the conference with a few big ideas stuck in their minds. But it gets recorded and published as a video. That changes the medium. The medium is the message. So the audience expectations change. We non-attendees fault the speaker for presenting things in absolute terms. We expect video content to at least pay lip service to the fairness doctrine. But that’s really not fair.

Presentational Class Names

Nicole doesn’t spend a lot of time on this, but she mentions it in passing, so I’ll take a moment to get up on this particular soap box. My biggest problem with stuff like object oriented CSS and YUI Grids is presentational class names. That clashes with philosophies like the separation of content, style, and behavior or progressive enhancement that I’m not willing to sacrifice. And not just because Zeldman told me so.

I honestly believe these ideals bring value to the work I do above and beyond simple efficiency. That probably has something to do with the fact that I work in-house. The few client based projects I’ve done over the years tend to get junked up with presentational markup a couple hours after the client takes over anyway. If that was the only sort of work I ever did, I’d probably be in love with Blueprint. I can see the value of such frameworks for quickly producing a high fidelity prototype. But just like a mechanical engineer wouldn’t put a part produced by a 3-D printer into a final product, I wouldn’t put a CSS framework into production.

But that’s an informed decision I’ve made for myself. Your millage will vary. Just try to keep yourself up to date and consider the trade offs so that you can make your own informed decisions.