• Org FAQ
• Leadership
• Our Friends
Join
• List FAQ
• List Guidelines
• Subscribe
Happenings
• Calendar
• Meetings
• Workshops
Resources
• FAQ
• WIB & more...
Email Us!
Hotshot Oneshots
The CSS Way
or How I Made Friends with the Enemy
How many of you remember the Ms PacMan craze? Although I never got terribly good at the game, I always enjoyed dropping a few quarters in my attempts to reach that elusive third screen. But on the second screen inevitably I would get caught over and over again by the dot-crunching monsters. CSS is like that.
It lures you in with all the promise of increased design flexibility, better accessibility, layers and other neat tricks. You start off by thinking "way cool, dotted borders", you work your way up to an external style sheet that actually does control your fonts, you're enjoying yourself in fact quite thoroughly... and then to your dismay you learn that you really shouldn't be using pixels after all, the cascade starts doing weird things to your ems, and all of a sudden you are in IE 6.0 drop float hell and don't know how you got there. You start running and running, but it's never fast enough to get away from the layout monsters who catch you, chew you up and spit you out, leaving you with a sorry, "Game Lost" message and an irresistible compulsion to try it "just one more time".
Some time back a colleague told me that CSS had one late night brought her to tears. I confess: at the time I thought her to be either exaggerating or quite possibly too soft for the job, until at 3 am on a hot summer night I found my own self in a similarly agitated state. A sage, if undiplomatic, developer took the time to look at my code, proclaimed it to be useless (actually not quite the word she used), and instructed me to go back and redo everything using semantic markup. Hunh? I'd been doing HTML, PHP, MySQL, and Javascript for years; I'd paid some attention to the web standards movement, but figured I could get away with "whatever worked." Mental head slap!
Thus chastened, I packed up all of my toys and went back to work. I read and read, I lurked on lists, I coded many more sites and what emerged was... clean code. Semantic markup, I dare say. It was becoming a thing of beauty. And things got better. Clients got more demanding (yes, it's a good thing!). They wanted pixel perfection on all browsers and no, not 13 pixels but 12 pixels if you please. CSS boot camp.
To distill some pointers for those in the throes of learning CSS:
There may be shortcuts to developing in CSS: you can use the pre-defined templates in Dreamweaver; you can let your editing tool prompt you for all the values of your styles, in theory obviating the need to actually learn the style specifications; you can invest in Eric Meyer's CSS Sculptor, or Project 7 libraries, or a whole host of other pre-coded modules. But you need to put in your time in the trenches of hand coding if you aspire to full control of your CSS. As my students would attest to, in the end it comes down to some late night when you think you're going to lose your mind because IT JUST WON'T BEHAVE. At that moment you will know you have arrived. You dust yourself off, get back on that horse, and you, too, will be on your way to making friends with one of the most powerful web technologies out there today.
A postscript: To claim that I have mastered the craft would be a BFL (big fat lie). I am merely on the path: the CSS way. I hope some of these thoughts may encourage you to walk the path, too.
Some of my favorite resources and tools for CSS:
Anne Shroeder is a freelance web development consultant who has worked in the computer industry for 18 years. She has recently launched a new enterprise called Hoofprints Consulting (www.hoofprintsconsulting.com) offering CSS page builds and other back end development services to designers, emergency web fixes, and rent-a-webmaster options to small companies. She continues her staple diet of multi-lingual web site development begun under Language Works (www.language-works.com), and teaches web development at Montgomery College.
Hosted by Heller Information Services.