CSS: static vs dynamic

CSS is, in its essence, a static style sheet language. CSS was not designed to work with dynamic content since its very first beginning. Normally, styles are applied when the page structure is complete, that is, when all the HTML content has been parsed. This is called initial reflow. The point is that you apply your styles by making a guess of the possible case scenarios. But, as you may guess, this is an unfeasible approach, because case scenarios on a web site are almost infinite. So CSS coders try to make CSS work in a dynamic way, for example by building up fluid layouts or using relative lengths. This is fine, but it works as long as the case scenarios fall into a predictable series of use cases and tests. Web 2.0 has its focus on user-centric content and this is the worst case scenario for CSS. Nothing is more dynamic and unpredictable than users.

For example, you have built a comment list using a background image set on each blockquote element. Then you vertically center the image at the 50% of the height of its container. What would be the ideal dimensions of the background image? That depends on users or, more precisely, on the amount of content inserted by a user. A comment with a single word is different from a comment with ten lines of text. This is a truism, surely, but that's exactly what happens when you have to think in a dynamic way. We all have been there before: we get our PSD template, we extract all its assets, we build up a CSS layout, we test it as a static HTML page, and then a dynamic site will use our CSS template in the wild, that is, in a dynamic context.

This is the wrong way to approach to CSS layouts. The key is: think dynamically, test dynamically. In other words, we should rethink the entire development process behind a CSS layout. We should try to work in a dynamical environment, avoiding the temptation of testing our pages as static content. Dynamic should be the word all our work is based on.