What to do with empty CSS rules?

Question

After some code review I removed unnecessary properties which resulted in empty rules.

So I have know something like this:

table.foo
{
}

table.foo td.bar
{
    padding: 5px;
}

Now, what would be the best course of actions about this empty table rule? Remove it or leave it? Is there a requirement to have declaration of parent elements to be able to define child elements on them? It actually works without it just fine, but maybe there are some validation considerations? Any input is appreciated.

Answer 1

No, you do not need the empty rule.

Each rule stands on its own (that is, the selector for the rule provides the context), so you do not need an empty rule for table.foo in order to have a rule for table.foo td.bar.

Answer 2

Lava Flow is bad! Lava Flow is a programming anti-pattern which essentially means that people tend to leave code they aren't sure about needing just because they don't want to break things. However, your code works without it, so get rid of it!

Answer 3

Hey Mastermind,

I take it that your somewhat new to CSS, but you're clearly not new to programming, so I thought I would point out some useful frameworks for samples, consistent style, and a quick jump over the gotchas.

YUI's CSS Resources http://developer.yahoo.com/yui/grids/

and Blueprint CSS http://www.blueprintcss.org/

Also, YUI theater has some a couple good intro videos.

Hope that helps.

Answer 4

No, you really don't need to leave this. It will only let your project's CSS bigger. Unless if you are sick for organizing, you ought to let things like that.

Answer 5

It's 100% unnecessary from a functional point of view. And the way you have things arranged it's also completely unnecessary from a style point of view.

Alternate CSS organizational schemes (indenting hierarchically, for instance) can make it worth it. If I have an element with children I'll often leave an empty selector lying around, at least until I'm done with the project and I'm optimizing, because it helps keep things organized and there's a very good chance I'm going to at least apply style to that element at a later time.

Answer 6

Check out the Dust-Me Selectors Firefox extension - it finds all unused CSS selectors in a page, or even an entire site.