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

Третий пример недействителен.

Если вы хотите оптимизировать время загрузки, используйте минимальное количество разметки и 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}