CODEWITHSUNDEEP
css
rutter
rutter

Reputation: 11452

Do empty declaration blocks serve any purpose?

I've recently been cleaning up a messy CSS template that someone else made. Among other things, there have been many classes that weren't in use, duplicate selectors to merge, and so on.

One thing I'm not sure about: empty declaration blocks. There are 10-20 selectors that don't have any style information attached.

Snippet 1:

/* Thead */
thead th {padding: .5em .4em; text-align: left;}
thead td {}

/* Tbody */
tbody td {padding: .5em .4em;}
tbody th {}

tbody .alt td {}
tbody .alt th {}

/* Tfoot */
tfoot th {}
tfoot td {}

Snippet 2:

#extras ul {
    list-style: none;
    margin: 0;
}

    #extras li {}

Do these empty declarations serve any purpose? My guess is that they're placeholders, in case the designer had wanted to come back and add something.

If I remove the statements altogether, the site looks "fine", but ideally I'd have a straight answer before I commit to that.

Search attempts have mostly turned up discussion of the :empty pseudo-class.

MDN's CSS reference states the following, which doesn't quite answer the question:

A declaration block may be empty, that is containing null declaration.

Is there a purpose here that I'm missing?

Upvotes: 4

Views: 253

Answers (1)

Guffa
Guffa

Reputation: 700730

The rules with empty declaration blocks serves no purpose for the browser. On the contrary they will make the page load just slightly slower. You can remove them without changing the result.

I regularly create empty rules when working with the CSS, but usually remove them when the page takes form. Sometimes there are some empty rules left even when publishing the code.

Having about 10-20 empty rules in the CSS will not really make a noticable difference. It might slow down the loading of the page a few milliseconds, so that is not measurable in itself, but you should naturally keep the code as clean as possible. Shaving off milliseconds here and there adds up.

Upvotes: 3

Related Questions