Упростить код CSS

Question

Как я могу упростить этот код?

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

Я не хочу писать #user_panel все время. Любые пути?

Answer 1

Как насчет МЕНЬШЕ (меньше CSS)? Облегчает вашу жизнь!

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

РЕДАКТИРОВАТЬ: Согласно комментарию, LESS будет полезен только если вы используете Ruby. Это совершенно неправильно. LESS * написан на Ruby (не путайте с , совместимым только с ) и поставляется с инструментом командной строки less2css для преобразования ваших файлов *.less в *.css файлы.

Answer 2

Я собираюсь пойти с наиболее распространенным ответом, так как вы не дали мне причину не делать: -)

#user_panel
{
   color:#fc0;
}

Другая альтернатива - добавить дополнительный класс к каждому элементу, а затем ссылаться на несколько классов, когда вам это нужно, например:

.highlight 
{
  color:#fc0;
}

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

Answer 3

Вы можете дать каждому из этих элементов второй класс с именем .user-panel-control и изменить CSS следующим образом:

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

HTML будет выглядеть следующим образом:

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

Answer 4

Это так коротко, как вы собираетесь получить. Вы можете переименовать user_panel, но вы должны стараться, чтобы ваши идентификаторы были описательными, чтобы облегчить ведение вашего кода. Очевидный вопрос заключается в том, требуют ли ваши селекторы части #user_panel?

Потенциально вы можете сделать:

#user_panel *{ color: #fc0 }

или делай, как Джон ниже.