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.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag