emotionalmarkup

I recently helped a colleague rebuild his site the CSS way after he’d spent hours at home trying to do it himself. This guy was no computer novice - he’s a fine python/ruby programmer and writes Linux applications in his spare time, but he just couldn’t get the whole logic of CSS and how it related to elements on the page. I understood his frustration.

Programmer: “But why can’t I just position everything absolutely so it will go where I want it to go?”

Me: “Well, you can’t. There are too many content variables - new images, longer content, relative unit margins.”

Programmer: “But I want this paragraph to go here. Why doesn’t my border stretch all the way down?”

Me: ““I don’t know. Why are all desktop cases beige? It’s just the goddamn way it is, alright?!”

[Me walks out of room in search of tea]

CSS has no formal logic because it is not a programming language but a set of rules that, when applied, describe how a structural element should be presented. There is an assumed logic in the way the rules should apply: it is logical that a padding of 20 pixels will cause the inner content of the targeted element to retreat 20 pixel towards the centre. The accepted meaning of padding tell us this just like the way sticky notes are called what they are because they stick. But in the case of CSS, the rules that we declare don’t always apply in the way that we expect due to differences in browsers, inheritance and so on. Explaining why something doesn’t work as it seemingly should to a programmer whose brain is wired to write lines of code that do exactly what they are supposed to do is challenging, but not impossible since they are all highly intelligent and get most things with little effort.

But what about a novice who is just starting their journey into the frightening world of web page development? Someone with no background in coding or the web. How to these people learn? For instance, at what point do they understand intuitively the behaviours of certain block elements and the properties that apply to them, and accept that not everything is going to work the same way? My guess is not long if they’re developing every day and have access to the internet. I think that once they get a handle of the syntax and the general lay of the CSS land, the best thing to do is to deconstruct web pages to see what is going on behind the scenes while viewing the results in as many browsers as possible (those that matter anyway).

The main complaint my friend had was that it is never clear how a change in rules of one element will affect other elements in the page and the flow of the document in general. There is no one place that will tell you what every CSS declaration does with preciseness and what you can expect to see in your browser. It’s trial and error and that’s  how we have grown accustomed to learning and developing. My own learning process was probably more drawn out than some of the precocious developers and designers going around these days, but I never once bought or opened a book on CSS - a book on CSS will never be able to tell you everything anyway. Thanks to the great bloggers and writers out there, much of what we need to know is a simple Google search away.

We who have worked with the web for more than five years know that people entering the profession have been saved some of the pain we went through to get things to look right - there are still problems, just different ones. I guess the only advantage that us oldies have over the n00bs is that we are able to put a lot of what we do into context - only because we’ve lived through cross-browser development and know exactly what those legacy IE5 CSS hacks do and that now, “they’re OK to delete”.

So I ask: how did you learn CSS and how do you keep current with what’s going on?

This entry was posted on Wednesday, February 27th, 2008 at 9:49 am and is filed under Development rants, General musings. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.