What do square brackets in class names mean?

Question

I saw here square brackets that are used in class names:

Answer 1

Apart from the use-case / example given by the OP for brackets in class names, there is also another use case which Harry Roberts proposed (and later stopped proposing) in his blog a while back: grouping related classes in your markup where the square brackets could be used to group

two or more related class attributes to make them easier to notice when scanning an HTML file

...

and that looks something like this:

where:

• There must be more than one ‘set’ of classes.
• One ‘set’ must contain more than one class.

He also noted that adding the brackets is completely valid according to the html5 spec

There are no […] restrictions on the tokens authors can use in the class attribute…

Just to reiterate:

The brackets in the class attributes - while being valid CSS class names are not actually meant to be used in the CSS¹ - but rather to help readability in the HTML.

---

Notes:

¹ Although technically, they can be used when escaped,

.\[ {
  color: red;
}

Hi there