CSS more short query

Question

For example I have a CSS selector:

#spotlightPlayer .container .commands.over span,
#spotlightPlayer .container .commands.over ul,
#spotlightPlayer .container .c         


        

Answer 1

Sounds like the problem is with your document structure and not your CSS. Do you really need that long a list of identifiers to get the specificity that you need? You should only need attributes on your HTML elements such as it takes to describe the data you're displaying.

Answer 2

You might check out Sass. It has a lot of helpful little features that let you make your style sheets more declarative than the normal CSS syntax allows. It handles deeply nested tags in a very natural way. In Sass, this would be:

#spotlightPlayer .container. commands.over
  span, ul, ul li
    :clear both

Answer 3

If all you want is to clean up your CSS, and you don't care about making your HTML messy, apply a class to each span, ul, and ul>li element in the relevant section. You can clear out two extra lines of CSS, but you'll be gaining a lot of weight in HTML cruft. I wouldn't recommend this.

Answer 4

So what you effectively want is a 'with'/grouping construct?

I don't think CSS can do this directly, but it's certainly would useful.

It probably would not be too difficult to write a basic script that generated the long-hand version from the shorthand.

However, perhaps a more consistent syntax would be:

@with( #spotlightPlayer .container .commands.over )
{
    span, ul, ul li { clear:both }
}

Whilst longer in this case, it would allow you to add more styles that apply only within that specific block.

edit: or better yet, go with the css pre-processor suggested in the other answer.

Also, regarding Jeremy's answer/comment: Unless you have (or plan to have) a .commands.over item outside of the .container item, then you can drop the middle part.

When you space-delimit your selectors, it allows for any descendant, rather than requiring direct parent/child relationship (like > does).

Answer 5

You could use some kind of CSS pre-processors like Shaun Inman’s CSS server-side pre-processor to convert this:

#spotlightPlayer .container .commands.over {
    span,
    ul,
    ul li { clear:both }
}

into this:

#spotlightPlayer .container .commands.over span,
#spotlightPlayer .container .commands.over ul,
#spotlightPlayer .container .commands.over ul li { clear:both }

But CSS itself has no such syntax.