Notes About CSS Editing

I'm doing a lot of CSS work lately. Even though I believe CSS is vastly superior to table based layout and font tags and center tags (and all that garbage people used to use), I'm hating it. The problem with CSS is that it's much too clever and meant to be much too clever. There is just no way a machine seems to be able to output meaningful CSS... so in the end it's all handcrafted. And you have to think about it. Tired of it all (I've been that for a while now), yesterday I looked at some of the options for making my life easier and thought about some of the things I could have done better...

Bad news first: There really is no CSS editor. No matter what people tell you. None of the products does much more than you can do with a simple text editor. Sure, you won't have to look up how to make something bold (font-weight: bold;), but you pay for that with endless forms of options for every aspect of styling. Clicking it all together doesn't really help.

What we would really need is a tool to help with the planning stage of CSS design: Something to help you rough out the code structure, to keep track of what elements exist and all that.

At the current project, I've made a mess of it all. I'm paying for it now, with every edit going through a minefield, likely changing something on another page I've never suspected. Also searching like crazy for every edit where I do have to make changes and which parts of the CSS file affect my current element. I've looked at some of the tools. I liked cssedit, which tells me almost everything I want to know about the current element.

But even better was the FireFox extension Firebug: This one lets me "inspect" an element, then shows me all of the CSS that affects this element. Which rules are applied directly, which are inherited, which are inherited and overridden. This helps a lot.

Apart from that it comes down too this CSS design strategy:

• learn CSS well, there really isn't a tool that will help you with the thought process; if you have to slap a class on everything, then you're not there yet
• design top-down, main layout elements first, small stuff later
• try to go through your layout sketches, identify stuff that is similar and try to find suitable class names for these - helps a lot in making the structure obvious
• work with standards compliant browsers first, put IE "fixes" into a separate CSS file (included with conditional IE comments) later
• avoid all the "IE hacks", hacks in general, floats, clearfixes, etc. like the plague - you will cry yourself to sleep for nights on end for every time you use these, so better keep it as low as possible
• while we're at it: everybody is shouting at tables, but keep in mind that if your data is really tabular, then use a table... that's what they were meant for!
• if you're stuck with stuff "overlapping" (different kind of elements being lumped together under the same styles), eat the bitter pill and clean up your CSS bringing related stuff together, eliminate special cases as much as possible, use special classes (and sometimes IDs) on outer divs if you have to