This chapter is from the book
This chapter is from the book
This chapter is from the book
Why It's Bulletproof
After all of the CSS sorcery we've applied to this example, we may have long forgotten why we went down this path to rebuild this box of image, title, and descriptions. But in choosing a lean, semantic markup structure over the lines and lines of code that it takes to create this using tables and spacer GIFs, we're left with a compact and flexible unit—flexible in part because of its ease in updating, adding, or removing the content. The simplicity of the code also makes it easier for browsers, software, and even site editors to read.
You could also chalk this up as a big win for database-driven sites, where a uniform and more predictable markup structure could be reused more easily. Instead of worrying about whether the image comes before the title and description in the markup (when dealing with tables), the structure remains consistent and easily repeated in dynamic templates.
In choosing to use CSS to structure our grid-like layout, we've removed presentational code and graphic titles from the component, and in turn have gained flexibility in image placement and title/description size, style, and content.