CSS - множественный vs одиночный класс на элементе
Есть ли какой-либо прирост производительности при использовании одного элемента css vs multiples на элементе?
Пример: -
<div class="single-class"></div>
против
<div class="no-padding no-margin some-class some-other-class"></div>
Ответы
Ответ 1
Если у вас есть даже умеренно сложная таблица стилей и знаете, что вы делаете, использование нескольких классов имеет преимущество в полной мере использовать каскад, который, в конце концов, скорее всего, означает, что ваши файлы css будут меньше по мере того, как вы выиграли Не повторяйте код. Таким образом, в этом смысле это фактически оказывает положительное влияние на производительность (в зависимости от сложности вашего css).
Я пытаюсь представить, как выглядела бы таблица стилей jQuery UI, если бы она использовала подход с одним классом на элемент. Я предполагаю, что он удвоится по размеру.
Конечно, как и все говорили, удар настолько мал, что вы не заметите. Продолжайте использовать несколько классов и включите каскад!
FWIW, мне действительно не нравятся имена классов, такие как no-padding
, float-left
и ui-corner-all
. Хотя они имеют смысл для автора css, почти всегда предпочтительнее использовать семантический подход в сочетании с несколькими элементами в декларации (чтобы избежать дублирования правил). Используя первый метод, ваш css не имеет смысла, если вы решите, что no-padding
действительно нуждается в заполнении 1px, и что a.classname.float-left
действительно нужно плавать вправо.
Ответ 2
Технически, да меньше классов означает меньше передачи данных для HTML. Что касается CSS, каждый элемент должен быть проверен против каждого правила, поэтому меньшее количество классов может означать меньшее совпадение в зависимости от правил, которые вы написали.
Разница настолько мала, что это не легко заметно. Вы можете заметить разницу в производительности, если вы заполняете страницу десятками тысяч элементов, но в любом случае это будет плохой дизайн.
У меня есть одна проблема с примером, который вы предоставили. Ваши классы no-padding
, no-margin
описывают стили, которые являются плохими идеями. Если все ваши элементы some-class
также имеют класс no-margin
, тогда margin: 0
должен быть частью правила some-class
.
Не добавляйте классы для стилей, добавляйте стили для классов.
Ответ 3
Основное правило применяется в CSS, как и на других языках: не беспокойтесь об оптимизации на этом уровне, если вы не сталкиваетесь с серьезными проблемами с производительностью или не имеете десятков тысяч элементов. Используйте то, что более читаемо.
Там могут быть различия - использование селекторов CSS разумным способом обычно крайне не оптимально с точки зрения производительности. Но по сравнению с другими факторами любая разница будет незначительной.