Эффективность селектора дочерних элементов CSS по сравнению с классом раздувания

Я пытаюсь научиться писать более эффективный CSS, особенно когда я работаю с довольно сложным сайтом, который нужно быстро отображать.

Я привык к тому, что это много в моем HTML/CSS (главным образом потому, что мне нравится читаемость):

.spotlight {}
.spotlight ul {}
.spotlight ul li {}
.spotlight ul li a {color: #333;}

<div class="spotlight">
  <ul>
    <li><a href="">link</a></li>
    <li><a href="">link</a></li>
    <li><a href="">link</a></li>
  </ul>
</div>

Теперь я понимаю, что браузеры управляют процессом согласования правил CSS справа налево, а это означает, что элемент <a> в последнем правиле CSS выше будет сначала соответствовать каждой ссылке на странице, что приведет к потере производительности.

Итак, из того, что я собираю, решение, совместимое с браузером, должно быть более конкретным и использовать, например:

.spotlight {}
.spotlight-link {color: #333;}

    <div class="spotlight">
      <ul>
        <li><a class="spotlight-link" href="">link</a></li>
        <li><a class="spotlight-link" href="">link</a></li>
        <li><a class="spotlight-link" href="">link</a></li>
      </ul>
    </div>

(предполагая, что я использую наследование, где это возможно, но часто все же нуждаюсь в конкретном контроле над последним элементом вниз по дереву)

Что вызывает у меня сомнение: не все ли лишние HTML-раздувания от печати имен классов на элементах всей страницы отрицают выигрыши в производительности, вызванные предотвращением вложенных селекторов дочерних CSS? Я привык пытаться писать меньше HTML, и это противоречит. Любое понимание было бы оценено.

Ответ 1

Вы должны взвесить это. Добавление класса к каждому якорю смешно, дополнительный вздутие в HTML будет значительно компенсировать время рендеринга, которое было бы 1/10 000-й части ноги пчелы. Не говоря уже о том, как сильно ваш код будет поддерживать.

Вам просто нужно прекратить использование ненужных дорогих селекторов, например

.spotlight ul li a

Может быть записано как

.spotlight a

Если вы продолжаете указывать один класс на одних и тех же элементах вашего HTML (например, ваш второй пример), вам, вероятно, лучше использовать селектор тэгов.

Вам также нужно взвесить свое время и время браузеров. Сколько это будет стоить в свое время, чтобы сэкономить несколько наносекунд при каждой загрузке страницы? Честно говоря, это действительно не стоит.

Кроме того, если ваша структура CSS соответствует вашей структуре HTML, это отрицает точку CSS - если HTML изменяется, вам нужно изменить свой CSS. Поэтому вы всегда хотите, чтобы ваши селекторы были настолько неспецифическими, насколько это возможно.

Но здесь нет правильного или неправильного ответа.

Ответ 2

Лучший компромисс, я думаю, использует дочерний комбинатор > для элементов, которые повторяются много раз и используют классы, когда вещи начинают становиться слишком вложенными.

Изгиб правил BEM

Эта статья поражает идеальный баланс, я думаю, учитывая наши варианты.

Используя SCSS, который должен быть обязательным в наши дни, мои навигационные меню обычно выглядят так (это определенно самое большее, что я когда-либо создавал):

.header__nav {
  > ul {
    > li {
      > a {}
    }
  }
}