Наследование стилей CSS

Question

Допустим, я хочу определить 2 стиля.

.color_red { color: Red; }
.banner { display: block; width: 100%; }

Есть ли способ, чтобы стиль h1 наследовал стиль color_red? Я не хочу делать

<div class="banner color_red">This is my banner.</div>

Я бы предпочел сделать что-то подобное ...

.banner { ... inherit: color_red; }
...
<div class="banner">This is my banner.</div>

И у баннера красный текст.

Answer 1

Вы должны написать:

.color_red, .banner { color: Red; }
.banner { display: block; width: 100%; }

Answer 2

Нет, напрямую это не сделать, лучше поделиться определениями стилей:

.color_red,
.banner
{
  color: red;
}

Однако я хотел бы отметить, что вы подходите к проблеме с неправильной стороны. Ваша наценка должна быть независимой от стиля и в идеале должна вести стиль в разработке. Это означает, что определение .color_red является серьезной проблемой, потому что оно ничего не говорит о семантике разметки и о том, с какой проблемой вы столкнетесь, если вам нужно стилизовать этот бит разметки синего цвета?

Гораздо лучше позволить вашей наценке существовать так:

<div class="banner highlight">I am a banner AND I am highlighted!</div>

поддерживается:

<style>
.highlight
{
  color: red;
}

.banner
{
  display: block; 
  width: 100%;
}
</style>