Most flexible markup for threaded comments

[lajkonik86]

I am trying to make my threaded comments as flexible and templatable as possible. I use an ordered list with the following content per list item.
How could i make it even more flexible for templating with css?
I plan to give every part of the commentfooter its own span

<li>
<a name="comment-1.0101"></a>

<div id="comment-1.0101" class="commentbox level3"><div class="spanner">
<div class="commentbody">Another reply to make things interesting</div>
<div class="commentfooter"><span class="author"><a href="#comment-1.0101">Thierry said on 29 September 2007</a></span><span class="reply"> <a href="#" onclick="replyopen('1.0101'); return false;">Reply</a><a href="#" onclick="giverating('1.0101',this); return false;">+</a>0</span> </div>
</div></div>
</li>

[Tyssen]

You don't need the named anchor. You can point internal anchors at any element with an ID (e.g. div id="comment-1.0101"). .commentfooter should be as paragraph, not divs and it has an extra closing span tag in it. What's the .spanner div doing?

[lajkonik86]

You don't need the named anchor.

Thanks didn't realize that.

commentfooter should be as paragraph, not divs and it has an extra closing span tag in it.

I thought a div would give me more flexibility than a p

What's the .spanner div doing?

Cross browser compatible padding.

[markbrown4]

I am trying to make my threaded comments as flexible and templatable as possible

I've had similar thoughts in the past - "I will add markup to the page so that I can have more elements to play with the styling - A CSS Zen Garden approach"

I generally see this as a bad idea now, and code with as little markup as possible.

- commentbox 
  - spanner ? :)
    - commentbody
      - commentfooter
        - span / span / span / span / span
      - /commentfooter
    - /commentbody
  - /spanner 
- /commentbox

That's a few too many hooks methinks

My guess is that all you are needing is:

<li>
  <h3>Simpleton</h3>
  <p>How lovely</p>
</li>

And padding is perfectly compatible - no extra div is needed.

[lajkonik86]

That is so minimalist :P

The problem is that I will want people to be able to customize the looks of their comments nicely.

So i don't know what the requirements will be and want to allow as much creativity with the templates as possible.

Thats also why the spans are there, in order to allow people to associate images with the actions such as reply etc.

[Tyssen]

Like my Mum used to say: "how long's a piece of string?"

What you've got now might provide enough styling hooks for some situations and not for others. It might provide enough hooks for a certain style for one person at a certain skill level, but not for another person who's not as experienced.

You could add as many elements as you like to cover all imagineable permutations but you gotta draw a line somewhere and I think what you've got now is enough (by the way, my comment about the extra span tags was cos I didn't bother scrolling to the right to see there was more stuff there ).

[lajkonik86]

great, glad to hear im not missing anything obvious

would the current markup allow them to switch the commentfooter and commentbody divs around? In order to show the author above the comment instead of below?

[markbrown4]

would the current markup allow them to switch the commentfooter and commentbody divs around? In order to show the author above the comment instead of below?

My amount of markup would allow an experienced coder to do that
But positioning like that takes a little know how.

So i don't know what the requirements will be and want to allow as much creativity with the templates as possible.

I find it simpler to add to a minimalist template that to try and coerce the jungle of markup to look how I am wanting. I would prefer to add a div here or there when needed rather than force everyone to use the code heavy version.

[Tyssen]

would the current markup allow them to switch the commentfooter and commentbody divs around? In order to show the author above the comment instead of below?

You can do it, but who's going to be doing the styling? Are you offering preformatted templates or will people do their own CSS? Cos if they know how to create CSS to reverse the order of the elements on screen, they're going to know how to edit the HTML template anyway.

[lajkonik86]

Ok well that would be another decision, whether to allow them to edit the html templates

complexity is as follows:
- config settings (language, captcha, rating on or of, avatar etc.)
- layout and design

Im having trouble deciding whether to allow changes to the html template
Thinking out loud:
- it might be more complicated for the people creating the templates to edit both html and css
- my javascript will break (can work around that though)
- the html could contain xss attacks (so would need to check for that)
- if they add text translation would become problematic

Then again, not having the ability to edit the html might give flexibility problems.
Think ill test a bit before choosing