There is a common belief that separating design and functionality is beneficial. Let's focus on the separation between HTML and CSS, specifically when organizing a menu hierarchy.
The issue with nested <ol>, <ul>, and <li> elements is that styling them based on percentage in a responsive design setting can be counterintuitive.
The Challenge:
I have a multi-layered list structure like this:
<ul>
<li>
<a>Item 1</a>
<ul>
<li>
<a>Submenu 1</a>
<ul>
<li>
<a>Submenu 1 (1)<a>
</li>
<li>
<a>Submenu 1 (2)<a>
</li>
<li>
<a>Submenu 1 (3)<a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
If I want to style this list relative or absolute to the body for responsiveness, I would start by styling the top ul element to flow down the rest of the list:
body > ul{
position:relative;
width:20%;
}
This works well initially. However, if I need to give absolute positions or relative widths/heights to deeper nested <li> elements, they will inherit the styles from the top-level <ul> (because it was defined as relative). This means each item needs unique styling calculations to maintain consistent sizing relative to the window. The subsequent lists cannot simply use the same percentage styling as the parent—they require customized adjustments.
This approach goes against the core idea of separating form and style. HTML should dictate data relationships, while CSS determines visualization and offers flexibility in how forms are presented.
My Queries:
Is there a way to disregard a parent coordinate space set as fixed, relative, or absolute so that 100% equates to 100% of the body?
Am I overlooking fundamental principles in the HTML/CSS relationship and its effective utilization?
Will pursuing web development lead me to pulling out all my hair by age 35?
Note:
I seek an answer that brings peace, not just a temporary browser fix. If the solution is "it can't be done," please explain why and perhaps reflect positively on this limitation.