Specificity conflict with .flow utility and ul[class]
Zubrik opened this issue · comments
Hi,
I'm using the reset along with the CUBE CSS methodology. I have a container with a .flow class applied:
.flow > * + * {
margin-top: 1rem;
}
Inside this container there are several elements (h1, p, ul…). The top margins are applied correctly, so the vertical rhythm is correct:
<div class="flow">
<h1>Lorem</h1>
<p>Ipsum</p>
<ul>…</ul>
</div>
However, if I add a ul which has a class, it doesn't respect the flow, because this rule in reset.css:
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
figure,
blockquote,
dl,
dd {
margin: 0;
}
This selector: ul[class] has a higher specificity than .flow > * + *, so the top margin isn't applied.
How would you tackle this situation? What do you think about changing ul[class] and ol[class] with just ul and ol?
