在CSS中优化嵌套列表项的加载时间

Question

我正在创建一个sidenav，它有一些主要的链接，导致一个较小的链接列表。在主要链接之后列出了一些较小的链接。我应该：

• 格式化html，如

  <ul id="whatever">
          <li id="child">
          </li>
          <li id="descendent">
          </li>
  </ul>
  

并使用a ul id子选择器;

• 或格式化html，如

  <ul>
          <li class="major">
          </li>
          <li class="minor">
          </li>
  </ul>
  

并使用a li类选择器;

• 或格式化html，如

  <div class="left nav-major">
  <ul>
          <li>
          </li>
  </div>
  <div class="left nav-minor">
          <li>
          </li>
  </ul>
  </div>
  

并使用div选择器;

• 还是做别的什么？

如果我应该做别的事，应该是什么？ 显然，我正在尝试优化加载时间。

Answer 1

除了CSS文件的大小之外，CSS并没有真正影响加载时间。

在您的示例中，第一个和第二个在HTML结构方面完全相同。

第3个示例无效标记。

如果要优化加载时间，请尽可能使用最少量的标记和CSS。

那就是说，不要过火。有一个务实的中间立场，因为你想保持标记语义和人类可读性，使其可维护。

由于导航列表通常是链接列表，因此列表似乎合适：

<ul>
    <li>Main level link
        <ul>
            <li>Child level link</li>
        </ul>
    </li>
</ul>

并且不需要课程，因为您可以在css中引用级别：

.navigation li {style main level links}
.navigation li li {style secondary level links}