Эффективное повторное использование правил CSS в других правилах

Question

Вот простой пример того, что я собираюсь сделать.

Я хочу определить правило css для 2 градиентных фонов - blueGradient и greenGradient.Я хочу, чтобы все элементы класса css foo имели правило blueGradient, а при наведении указали правила greenGradient.

Итак, вот как я хочу, чтобы мой HTML выглядел:

<div class="foo">Hello</div>

Обычно это должен иметь синий градиент и зеленый при наведении на него курсора.

В идеале я хочу, чтобы мой CSS выглядел следующим образом (я знаю, что это недопустимо):

.blueGradient {
...    
}
.greenGradient {
...
}
.foo {
<#include blueGradient>
}
.foo:hover {
<#include greenGradient>
}

Какой лучший способ добиться этого?Если что-то подобное невозможно, каков наилучший способ добиться этого без нескольких копий определений blue / greenGradient по всем моим правилам CSS?

Я знаю, что могу изменить свой HTML, чтобы он выглядел так:

<div class="foo blueGradient">Hello</div>

Но тогда как мне справиться с наведением (я не хочу использовать JS)?

Answer 1

Для правил, которые вы хотите применить к нескольким селекторам, просто разделите их запятыми:

.blueGradient, .foo {
/** blue gradient styling **/    
}

.greenGradient, .foo:hover {
/** green gradient styling **/
}

В одном и том же файле CSS (и, если хотите, действительно, в разных файлах) вы можете определять стили для одного и того же селектора столько раз, сколько хотите, поэтому вы также можете определить стили .foo и .foo:hover, которые будут применяется только к этим селекторам и не будет использоваться совместно с другими элементами .blueGradient и .greenGradient:

.foo {
/** foo-specific rules **/
}

.foo:hover {
/** foo:hover-specific rules **/
}

Это не требует, чтобы вы изменили свой HTML. Если один и тот же атрибут определен в обеих записях с разными правилами (например, margin: 0;, а затем - margin: 10px;), последняя запись имеет приоритет.

Если вы также хотите, чтобы стили blueGradient применялись к еще одному селектору .bar, просто добавьте его в цепочку:

.blueGradient, .foo, .bar {
/** blue gradient styling **/    
}

(Обратите внимание, что в приведенном выше примере селекторы .blueGradient и .greenGradient не требуются, если только они не используются в других местах. Вместо этого вы можете заменить их комментарием кода, в котором указано, что именно там применялись градиенты, если Вы хотели.)

Answer 2

Используя только CSS, лучший способ сделать это с минимальным повторением кода - сделать что-то вроде следующего:

.blueGradient, .foo {
...    
}
.greenGradient, .foo:hover {
...
}

Использование запятой в селекторе позволяет назначить блок CSS нескольким элементам / идентификаторам / классам одновременно.

Answer 3

Вы не можете делать то, что предлагаете, в простом CSS.Вы можете использовать LessCSS .Он имеет функцию под названием Mixins:

Mixins позволяет вам встроить все свойства класса в другой класс, просто включив имя класса в качестве одного из его свойств.Это как переменные, но для целых классов.Миксины также могут вести себя как функции и принимать аргументы, как показано в примере ниже.

Я знаю, что это JS, но вам не потребуется изучать JS, просто прикрепите его на странице.

В противном случае вы застряли в том, что сказали Джастин Майкл и другие.Что, конечно, достаточно хорошо для большинства случаев.Часть того, что вам, возможно, понадобится здесь, это научить себя мыслить в правилах CSS.