Welcome to WebmasterWorld!
Class overly qualified with tag
That simply means that instead of doing this:
a.button
You could simply do this:
.button
In other words, you have "overly qualified" it with tag "a". In some cases, you may need to specify the tag name if you were applying the same class name to multiple element types, but most times you probably don't need the tag name.
Tag key with descendant selector
Means that you've specified multiple levels... that is, your tag key ("span" in your second example) includes a descendant selector ("a.button"). In other words, if you had specified only "span" as the selector, you would not get this message. The same is true in your first example... you have 2 descendant selectors (.box and ul).
It's important to note that these types of analysis don't always reflect what is actually the best practice. For example, if you added an id attribute to every element in your document, and then referred to those id's only in you CSS file, the analysis would say that you're using efficient CSS selectors. But in fact, this method is very inefficient from a markup point of view, as it bloats your markup. In terms of "efficiency", these applications are approaching it from a browser point of view, not necessarily from a development/maintenance point of view. Yes, it is less efficient for a browser to apply styles where multiple selectors are involved, but it's really a matter of whether there is any perceived impact.
There is another thread on this topic here:
[
webmasterworld.com...]
And a description of what is meant by efficient selectors here:
[
code.google.com...]
In your first example above, the "ul" is definitely not efficient if your markup does not contain any ordered lists that would also match. In other words, you should do this instead:
.box li {...}
unless you have <ol> elements within .box that you don't want this rule to match on.
Hope that helps. :)
