Иерархическая система комментариев

Question

Я занимаюсь дизайном интерфейса и работаю с несколькими программистами на бэкэнде прямо сейчас - процесс, который мне незнаком.

Мы пытаемся создать систему для комментариев с иерархией для ответов. Я думал, что самый простой способ стилизовать разные уровни - это использовать n-й дочерний и вложенные списки, но я не могу полностью обдумать, как это сделать. Идеи?

Answer 1

Как сказал Ян, n-й ребенок работает только на одном уровне за раз. Если вы хотите, чтобы понять, п-го ребенка лучше, вот несколько ресурсов:

• http://reference.sitepoint.com/css/pseudoclass-nthchild
• http://css-tricks.com/how-nth-child-works/
• http://www.impressivewebs.com/css3-pseudo-class-expressions/
• http://lea.verou.me/demos/nth.html - это один большой, потому что это интерактивный

В любом случае, вот что-то, что вы, возможно, захотите рассмотреть: одна вещь, которая может раздражать в случае иерархического комментария s - тот факт, что с определенного уровня они могут стать настолько узкими, что это выглядит плохо, и это даже делает чтение немного сложнее. Вот почему я предпочитаю ограничить количество уровней - disqus, о котором говорилось выше, предлагает вариант ограничения количества уровней вложенности.

Если у вас есть ограниченное количество уровней, скажем, три или пять, вы можете добавлять классы для каждого уровня (top-level, second-level, third-level) и стиль их по-разному. Другой вариант, который у вас есть, и этот не зависит от ограничения количества уровней, заключается в том, чтобы стиль нечетный и ровный уровни по-разному добавляли некоторые классы odd-level/even-level при создании HTML.

В принципе, вы бы что-то вроде этого:

<ul class="comments"> 
    <li class="comment first-level"> 
     <div class="comment-data">[date, time, comment author, link]</div> 
     <div class="comment-body">[whatever is said in the comment]</div> 
     <div class="comment-footer">[reply option, show/hide comment thread option]</div> 
     <ul class="comment-thread"> 
      <li class="comment second-level"> 
       <div class="comment-data">[date, time, comment author, link]</div> 
       <div class="comment-body">[whatever is said in the comment]</div> 
       <div class="comment-footer">[reply option, show/hide comment thread option]</div> 
       <ul class="comment-thread"> 
        [... and so on...] 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 

Если я думаю, что лучше, вы можете добавить классы, как level-1, level-2 ... независимо от того, сколько уровней у вас есть.