Simplify CSS

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 do not want to write #user_panel all the time. Any ways?

Answer 1

How about LESS (excluding CSS)? Makes your life a lot easier!

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

EDIT: When compiling a comment, LESS is only useful when using Ruby. This is completely wrong. LESS is written in Ruby (not to be confused with only compatible with ), and comes with a command line tool less2cssto convert your files *.lessto *.cssfiles.

Answer 2

I am going to go with the most common answer, since you did not give me a reason not :-)

#user_panel
{
   color:#fc0;
}

, , , :

.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 these elements a second class, called .user-panel-control, and change the CSS to this:

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

HTML will look like this:

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

Answer 4

This is about the same as you. You can rename user_panel, but you should try to describe your identifiers in order to simplify code support. The obvious question is: do your selectors need the #user_panel part?

Potentially you could do:

#user_panel *{ color: #fc0 }

or do as John does below.