Как конфликтующие правила CSS влияют на производительность?

Question

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

Например, если у меня был такой CSS, браузер тратит время направило color: red?

span {
  color: red;
  color: black;
}

Переопределение в том же блоке (выше) обрабатывается не так, как показано ниже:

span {
  color: red;
}
span {
  color: black;
}

Есть ли хороший ресурсЯ могу сослаться точно, как правила обрабатываются с точки зрения CPU / GPU?Существует много информации о том, как применяются правила CSS, но мне интересно, насколько важны противоречивые правила.В моем случае конфликтующие правила, которые я, возможно, упустил, как правило, намного сложнее, чем простой пример, который я привел выше, с участием нескольких селекторов, градиентов, теней и т. Д.

Answer 1

Short: да, он тратит больше времени на компоновку, чем на рисование (он объединится в одну вычисленную версию, которая видна в Chrome DevTool)

Long: это больше о размере CSS, который вы нажимаете3G устройства, а не композиция.Каждый кусочек имеет значение, когда вы отправляете ненужный код всем.

Основное правило: оптимизируйте эту и другую простую задачу с помощью PostCSS, локально или в процессе :) Или даже онлайн-процессором.

Лучше: лучше напиши код, чтобы потом было меньше работы: D