Рассмотрим следующий пример:Это плохо для производительности?
Порядок соблюдения правил.
.div-3 {float:right}
.div-4 {width:100%}
.div-2 {width:50%}
#div-1 {width:30%}
Ухаживают ли браузеры?
<div id="div-1"></div>
<div class="div-2"></div>
<div class="div-3"></div>
<div class="div-4"></div>
Сохраните оригинал.
Нет, порядок наборов правил CSS не должен влиять на производительность.
Браузеры не могут предполагать, что каждый селектор будет соответствовать только одному элементу, который будет следовать за элементом, соответствующим предыдущему селектору.
Браузеры сначала загружают все CSS, а затем для каждого элемента они ищут, какие селекторы соответствуют ему. Все селекторы, которые могут потенциально соответствовать ему, проверяются независимо по их порядку в таблице стилей. В противном случае стили не будут применяться.
В основном порядок объявлений CSS имеет значение только потому, что, когда есть черта в специфичности и важности, последняя победит в каскаде.
Ух ... нет, я не думаю, что это должно быть одним из ваших соображений при попытке повысить эффективность CSS. Прочтите некоторые из руководств для более полезных идей о том, как это сделать, например: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS – Serlite
Вы имеете в виду, если порядок Наборы правил CSS влияют на производительность? Я не понимаю, что заставляет вас думать, что ваш пример может иметь плохую производительность. – Oriol
ya @Oriol ...... –