<p>Comment threads are one of those things that look really simple when executed right. When designing them yourself, you may find that they are rather deceptively simple. There is a lot that goes into designing nice and usable comment threads, and in this article, I will try my best to walk you through the steps to building a comment thread, that is great to look at, and a joy to use. </p> <p>What makes a good comment thread? </p> <p>Before diving into designing and writing code, let’s break down what actually makes a good comment thread. A good comment thread will have the following characteristics: </p> <p>Comments are readable, and all the important data-points are visible to the user at a glance. This includes the author, number of votes, timestamp, and the content.Different parts of comments are visually distinct, so that the user is immediately able to understand what is what. This is especially important for the action buttons (e.g. reply, report), and links.There must be visual cues for hierarchies between the comments. This is a requirement for having nested comments, i.e. one comment being a reply to another one.There should be an easy way to quickly scroll to a comment, especially to the parent comment from its children (i.e. replies).Comments should also have a toggle feature which allows the users to hide and show the comment and its replies. </p> <p>As you can see, that’s quite a lot to consider! There are also some nice-to-haves that we won’t cover in this article, but are certainly good enhancements: </p> <p>Users should be able to flag a comment so a moderator is aware of inappropriate content.A comment can be up- or down-voted as a way of signaling helpful and unhelpful comments.Only the first few comments are displayed and the user is able to load more comments. </p> <p>The above features would require at least a bit of JavaScript to pull off. Moreover, depending on the tech stack, these features could just as likely be implemented server side, especially keeping track of the number of votes and flag status of comments. That is why we will focus only on styling the comment threads in this article. With that out of the way, let’s knock out the first set of points and design our comment thread. </p> <p>A basic comment thread </p> <p>A comment by itself has a pretty simple structure. Here’s a skeleton of a single comment: </p> <p>A single comment structure </p> <p>So far, so good. Notice how the replies have an extra margin to the left. This is meant to satisfy the visual hierarchy (point #3 above). The markup for the above structure could look something like this:</p>