We most often use lists for semantic structure (like in navigation or forms) and usually don’t want to display them as standard lists. It’s simpler to reset lists globally in CSS and only display them as lists in text when needed with the mzp-u-list-styled class.

<ol class="mzp-u-list-styled">
    <li>Ordered list item</li>
    <li>Ordered list item
        <ol class="mzp-u-list-styled">
            <li>Nested ordered list</li>
        </ol>
    </li>
</ol>

<ul class="mzp-u-list-styled">
    <li>Unordered list item</li>
    <li>Unordered list item
        <ul class="mzp-u-list-styled">
            <li>Nested unordered list</li>
        </ul>
    </li>
</ul>

<dl class="mzp-u-list-styled">
    <dt>Definition term</dt>
    <dd>Definition text</dd>
    <dt>Definition term</dt>
    <dd>Definition text
        <ul class="mzp-u-list-styled">
            <li>Nested list</li>
        </ul>
    </dd>
    <dt>Definition term</dt>
    <dd>Definition text</dd>
    <dd>Definition text</dd>
</dl>