Looking at the CSS Zen Garden, I can see how powerful and convenient it is to separate design and content. The possibilities seem nearly endless. One can change the style sheet and the appearance of the whole site can be drastically altered.
Let’s say I’m putting together the HTML part of a website. How do I know where to put divs, where to nest them, etc?
For example, let’s say I want to centre something on the screen: I would generally nest 3 divs together: one display:table, one display:table-cell, and one margin-left:auto;margin-right;auto which would have the content.
Let’s say I’m just doing the HTML content, but am not thinking about the design at this stage. How would I know that I need to nest together 3 divs if I don’t necessarily know I will centre it on the screen?
Or if I have one design now with HTML/CSS and I have my divs and spans all set out, what happens in 18 months if I decide to change the CSS for a completely new layout? Sometimes I will have extra divs and sometimes I won’t have enough.
Presumably it would always be better to have more levels than not enough. That way, the worst thing that can happen is that you have a few superfluous divs which aren’t styled and have no visible effect.
Is this generally a problem others have? I know CSS Zen Garden is a special case, but would you generally change the HTML code considerably when you change the corresponding CSS?
I’ve worked in web development for many years, and over here in Reality things are a bit different from Theory: There is no such thing as separation of content and presentation. You’ll always end up sliding in additional
divs.You better follow the YAGNI principle. Don’t worry about your CSS as you’re writing your HTML. Come back later and do the neccessary adjustments.
As for Zen Garden, you’ll find a comment in the source code: