Comma after last selector

Question

Given this code

a,
h1
{
  background: lightblue;
}

I would like to rewrite it such that each selector ends with a comma, even the last. This will make it easy to add or reorder selectors. However if I add a comma after the last the style will not be applied. This code seems to work

a,
h1,
_ {
  background: lightblue;
}

but could this cause unforseen issues?

Answer 1

As you're fully aware, _ is a completely valid type selector, so there's no reason it should be breaking your CSS rule by itself.

The only unforeseen issue that could come up with this is that, conversely, your CSS rule would apply any _ element that happens to be added to the document(s) you're styling (for whatever reason), just as it would any other element with any other matching selector. If the specification decides to introduce an _ element, then the meaning of your selector with respect to the markup completely changes. Of course, since we're talking about HTML, it's vanishingly unlikely, but it's still a possibility; in the unlikely, unfortunate event that it does happen, you will have to change that stub selector to... something else.

I won't repeat what others have stated in the comments on how sensible such a coding practice might or might not be.

Answer 2

could this cause unforeseen issues?

Not code-wise; but consider the people. Think of the poor developer who stumbles upon this CSS. Imagine his/her mental state upon discovering unnecessary CSS in a stylesheet. Gasp.

Serious reasoning: make it easy to add or reorder selectors.

• Adding a selector to the beginning or middle of the selector list requires typing the selector then a comma, no matter what. Adding to the end of the list requires a comma then the selector. So your underscore doesn't help there.

• Reordering selectors boils down to two possibilities:

  1. Moving a selector from the beginning/middle of the list to the end, then deleting the comma. But your cursor will likely already be right after that comma, so a simple tap of backspace solves your problem.
  2. Switching a pair of selectors (this process could occur multiple times, but each switch is identical).
     • If neither selector is the last selector, this isn't an issue: merely switch the entire lines.
     • In the (n-1)/(n choose 2) * 100% chance, where n is the number of selectors, that one of the selectors is the last selector, and thus has no comma, then
       1. Switch the selectors themselves (leaving the comma by the first selector alone), or
       2. Cut+paste the entire lines, and accept the fact that you'll have to add a comma after the new first selector, and delete the comma after the new last selector.

In short: I've toiled more in writing this answer than you ever will adding or reordering selectors. The underscore is not necessary.