Является ли CSS-селектор для элемента плохим? - PullRequest
12 голосов
/ 24 мая 2011

Является ли p.error лучше или хуже, чем .error?

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

Ответы [ 6 ]

9 голосов
/ 24 мая 2011

CSS-селекторы читаются справа налево. Таким образом, p.error имеет один дополнительный шаг к .error. Это может привести к меньшему набору или нет - зависит от вашей разметки.

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

Вот отличная статья о CSS-селекторах, в которой подробно описывается, как они оцениваются: http://css -tricks.com /ffective-render-css /

6 голосов
/ 24 мая 2011

.error более эффективен, чем p.error.

Чтобы понять, почему это более эффективно, я рекомендую вам прочитать эту статью на уловках css.

2 голосов
/ 24 мая 2011

нет, это не плохо, но это не всегда необходимо

инструменты, такие как Google PageSpeed ​​и YSlow!относитесь к этим типам селекторов как к «чрезмерно квалифицированным», возможно, именно здесь вы слышите «это плохо» из - материала для чтения

, например, p#myid - идентификаторв любом случае всегда должен быть уникальным на странице, поэтому совсем не нужно указывать его для элемента p.ID уже имеет наибольший вес при подсчете специфичности, поэтому снова добавляется дополнительная часть, чтобы попытаться добавить более специфичность, излишне.

Однако с именами классов, такими как ваш пример, иногда может быть определенно желательно добавитьквалификатор, так как вы можете захотеть, чтобы класс можно было повторно использовать в элементах разных типов, но иметь разные свойства, в зависимости от того, например, является ли он div или p, а затем "квалификатор" делает селектор немного более конкретным

.error {background: red; margin: 5px;}
p.error {margin: 2px;}

Приведенный выше код означает, что вы можете использовать класс error для любого элемента, и он будет иметь поля 5px, однако, если вы установите класс ошибки для элемента p, второй селектор фактически что-то делает, этоперешагнув через поля первых, но по-прежнему получая цвет фона

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

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

1 голос
/ 24 мая 2011

Наличие очень специфического селектора не будет означать плохую производительность, но если для элемента применимо много объявлений, тогда производительность получит удар. Единственное беспокойство в противном случае - это увеличениенет.байтов для загрузки для загрузки таблицы стилей.Поверьте мне, Каждый дополнительный передаваемый символ в HTML является злым и будет означать снижение скорости загрузки страницы.

Во время применения каскадирования CSS в современных браузерах происходит следующий процессдля каждого свойства CSS для каждого элемента веб-страницы:

  1. Соберите все объявления для свойства из всех источников.Это включает стили браузера по умолчанию и пользовательский стиль, а также таблицы стилей автора.Если их несколько, перейдите к пункту 2.

  2. Сортируйте объявления по важности и происхождению в следующем порядке (от самого низкого до самого высокого приоритета):

    • таблицы стилей агента пользователя (стили браузера по умолчанию)
    • обычные объявления в таблице стилей пользователя (пользовательская таблица стилей)
    • обычные объявления в таблице стилей автора (таблицы стилей веб-страницы; внешние, встроенные и встроенные стили)
    • ! важные объявления в таблице стилей автора
    • ! важные объявления в таблице стилей пользователя

    Тот, который имеет наивысший приоритетвыигрывает.Если более одного имеют одинаковый приоритет, перейдите к 3.

  3. Сортировка по специфичности выбора.Победит тот, у кого самый специфический селектор.Если нет явного победителя, перейдите к 4.

  4. Победит тот, который последним в источнике!

Если каскад не устанавливаетCSS-свойство элемента, тогда браузер обратится к использованию унаследованного свойства от родительского элемента (это происходит только для некоторых свойств), в противном случае для свойства устанавливается значение по умолчанию CSS.

В соответствии сВышеупомянутый процесс, если вы используете много более конкретных селекторов, будет выбор, сделанный по крайней мере после 3 уровней.Следовательно, чем больше, тем нет.объявлений, которые могут быть применимы к элементу, тем ниже будет производительность.

Итак, Вы должны быть настолько конкретными, насколько это имеет смысл.

0 голосов
/ 24 мая 2011

Причина в специфике. Например ...

  • + 1 каждый доступ по классу
  • + 1 каждый доступ по тегу
  • + 10 каждый доступ по идентификатору
  • и т.д.

Итак, если у вас есть доступ к классу и тегу, этот стиль имеет специфику 2 (1 + 1).

Позже, если вы пытаетесь стилизовать все элементы .error, но у вас есть противоречивый стиль в элементах p.error, победит более высокая специфичность. Это может вызвать некоторые головные боли в будущем. Вот почему вы можете не всегда использовать тег + класс.

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

0 голосов
/ 24 мая 2011

Как правило, чем меньше селекторов браузер должен оценивать, тем лучше.

p.error не обязательно «хуже», чем .error, если .error используется для несколькихтеги.например, div.error (см. примечание в нижней части).

Но если в любом случае он используется только в абзаце, то наличие p.error только заставляет браузер работать тяжелее, т.е.

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

Вот несколько интересных статей о Оптимизация рендеринга в браузере вСайт Google Page Speed.


Foot Note

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

.error
{
   color:red;
}

h1
{
font-size:2em;
}

p
{
   font-size:0.8em;
}


<h1 class="error">Bad Heading!</h1>
<p class="error">bad!</p>

Такого рода победы в любом случае требуют префикса классов с тегами.

Надеюсь, это поможет!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...