Блог

p.error Лучше или хуже, чем .error ?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   Выигрывает тот, у кого наивысший приоритет. Если несколько элементов имеют одинаковый приоритет, перейдите к 3.

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

4. Выигрывает тот, который находится последним в исходном коде!

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

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

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

Причина в специфичности. Например…

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

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

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

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

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

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

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

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

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

Примечание к сноске

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

 .error
{
   color:red;
}

h1
{
font-size:2em;
}

p
{
   font-size:0.8em;
}


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

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

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