Refusing treatment for a slight case of DIVitis
The best thing I came across about CSS in 2011 was Nicole Sullivan’s Webstock presentation, Our Best Practices Are Killing Us. Reading the slides, I had one of those cool experiences characterized by repetitive head nodding and smiling, where you realize that someone is perfectly articulating a thought that’s only half formed in your own head. And the thought in question was this: Our noble pursuit of the leanest possible markup is making our jobs harder and our work less maintainable. In short, we’re making our content modules work way too hard because we feel bad about adding markup (divs in particular) as a hook for presentation.
To illustrate what she means, here’s a scenario I feel like I come across all the time: The client wants any paragraphs mentioning their new videos to have a special video icon on the left hand side and a light blue background and rounded corners. You check the markup, and make a decision to add a .video-content class to your stylesheet. Something like…
.video-content { padding:15px 15px 15px 100px; background: url(/cool-video-icon.png) no-repeat 2% 50% #e3f8fe; border:1px solid #666 }
You then apply this class to any paragraphs that talk about your client’s videos, and you feel pretty good about it. The client’s happy and you imagine a web standards guru like Eric Meyer would be happy, too, if he were only watching you work. His blue eyes would twinkle, perhaps, as he slipped you a complimentary pass to his next speaking engagement in Honolulu.
Your new .video-content class applied to a paragraph
Then, the rub. The client comes back a month later, complaining that the video content just isn’t standing out enough. He or she would like a heading to be grouped in with any video content that says, “Check out our video!” So now, your previous solution doesn’t work anymore. Still trying to win the imaginary approval of Mr. Meyer, you sigh quietly, and create a new class for the <h2> called .video-heading. To this class, you assign the same light blue background and the two rounded corners that top the section. Bit of a pain, but no big deal, really. Just another day for a front-end developer who truly cares about web standards.
Your new markup - the heading takes the styles for the top rounded corners
However, a week passes, and the client still isn’t getting enough video views. The CEO feels that the paragraphs describing the videos are too long, so a request comes in to split them up into lots of little paragraphs. “Sure!”, you say. So you make the change to the markup, and…
So you probably see where I’m going here. At this point, if you have any sense, you break down and add that stupid DIV you’ve gone out of your way to avoid in your quest to be pure in your separation of content and presentation: Nicole’s point (if I understand it correctly) is that equally important is the separation of “tasks” within your CSS, even if it means adding a little extra markup to keep things maintainable.
Right now, I’m working on a really fun site/app here at 12 Spokes. It’s a reading/content-centric kind of thing I can really see people using on a tablet on the couch at night, so I decided to be trendy and make the front-end 100% responsive to the width of the device—whether you’re on a smartphone, a Galaxy, an iPad, or whatever, the layout should adapt to fit your screen. However, in laying out the basic grid using percentages, I came across a couple of cases where differences in the way browsers round percentages were breaking my layout when I added padding to the grid columns. I’m not a huge math fan, so working with declarations like “padding: 3.00084%” was making my little designer brain hurt.
So I took a deep breath, tried not to think of Eric Meyer, and added a little div to my grid inside each layout column. I called this div .pad-box, and yes, all it does is add padding to any element that might need it. That’s it. My 2008-era semantic web standards self would probably hang himself on his An Event Apart lanyard if he could see this, but thanks to Ms. Sullivan, I don’t care. Yes, it’s extra markup, but it’s bulletproof, repeatable, and has the pleasing effect of making the grid’s padding uniform across the app. If I want to space things out a little, all I have to do is adjust that div’s padding from, say, 10px to 15px.
I was a Philosophy major. And because a full-time, entry-level philosopher position with decent benefits STILL hasn’t opened up over the past 10 years, I’ve ended up a web designer. I can’t complain, but sometimes I feel a little sad how little philosophy I remember from my college days. One thing I do remember, though, was that I liked Aristotle because his writing seemed practical and actually applicable to my modern life—in particular, the idea of moderation, not excess in either direction, being a key to happiness. So it is, perhaps, with presentational markup. A lot of DIVitis will kill your CSS, but a little might just make it stronger.