Does this approach handle all cases (including edge cases), such as lists of mixed types or unusual but valid nesting structures? Is such a case missing in the provided example?
I'm pretty sure your code has handled all the edge cases you specified except for multiline list items. You can test for these with the following code.
<ul>
<li>
This is a multiline list item. It is being used to test the functionality of multiline lists. The content here covers multiple lines to test vertical spacing and line height functionality.
</li>
<li>
This is another multiline list item. It is being used to test the functionality of multiline lists. The content here covers multiple lines to test vertical spacing and line height functionality.
</li>
</ul>
Are there alternative approaches or refinements that are more robust, efficient, and widely used?
From what I've gathered through some research and browsing older yet similar questions on Stack Overflow, the method you are using right now is solid. One question, How do I set vertical space between list items, has answers fairly similar to your method, but I'm not sure if they work for all edge cases or not.
One potential area where you could optimize the code is by making list-spacing a variable in the code using the below code.
:root {
--list-spacing: 1.5em;
}
You can then reference that variable using var(--list-spacing).
Is there a need for a standardized list-spacing property to be proposed to the CSS working group?
While I think the current solutions work fine, it never hurts to suggest potential updates or features for programming languages. I'm not well-versed in the act of creating and updating programming languages, so I can't speak to how difficult it would be to add this feature, but I think it would definitely be helpful to have.
Here is an updated code snippet that incorporates all the above suggestions.
:root {
--list-spacing: 1.5em;
}
li:not(:last-of-type) {
margin-block-end: var(--list-spacing);
}
:is(ul, ol)+ :is(ul, ol),
li :is(ul, ol) {
margin-block-start: var(--list-spacing);
}
/**
* for visual representation only
* 1: adjust horizontal spacing to align markers more appealingly
* 2: normalize line height to make the spacing in the example more noticeable
*/
:is(ul, ol) {
padding-inline-start: 2ch;
line-height: 1;
/* 2 */
}<ul>
<li>
List 1 - Item 1
</li>
<li>
List 1 - Item 2
<ul>
<li>
List 1 - Item 2.1
</li>
<li>
List 1 - Item 2.2
<ul>
<li>
List 1 - Item 2.2.1
<ol>
<li>
List 1 - Item 2.3.1
</li>
<li>
List 1 - Item 2.3.2
</li>
<li>
List 1 - Item 2.3.3
<ul>
<li>
List 1 - Item 2.4.1
</li>
<li>
List 1 - Item 2.4.2
<ol>
<li>
List 1 - Item 2.5.1
</li>
</ol>
</li>
</ul>
</li>
<li>
List 1 - Item 2.3.4
</li>
</ol>
</li>
<li>
List 1 - Item 2.2.2
</li>
</ul>
</li>
<li>
List 1 - Item 2.3
</li>
</ul>
</li>
<li>
List 1 - Item 3
<ol>
<li>
List 1 - Item 3.1
</li>
</ol>
</li>
<li>
List 1 - Item 4
</li>
</ul>
<ul>
<li>
List 2 - Item 1
<ol>
<li>
List 2 - Item 1.1
</li>
<li>
List 2 - Item 1.2
</li>
</ol>
<ol>
<li>
List 2.1 - Item 1.1
</li>
</ol>
</li>
<li>
List 2 - Item 2
</li>
<li>
List 2 - Item 3
</li>
</ul>
<ol>
<li>
List 3 - Item 1
</li>
<li>
List 3 - Item 2
<ul>
<li>
This is a multiline list item. It is being used to test the functionality of multiline lists. The content here covers multiple lines to test vertical spacing and line height functionality.
</li>
<li>
This is another multiline list item. It is being used to test the functionality of multiline lists. The content here covers multiple lines to test vertical spacing and line height functionality.
</li>
</ul>
</li>
</ol>