12-Step Program for CSS’oholics

by James Cook on August 4, 2010

Hi, my name is Jim and I’m a CSS’oholic.

I remember my first floated div. It was heaven. Soon I escalated to CSS rollovers buttons and list-based menus. I was on top of the world!

And then, the downward spiral began. Before I realized what was happening, I found myself watching the sun come up over the lonely back alleys off the information superhighway as I hunted for one more CSS fix that would finally get my pixels aligned.

And then a friend took me to a CSS Anonymous meeting. I was skeptical at first but, thanks, to CA I’m on the road to recovery. Sure, I still face the occasional dawn with a mouse in one hand and an empty can of Red Bull in the other. I know I’ll always be a CSS’oholic but with the help of the 12 Step CSS Anonymous program at least I’m getting more sleep.

12 Steps to Conquering CSS’aholism

When faced with an impossible deadline and uncooperative CSS.

  1. Just say “NO!”  Why waste time making your page look perfect in Explorer 6? If the user cared what your pages look like, he wouldn’t be using IE6.  
  2. Back up: Now. And now! And NOW! When you stretch the limits of your CSS knowledge, the code will probably break before you do. When that happens a backup means you’ve only wasted time not trashed your site.
  3. Search: OK, I know Google is probably the first place you turn when faced with a CSS issue but do you use it effectively? Here are few suggestions:
    • Construct your query carefully: You’ll get better results and the very process of refining your query may lead to the solution.
    • Focus on newer results: Web design has come along way in a very short time. By limiting your results to the last year you can eliminate a lot of once good advice that’s gone bad.
    • Bookmark sites that come up regularly: There’s a reason you keep stumbling across sites like W3.org and W3schools.com.
  4. Exploit forums: Online forums are full of CSS enablers. I try to be active in forums where the people are knowledgeable and help and usually, when I need help, it’s offered.
  5. Tweet: It seems crazy to think you can get the answer to a complex question in the 140 characters Twitter allows but:
    • Distilling your issue into a question of 140 characters helps you focus on the real problem.
    • You don’t need THE answer; you just need the idea that leads to it.
      Of course, if you’re not active on Twitter, when you desperately need help probably isn’t the time to get started.
  6. Take a time out: What works for kids, works for adults. A brief break can help you approach the problem from a fresh perspective.
  7. Compare your code to code that works: If you’re customizing standard code (like Dreamweaver’s built-in Spry) invest in software such as BBedit (Mac) or TextWrangler (PC) that allows you to compare your copy of a document to a virgin, working copy. Then you’ll only need to worry about the code you know has changed.
  8. Get the big picture: Does your issue occur on one page or many?
    • If your pages share a fixed structure and only one page is broken, the problem is probably in the unique content of that page.
    • If the problem occurs throughout your site or in a particular section of your site then focus on the elements that are common to those pages.
  9. Narrow your focus:
    • Where’s the break? If everything after X is whacky, the problem probably occurs at or before X.
    • Which browser(s): Does the problem occur in one browser (think Internet Explorer) or multiple browsers? Since each browser has its own quirks, pinpointing the problem browser can help you locate a solution.
    • Validate: I’ve got nothing against a bit of invalid HTML or CSS if things still work but a validator can quickly locate unclosed tags, syntax issues and other potential problems.
  10. Start over: It’s tough to abandon several hours of work and start over or revert to a backup but, if you’ve spent several hours trying to solve a problem and haven’t, then you’ve probably spent those hours making it worse. The second time through the process you’ll know the issue (if not the solution) and, by working methodically and checking for the problem after each step, you’ll be able to pinpoint the problem if it happens again.
  11. Break something else: Sometimes it’s simpler just to accept that you can’t fix every issue and adapt your design accordingly. For instance, if you can’t get rid of a pesky border on the left, try adding one on the right.
  12. Write it down: When you learn a new bit of code, develop a new technique or discover a new resource, write it down. That way, the next time you fall off the CSS wagon at least at least the answer will be close at hand.

Comments on this entry are closed.

Previous post:

Next post:

Home | Make Contact