Automatic HTML generation guidelines for maximum CSS stylability

Question

I'd like to ask about your experience with automatic HTML generation and what should coders consider to reach a maximum stylability? Please add good guidelines and please explain the reason for them.

I'll start with 3 points:

1. You create a div or a td or anything else with text content.. Put a span in it!

   <div><span>text content</span></div>
   

   instead of

   <div>text content</div>
   

   Reason: Sometimes you have to apply a different styling to the text content. If you can only access it indirectly by the surrounding div some things aren't possible.

2. Put BRs behind divs!

   <div id="myId">foo bar</div><br>
   

   instead of

   <div id="myId">foo bar</div>
   

   Reason: Let's say you decide to let some divs float left, you'll need to clear left after them. You can do that now with

   div#myId + br {
     clear: left;
   }
   

   And if you don't need the br, you can simply do:

   div#myId + br {
     display: none;
   }
   

   Without that appended br the floating of divs is a real hassle and you can't properly align the content.

3. This 'should' be a no-brainer but still: Use classes and IDs, so that you can properly access every item in CSS.

Okay, that's what I found out, now it's your turn to extend this collection of guidelines :-)

Answer 1

point #1: if neither the DIV nor SPAN have a class or ID, then they are equally difficult to style. I'd never add extra markup for the sake of CSS, either. I wouldn't suggest this particular method.

point #2: Same as above. I despise systems that put extra markup in the HTML.

point #3: Yes. I definitely agree with that one. Granted, that's easier said than done.

I'm not sure what kind of 'automatic generation system' you are creating, but let's assume it's a CMS. As such, I'd recommend the following:

1. The CMS should not be a design management system. It should manage content.

2. The CMS should not really create any HTML (other than semantic markup of the content itself such a paragraph, list, blockquote tags, etc). The HTML should be created by someone managing the templates. There should be page templates, section templates, and content templates...all editable by a developer.

Wordpress does this well, for example.