Самый оптимизированный CSS для браузеров

Ответ 1

Браузеры должны делать такую ​​оптимизацию внутренне, поскольку они "компилируют" CSS. Компилятор отвечает за оптимизацию, потому что он знает о деталях его реализации и способен рассказать, что лучше всего соответствует его потребностям.

Программисты могут заботиться только о том, что компилятор не может вывести (например, из-за невозможности решить проблему ). В противном случае наилучшим вариантом будет писать семантически правильный код.

Это фактически соответствует тому, что Antti Koivisto, вкладчик ядра WebKit, сказал в 2011 году, потратив некоторое время на оптимизацию своего выбора селектора CSS:

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

^{Цитата через Изменена производительность селектора CSS! (К лучшему) Николь Салливан. Хороший источник современной оптимизации CSS, BTW. Статья упоминается в примечании в верхней части устаревшей статьи 2000 Написание эффективного CSS" Дэвида Хаятта.}

Поэтому беспокойство о преждевременной оптимизации, выраженное некоторыми комментаторами и разделяемое мной, вероятно, оправданно.

Ответ 2

вы уже ответили на свой вопрос с помощью теста, который вы создали.

@torazaburo предоставил хорошие результаты для вашего вопроса.

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

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

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

Ответ 3

Одна неудача, о которой я думаю, является отзывчивой. Возьмем, например, этот код:

HTML:

<ul class="overflowHidden blackOnePixelBorder resetPadddingAndMargin noListStyle">
    <li class="backgroundGreen floatLeft threePerRow heightTwoHunderPixels"></li>
    <li class="backgroundRed floatLeft threePerRow heightTwoHunderPixels"></li>
    <li class="backgroundBlue floatLeft threePerRow heightTwoHunderPixels"></li>
    <li class="backgroundRed floatLeft threePerRow heightTwoHunderPixels"></li>
    <li class="backgroundBlue floatLeft threePerRow heightTwoHunderPixels"></li>
    <li class="backgroundGreen floatLeft threePerRow heightTwoHunderPixels"></li>
</ul>

CSS

.resetPadddingAndMargin {
    padding: 0;
    margin: 0;
}
.noListStyle {
    list-style: none;
}
.overflowHidden {
    overflow: hidden;
}
.blackOnePixelBorder {
    border: 1px solid #000;
}
.backgroundRed {
    background: #f00;
}
.backgroundGreen {
    background: #0f0;
}
.backgroundBlue {
    background: #00f;
}
.floatLeft {
    float: left;
}
.threePerRow {
    width: 33.33%;
}
.heightTwoHunderPixels {
    height: 200px;
}

http://jsfiddle.net/bqh8he7e/

Как вы собираетесь решить проблему перекрытия CSS-кода или хотите использовать один класс в разных разрешениях или устройствах без перезаписи, когда хотите иметь все квадраты в одной строке? (* без JS)

(Надеюсь, я понял вашу идею)