Since my job is mainly PHP and MySQL development, I don’t do a lot of theming. I actually like coding CSS, but we have a design team for that. For this blog, it’s actually something I need to think about. I’ve done a lot of CSS coding, but recent events at work have left me frustrated with legacy code, thus sparking this post. So getting to the point: CSS is not an art. Cross-browser CSS is not something one intuitively picks up and starts playing with, it is a language, and to be successful at it you need to know what you are doing.

The key concept is the possibility of writing unsuccessful or bad CSS. The art is drawing up what the page is to look like—concept art, or as some call it “mocking up” a page. CSS is the tool used to get the page to actually look and function as intended, and in every browser. I believe a lot of amateur web developers do not realize the importance of understanding both the CSS specifications themselves and how each CSS command will affect each web browser.

To further my point, this week I’ve been working with more legacy code which has CSS sprinkled all over, and always as an afterthought. This itself is not necessarily bad, as sometimes the importance of getting something semi-functional (or to a state where your boss stops yelling at you) necessitates ignoring certain parts of the process. In this, Internet Explorer 7 was forgotten about and somehow hovering over a certain set of <span> tags makes large parts of the page shift a few pixels back and forth. In an extreme case, it would hinder someone from using the application and potentially cost the company money—again an unacceptable outcome.

Having been dealing with CSS for a number of years now, I feel like I’ve learned quite a bit about how each browser treats different CSS attributes, but new web technology is embraced at a quick pace, and I still find new awkward Internet Explorer rendering engine bugs on a consistent basis. But at the least, having an understanding of what CSS was built to do goes a long way.