CSS селекторов производительности панели навигации и содержимого веб-сайта - PullRequest
Новая
       5

CSS селекторов производительности панели навигации и содержимого веб-сайта

0 голосов
/ 19 июня 2020

Я только что прочитал несколько статей о производительности селекторов css и т.д. c. и теперь я не понимаю, как их использовать наилучшим образом. Итак, я покажу вам пример значения вопроса:

Я создам панель навигации на своем веб-сайте, и вот несколько способов, как это сделать:

  1. Сделайте теги: header , nav , ul , li , a
  2. Используйте только div с именем: div id = "header" с ul , li и a тегами

CSS стиль:

Зависит от того, какой вариант мы хотим использовать, но для первого варианта должен ли я стилизовать панель навигации и весь контент на веб-сайте следующим образом?: 

header {style}
header nav {style}
header nav ul {style}
header nav ul li {style}
header nav ul li a {style}

или так?: 

header will have class="header"
nav will have class="navigation"
ul will have class="unordered-list"
li will have class="list-item"
a will have class="link"

So it will looks like:
.header {style}
.navigation {style}
.unordered-list {style}
.list-item {style}
.link {style}

Для второго варианта, должен ли я оформить панель навигации следующим образом?: 

#header {}
#header ul {}
#header ul li {}
#header ul li a {}

Кто-нибудь может пожалуйста подскажите, какой вариант лучше, или предложите другие варианты?

Извините, если что-то непонятно, но я пытаюсь выучить html & css, и я не очень хорошо владею английским sh объяснение.

1 Ответ

0 голосов
/ 19 июня 2020
  1. Использовать заголовок для semanti c. Добавьте id , если вам это нужно, в JS.
  2. Для стилизации используйте классы. Для производительности это лучше, чем теги.

Например

header nav ul li a {style}

Сначала браузер выполняет поиск по всем a теги в документе. Затем он ищет, какое из них содержится внутри li , затем внутри ul et c.

...