Как ограничить область сброса CSS?

Question

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

Например, вот часть Eric Meyer's reset (отредактированный для краткости):

div, span,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, em, img, ins, kbd, 
q, s, b, u, i, ul, li, form, label, legend, table, caption { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    vertical-align: baseline; 
} 

Моя первая идея, чтобы ограничить этот сброс детям моего основного узла компонента является использование селекторов-потомок. Скажем, мое приложение называется «Foo»:

.foo div, .foo span, foo h1, .foo h2, .foo h3, .foo h4, .foo h5, .foo h6, .foo p, .foo blockquote, 
.foo pre, .foo a, .foo em, .foo img, .foo ins, .foo kbd, .foo q, .foo s, .foo b, .foo u, .foo i, 
.foo ul, .foo li, .foo form, .foo label, .foo legend, .foo table, .foo caption { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    vertical-align: baseline; 
} 

Проблема у меня в том, что это выигрывает специфичность бой почти все в моем приложении.

Например:

.huge-red-border { 
    border: 10px solid red; 
} 

<div class="foo"> <!-- my component's root node --> 
    <div class="huge-red-border"> 
     I should have a huge red border, but I don't 
     because ".foo div" takes precedent over ".huge-red-border". 
    </div> 
</div> 

Я не могу добавить !important к каждому из моих правил (потому что мне нужно что различающий иметь смысл в пределах моих правил).

Любые идеи о том, как это решить?

Answer 1

Спецификация и каскад вопрос.

Вы можете преодолеть его, поставив предпочтительные элементы ниже в таблице стилей и повышения их специфичности:

.foo div {  /* specificity points: 11 */ 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    font-size: 100%; 
 
    vertical-align: baseline; 
 
} 
 
div.huge-red-border { /* specificity points: 11 */ 
 
    border: 10px solid red; 
 
}

<div class="foo"> 
 
    <!-- my component's root node --> 
 
    <div class="huge-red-border"> 
 
    I should have a huge red border, but I don't because ".foo div" takes precedent over ".huge-red-border". 
 
    </div> 
 
</div>

Вот еще один метод, который позволяет сохранить повышение специфичности с использованием :not() псевдо -класс:

.foo div { /* specificity points: 11 */ 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    font-size: 100%; 
 
    vertical-align: baseline; 
 
} 
 
.huge-red-border:not(html):not(body) { /* specificity points: 12 */ 
 
    border: 10px solid red; 
 
}

<div class="foo"> 
 
    <!-- my component's root node --> 
 
    <div class="huge-red-border"> 
 
    I should have a huge red border, but I don't because ".foo div" takes precedent over ".huge-red-border". 
 
    </div> 
 
</div>

Из спецификации:

6.6.7. The negation pseudo-class

:not() псевдо позволяет бесполезные селекторы должны быть записаны.

К примеру :not(*|*), который не представляет собой элемент, вообще, или foo:not(bar), что эквивалентно foo, но с более высокой специфичности.