Lists in comment text

One of the most common problems that I see when reviewing themes for the Theme Review Team and at ThemeReview.co is handling the styling of lists within comments.

Ordered and unordered lists aren’t often used within comment text. However, they are used at times. And, when they are used, they’re terrible.

This stems from two common issues that I’ll cover in this short tutorial. These issues arise because the comments list itself is typically a <ul> or <ol> with each comment block being an <li>.

I’m certainly guilty of both of these issues. I hope you can learn from my experience. The code in the tutorial is simply an example. There are multiple ways to handle this. The big thing to do is to test lists everywhere when developing themes.

Missing bottom margin/padding

Many theme authors do a reset and normalize their list styles with something like the following CSS. This causes lists within comment text to have no whitespace below, which is generally undesirable.

// First level lists.
ul,
ol {
    margin-bottom : 1.5rem;
}

// Nested lists.
li ul,
li ol {
    margin-bottom : 0;
}

That looks OK with a quick glance, but you’ll likely want to treat lists within comment text as a top-level list. However, they’re actually nested within the overall comments list structure. That’s easily fixable with a simple > in the above code like so:

// First level lists.
ul,
ol {
    margin-bottom : 1.5rem;
}

// Nested lists.
li > ul,
li > ol {
    margin-bottom : 0;
}

That makes sure that only nested lists that are direct descendants of a list item get their bottom margins zeroed out. This corrects many issues outside of comments too, such as forum threads.

List items styled like comments

The worst thing that happens is when you have normal list items that have all the fancy design of comment items. This can get pretty crazy at times, particularly with borders and lots of padding.

This issue happens when a theme author styles comments like so:

.comments-list li {
    /* Some fancy styling. */
}

Every list item gets that treatment. Instead, you’ll want to target the individual items by class.

.comment {
    /* Some fancy styling. */
}

.ping {
    /* Don't forget me! */
}

There are plenty of other comment classes to utilize as well, particularly for handling nesting and such. The big thing is to watch out for directly styling by tag name, such as ol, ul, and li. Anything you do to those can and will affect children (i.e., lists within comment text).