4

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.

Improve this question

7 Answers 7

Reset to default
10

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Agreed. The existence of table.foo is explicitly stated in the td.bar rule--there is no useful history or intent in the empty rule that isn't already present in the 'living' one.
i sometimes leave it empty, plus my use of indenting selectors, to help with organization.
Point taken. Downsides would include larger CSS files to download, 'bloated' rule lists, etc., but I could imagine that organization could trump those concerns. (To counteract the negatives, I like Sam DeFabbia-Kane's optimization step, assuming the project in question reaches a meaningful 'end'.)
5

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!

Improve this answer

1 Comment

First time I've come across this term. I love it. "The existing code is seen as an historical curiosity".
1

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.

Improve this answer

Comments

1

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.

Improve this answer

Comments

0

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.

Improve this answer

Comments

0

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

Improve this answer

Comments

0

Just in case someone comes to this question with the same kind of misadventure that I ran into when I did, here is one case when an empty rule will actually make sure that the following rule is not ignored. I had an extra closing brace in the rule preceding the empty rule, and the empty rule helped resynchronize the parser.

Of course, the proper fix is to fix the syntax; and remove the empty rule.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.