Reset list sass/css

Question

I am trying to reset ul and li to its default behavior via a class, but I am having trouble with that. I have tried using inherit and initial but that does not work.

Here is what I have so far:

ul, li {
    margin: 0;
    padding: 0;
}

And so I want to have a class in this case called .list-unset that would set the child DOM to browser defaults and not take on margin: 0 and padding: 0.

I have tried:

.list-unset {
    ul, li {
        margin: unset;
        padding: unset;
    }
}

but that didn't work.

Answer 1

The 'correct' way to reset a <ul> element is with inherit:

ul, li {
  margin: 0;
  padding: 0;
}

ul.unset, ul.unset > li {
  margin: inherit;
  padding: inherit;
}

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

<ul class="unset">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

However, keep in mind that this value is inherited from its parent element. Whatever rules are applied to the parent (if any) will apply to the target. If no rules are set, it will set to the default, as above.

Failing that, you can manually apply the default <ul> styles to the target element, ensuring that you apply higher specificity:

ul, li {
  margin: 0;
  padding: 0;
}

ul.unset {
  margin-left: 16px;
  margin-top: 1em;
  margin-bottom: 1em;
}

ul.unset > li {
  margin: 1px 0;
}

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

<ul class="unset">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>