Вообще, сейчас рулит БЭМ,
Советую познакомиться:)
В БЭМ как раз все на классах, и таким образом избегаем вложенности.
Второй момент, Вы говорите, что пишете медиазапрос и возникает ошибка, они не работают!? Скорее всего, Вы в основных стилях используете один селектор, а в медиазапросе другой, с меньшим весом.
Вот, про специфичность.
Например, если в стилях пишете:
div.class-some .wrapper h2 span{
color: red;
}
То в медиазапросе надо повторить селектор, вот так работать НЕ будет:
@media screen and (min-width: 1200px ){
.class-some span{
color: green;
}
}
Надо вот так:
@media screen and (min-width: 1200px ){
div.class-some .wrapper h2 span{
color: green;
}
}
Потому что в первом случае вес селектора меньше, чем во втором, несмотря на медиазапрос.
Вы про это спрашивали?