css - использовать универсальный селектор '*' против HTML или селектора тела?

Применение стилей к тегу body будет применено ко всей странице, поэтому

body { font-family: Verdana }

будет применяться ко всей странице. Это также может быть сделано с

* {font-family: Verdana} 

который будет применяться ко всем элементам и, следовательно, будет иметь тот же эффект.

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

Одним из побочных эффектов, безусловно, является скорость (+1 Роб). Меня больше всего интересует фактическая причина выбора одного из других с точки зрения функциональности.

Функциональные различия между этими двумя вариантами выбора CSS ... (мое мнение)

тело

• Применяет свойства стиля к элементу тела.
• Элементы внутри тела могут наследовать значения свойств. Некоторые свойства по умолчанию «наследуют».
• Объявления стиля, которые соответствуют элементу в теле, могут переопределить унаследованный стиль.

Универсальный селектор * (все элементы)

• Применяет свойства стиля ко всем отдельным элементам.
• Заменяет унаследованные свойства стиля и «начальные значения» по умолчанию. Блокирует наследование.
• Другие, более конкретные селекторы CSS, которые соответствуют элементу, заменят свойства стиля, примененные *.

Предложения

1. Используйте тело для свойств стиля, которые по умолчанию наследуются, таких как шрифт, цвет, чтобы обеспечить разумное значение по умолчанию для элементов, уменьшая необходимость явного кода для каждого случая и сохраняя возможность для элементов, содержащихся на более низких уровнях ниже тела, наследовать от своих родителей.
2. Вероятно, лучше не использовать Universal Selector * в этом случае. Он прерывает наследование между другими элементами внутри тела и может вынудить вас написать больше правил CSS для компенсации. Это может быть причиной замедления рендеринга страниц. Это зависит от размера и содержания страницы, а также от количества правил CSS.

Попробуйте что-то вроде этого

body { font-family: Verdana }
table { font-family: Arial }

против

* { font-family: Verdana }
table { font-family: Arial }

И посмотрите, какие стили применяются к ячейкам таблицы.

Существует различие между «применяется ко всему документу» и «применяется к каждому элементу документа», когда вы имеете дело с каскадными таблицами стилей.

Применение каскадного стиля к телу применяет его ко всем тегам внутри тела, пока тег не перезапишет его. Затем перезаписанный стиль применяется ко всем тегам в этом.

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

Большинство не каскадных стилей также имеют значение наследования (например, margin: inherit), что означает «принять значения родительского тега».

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

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

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

Итак, в вашем примере применение стиля к элементу body будет как можно более конкретным и определенно более конкретным, чем селектор '*'.

Как уже упоминалось, body { font-family: Verdana }будет выбрать шрифт Verdena только те элементы , которые наследуют в font-styleсобственность от своих родителей, что все его родителей тоже наследуют свойство eventualy образуют bodyэлемент, и * {font-family: Verdana}будет выбирать шрифт Verdena для всех элементов. Я хотел бы проиллюстрировать разницу на примере:

Используя селектор тела:

body 
{ 
font-family: courier;
}

<p> This is paragraph with courier font </p>
<form>
<label for="X">Please type inside me: </label><input type="text" naem="X" value="Not Courier :("> 
</form>

Используя универсальный селектор *:

* 
{ 
font-family: courier;
}

<p> This is paragraph with courier font </p>
<form>
<label for="X">Please type inside me: </label><input type="text" naem="X" value="Courier :)"> 
</form>

Используйте коды css и html примеров, которые вы поймете, что <input>элемент вообще не наследует стиль шрифта и, следовательно, все, что вы вводите в форму, получает стиль шрифта по умолчанию для таблицы стилей агента пользователя. Во втором примере универсальный селектор *явно устанавливает стиль шрифта для каждого элемента, включая inputэлемент.