Эффективный CSS с дочерними селекторами, стоит ли это того?

Question

Я знаю:

div > p

быстрее отрисовывается, чем

div p

, но, с другой стороны, занимает еще один символ, поэтому увеличивает время отправкиФайл CSS.

Я знаю, что разница в скорости очень мала, но если у вас очень большой файл CSS с большим количеством селекторов, он может стать важным.

Итак, мой вопрос:что лучше: потерять некоторое время рендеринга и не использовать дочерние селекторы или дочерние селекторы и потерять еще немного времени при отправке файла CSS?

Answer 1

Div > p и div p не совпадают

если у вас следующая структура:

<div>
  <p id="p1">first p</p>
  <section>
     <p id="p2">second p</p>
  </section>
</div>

div > p будет применяться только к p1, а div p для p1 и p2.

Скорость селекторов будет зависеть от вашей структуры HTML.

Answer 2

Вы должны различать загрузку данных с сервера и анализировать HTML + CSS.

во время загрузки вы правы (будет медленнее)

но при рендере вы ошибаетесь (это будет быстрее)

P.S. не забывайте: если у вас есть CSS - он не будет загружен снова.