Specificity conflict with .flow utility and ul[class]

Zubrik commented 4 years ago

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?

Andy-set-studio commented 3 years ago

I'm thinking about changing this stuff altogether: #30

Andy-set-studio commented 3 years ago

Resolved with #32

Andy-set-studio / modern-css-reset