css - usar seletor universal '*' vs. html ou seletor de corpo?

A aplicação de estilos à tag body será aplicada a toda a página, portanto

body { font-family: Verdana }

será aplicado a toda a página. Isso também pode ser feito com

* {font-family: Verdana} 

que se aplica a todos os elementos e, portanto, parece ter o mesmo efeito.

Entendo o princípio de que, em primeira instância, o estilo está sendo aplicado a uma tag, corpo para toda a página, enquanto que no segundo exemplo, a fonte está sendo aplicada contra cada elemento html individual. O que estou perguntando é qual é a diferença prática em fazer isso, quais são as implicações e qual é uma razão, situação ou melhor prática que leva ao uso um do outro.

Um efeito colateral é certamente a velocidade (+1 Rob). Estou mais interessado no motivo real para escolher um sobre o outro em termos de funcionalidade.

Diferenças funcionais entre essas duas opções do seletor CSS ... (minha opinião)

corpo

• Aplica propriedades de estilo ao elemento do corpo.
• Elementos dentro do corpo podem herdar os valores da propriedade. Algumas propriedades são padronizadas como 'herdar'.
• Declarações de estilo que correspondem a um elemento dentro do corpo podem substituir o estilo herdado.

O seletor universal * (todos os elementos)

• Aplica propriedades de estilo a todos os elementos individuais.
• Substitui as propriedades herdadas do estilo e os 'valores iniciais' padrão. Bloqueia a herança.
• Outros seletores de CSS mais específicos que correspondem a um elemento substituirão as propriedades de estilo aplicadas por *.

Sugestões

1. Use body para propriedades de estilo que herdar como padrão, como fonte, cor, a fim de fornecer um valor padrão sensível para elementos, reduzindo a necessidade de codificar explicitamente para todos os casos e preservando a capacidade de elementos contidos em níveis inferiores abaixo do corpo para herdar de seus pais.
2. Provavelmente é melhor não usar o Seletor Universal * neste caso. Ele interrompe a herança entre outros elementos dentro do corpo e pode forçá-lo a escrever mais regras css para compensar. Pode ser um fator para diminuir a renderização das páginas. Isso depende do tamanho e do conteúdo da página e de quantas regras de CSS existem.

Tente algo assim

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

contra

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

E veja quais estilos são aplicados às células da tabela.

Há uma diferença entre "aplicado a todo o documento" e "aplicado a todos os elementos do documento" ao lidar com folhas de estilo em cascata .

A aplicação de um estilo em cascata ao corpo aplica-o a todas as marcas dentro do corpo até que uma marca o substitua. Em seguida, o estilo substituído é aplicado a todas as tags dentro desse.

No entanto, existem alguns estilos que não são exibidos em cascata, como margem e preenchimento (geralmente onde não faz sentido). Eles só podem ser aplicados a tags específicas e é aí que um curinga pode ser útil (embora raramente).

A maioria dos estilos não em cascata também possui um valor de herdar (por exemplo margin: inherit,), o que significa "aceitar os valores da tag pai".

Esqueci os detalhes completos, mas, com o seletor *, o desempenho fica mais lento à medida que cada elemento é avaliado à medida que o navegador analisa o CSS e aplica o estilo. iirc, definindo a fonte, neste caso, apenas para o pai, faz uma referência para cada elemento e não é necessário trabalho adicional.

Também existem outras questões, mas, novamente, não me lembro de todas e não as utilizo * há anos.

A orientação geral para um bom design de CSS é ser o mais específico possível, mas não mais.

Portanto, no seu exemplo, aplicar o estilo ao elemento body seria o mais específico possível e certamente mais específico que o seletor '*'.

Como outros já mencionaram, body { font-family: Verdana }selecionará a fonte Verdena apenas para os elementos que herdam a font-stylepropriedade de seus pais, de modo que todos os seus pais também herdam a propriedade eventualmente formam o bodyelemento e * {font-family: Verdana}selecionará a fonte Verdena para todos os elementos. Gostaria de ilustrar a diferença com um exemplo:

Usando o seletor de corpo:

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>

Usando o selelctor universal *:

* 
{ 
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>

Use os códigos css e html dos exemplos que reconhecerá que o <input>elemento não herda o estilo da fonte e, portanto, o que você digitar no formulário obtém o estilo de fonte padrão da folha de estilos do agente do usuário. No segundo exemplo, o seletor universal *define explicitamente o estilo da fonte para cada elemento, incluindo o inputelemento.