CSS - множественный vs одиночный класс на элементе

Ответ 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 разумным способом обычно крайне не оптимально с точки зрения производительности. Но по сравнению с другими факторами любая разница будет незначительной.