Оптимизация времени загрузки в 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}