Лучший способ писать классы CSS с общим ребенком

Question

Скажем, это мой HTML:

<div class="example"> 
    <span></span> 
</div> 

<div class="test"> 
    <span></span> 
</div> 

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

<div class="blah"> 
    <span></span> 
</div> 

Я хочу, чтобы стиль каждого span для span в .foo кроме. Я не могу использовать :not, потому что у меня слишком много div s (родительские элементы), которые я хочу игнорировать в своем фактическом коде, а не в качестве родительских элементов, которые я пытаюсь настроить. Так вот что я делаю сейчас:

.example span, .test span, .blah span { 

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

.example span, .test span, .blah span { 
} 

.example span:hover, .test span:hover, .blah span:hover { 
} 

.example span:before, .test span:before, .blah span:before, 
.example span:after, .test span:after, .blah span:after { 
} 

Это становится утомительным быстро. Что это лучший способ сделать это?

Answer 1

CSS является утомительным. Используйте SASS или LESS, чтобы скомпилировать ваш CSS и избавить себя от некоторых головных болей.

В SCSS (SASS):

.example, 
.test, 
.blah { 
    span { 
    &:hover { 

    } 
    &:before, 
    &:after { 

    } 
    } 
} 

Узнайте больше на сайте: http://sass-lang.com и http://compass-style.org

Answer 2

можно добавить дополнительные классы для ваших дивы и приковать их в своих декларациях; поэтому притворитесь, что хотите добавить класс .bold на span в div.blah, вы бы сделали это: .blah.bold span{}, который также мог бы легко раздуваться, если не проверяться, но в вашей ситуации звучит неплохо.