Simplify CSS code

Question

How can i simplify this code?

#user_panel .subscribe, 
#user_panel .faves, 
#user_panel .tags,
#user_panel .title,
#user_panel .calendar a,
#user_panel .item .content
{
    color:#fc0;
}

I don`t want to write #user_panel all time. Any ways?

Answer 1

How about LESS (less CSS)? Makes your life so much easier!

#user_panel {
   .subscribe, .faves, .tags, .title, .calendar a, .item .content {
      color:#fc0;
   }
}

EDIT: Accoding to a comment, LESS is only useful if you use Ruby. This is totally wrong. LESS is written in Ruby (do not confuse with only compatible with) and comes with a command-line tool less2css to convert your *.less files to *.css files.

Answer 2

I'm going to go with the most common answer, since you haven't given me a reason not to :-)

#user_panel
{
   color:#fc0;
}

The other alternative is to add an extra class on every element, and then reference multiple classes when you need it, e.g:

.highlight 
{
  color:#fc0;
}

<div id="user_panel">
  <span class="subscribe highlight"></span>  
  <span class="tags highlight"></span>
</div>

Answer 3

You can give each of those elements a second class called .user-panel-control and change the CSS to this:

#user_panel .user-panel-control
{ 
    color:#fc0; 
} 

The HTML would look like this:

<div id="user_panel">
  <span class='subscribe user-panel-control'>This is a user panel control</span>
</div>

Answer 4

Thats about as short as you're going to get. You could rename user_panel but you should try to keep your identifiers descriptive to make maintaining your code easier. The obvious question is, do your selectors even require the #user_panel portion?

Potentially you could do:

#user_panel *{ color: #fc0 }

or do as Jon has below.