Является ли p.error лучше или хуже, чем .error?
Я прочитал, что селекторы, специфичные для элемента, являются плохими и должны использоваться только в случае необходимости, но никто, кажется, не знает почему. Я имею в виду, что понимаю, что .error лучше для повторного использования кода, но есть ли какая-то конкретная причина, почему я не должен обращаться к классу с элементом всегда?
.error более эффективен, чем p.error.
Чтобы понять, почему это более эффективно, я рекомендую вам прочитать эту статью в трюках css.
Селектора CSS читаются справа налево. Итак, p.error имеет один дополнительный шаг к .error. Это может привести к меньшему набору или нет - зависит от вашей разметки.
Однако это микро-микро-оптимизация. Не будет удара производительности, если мы не будем говорить о большом количестве селекторов.
Вот отличная статья о селекторах CSS, которая подробно описывает, как они оцениваются: http://css-tricks.com/efficiently-rendering-css/
нет, это не плохо, но это может не всегда быть необходимым
инструменты, такие как Google PageSpeed и YSlow! обратитесь к этим типам селекторов как к "более квалифицированным", возможно, к тому, что вы слышите "плохую" часть - материал для чтения
возьмите, например, p#myid - идентификатор всегда должен быть уникальным на странице в любом случае, поэтому нет никакой необходимости квалифицировать его с помощью элемента p. идентификатор уже имеет самый высокий вес, когда специфика подсчитывается, поэтому снова полностью избыточно добавить дополнительную часть, чтобы попытаться добавить дополнительную специфику.
Однако с именами классов, такими как ваш пример, иногда может быть желательно добавить квалификатор, поскольку вы можете захотеть, чтобы класс был повторно использован для разных типов элементов, но имел разные свойства в зависимости от того, является ли это div или p например, "квалификатор" затем делает селектор немного более конкретным
.error {background: red; margin: 5px;}
p.error {margin: 2px;}
Вышеприведенный код означает, что вы можете использовать класс error для любого элемента и иметь 5px-поля, но если вы установите класс ошибки в элементе p, второй селектор действительно что-то делает, он перебирает первые поля, но все еще получая цвет фона
Таким образом, они выполняют задание, но слишком часто вы видите слишком много людей по поводу квалификации всех своих элементов, когда это не обязательно. Например, если вы только применяете этот класс .error к элементу p, тогда вам не понадобится второй селектор.
Эмпирическое правило состоит в том, чтобы сделать селектор уникальным как можно быстрее, начиная с его правой стороны.
Наличие очень специфического селектора не будет означать плохую производительность, но если для элемента будет много деклараций, то производительность будет иметь успех. Единственное беспокойство в том, что это увеличивает значение. байтов, загружаемых для загрузки таблицы стилей. Поверьте мне, каждый лишний символ в HTML передается злом и будет уменьшать скорость загрузки страницы.
Во время каскадирования CSS применяются современные браузеры, следующий процесс, который возникает для каждого свойства CSS для каждого элемента веб-страницы:
Соберите все объявления для свойства из всех источников. Это включает в себя стили браузера по умолчанию и пользовательский стиль, а также стили стилей автора. Если их больше одного, перейдите к 2.
Сортировка деклараций по важности и происхождению в следующем порядке (от наименьшего до наивысшего приоритета):
Побеждает тот, кто имеет наивысший приоритет. Если более одного имеют одинаковый приоритет, переходите к 3.
Сортировка по специфичности селектора. Побеждает тот, у кого самый специфический селектор. Если нет четкого победителя, перейдите к 4.
Побеждает тот, который приходит последним в источнике!
Если каскад не устанавливает свойство CSS для элемента, браузер возвращается к использованию унаследованного свойства из родительских элементов (это происходит только для некоторых свойств), в противном случае для свойства задано значение по умолчанию CSS.
В соответствии с вышеописанным процессом, если вы используете множество более специфических селекторов, выбор будет сделан по крайней мере на 3 уровнях. Следовательно, чем больше нет. деклараций, которые могут быть применимы к элементу, тем ниже будет производительность.
Итак, Вы должны иметь такое специфическое значение, как это имеет смысл.
Как правило, меньшее количество селекторов, которые браузер должен оценивать, лучше.
p.error не обязательно "хуже", чем .error, если .error используется для нескольких тегов. например div.error (см. нотную заметку внизу).
Но если он используется только в абзаце, то p.error просто заставляет браузер работать усерднее.
Сначала нужно будет найти все элементы с атрибутом class 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>
Таким образом, это порождает необходимость префикса классов с тегами в любом случае.
Надеюсь, это поможет!
Причина - специфика. Например...
Итак, если у вас есть доступ к классу и тегу, этот стиль имеет спецификацию 2 (1 + 1).
Позже, если вы пытаетесь стилизовать все элементы .error, но у вас есть противоречивый стиль в элементах p.error, более высокая специфика победит. Это может привести к некоторым головным болям по линии. Вот почему вы не можете всегда использовать класс tag +.
(Говоря это, специфика решает гораздо больше проблем, чем создает, и обычно рассматривается как Pretty Awesome.)