I'm very excited to work on the comments section for this site. CSS-Tricks is home to some excellent discussions, thanks to all you fine folks. Designing the comments section is important because it needs to showcase those great discussions, keep those great discussions happening, and facilitate all the functionality of a WordPress-based discussion thread.

The first step here is preparing our Photoshop file to have a nice clean area to design comments in. We're using a 2/3 1/3 grid, so we mock that up quickly. We won't be doing anything too crazy progressive here. In the main 2/3 column will be the article, and below that, the comments. No fancy comments in the sidebar or in a popup or anything like that.

We take a look at the v9 comments to get our bearings. All the stuff you would expect is there. Gravatars, names, dates, text, reply links... One thing we decide to ditch is the RSS icon. WordPress generates RSS feeds for threads but it's very seldom used and the "Subscribe to Comments" offered by JetPack is a better alternative for users looking to keep up with a thread.

In v9 we only reveal the reply link on :hover. There is a media query to show it always on smaller screens, but that's a little janky. We can do better there. In v9 we also have a system for "featuring" and "burying" comments. I personally curate the comments and apply these labels. Perhaps obviously, featured comments have a bit of UI to them which distinguishes them and catches the eye of people browsing the comments. Buried comments in v9 are just hidden, but we can do something more interesting there. Spam comments or rude comments are just deleted, but there is a special class of comments (e.g. "Great post!") that don't deserve deletion but I like to de-emphasize to 1) prove to the rest of the users that I care about their time and 2) teach users that lame comments are lame. I've written more about curating comment threads here. v10 will need all that functionality only do even better. For example, author comment styling would be a good addition.

Threaded comments are another major feature. I have specifically chosen to only allow one level of nesting. As in, you can leave a reply to a comment, but you can't leave a reply to a reply. You'd just reply to the original comment and it will appear in that sub-thread. I made this choice because I personally get confused and don't like reading comment threads that nest further than that.

We end up jumping into Photoshop a little bit and putting a few things on the page. We're in good shape now to proceed designing this important area.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.