CSS: ¿usar tipo de etiqueta antes de ID?

Question

Uno de los muchachos aquí en el trabajo pone el nombre de la etiqueta frente a todos sus selectores de CSS para los identificadores de elementos. Por ejemplo:

div#footer { 

} 

Esto, en lugar de sólo:

#footer { 

} 

Su fundamento es que se trata de una búsqueda más rápida para la mayoría de los navegadores, ya que no tienen que comprobar los id atributos de todos los tipos de elemento: solo div elementos. También señala que esto debe hacerse con clases (por ejemplo, div.header-label para elementos <div class="header-label"...).

Suena razonable y racional, pero ¿es cierto?

Answer 1

Su compañero de trabajo está mal, es exactamente lo contrario:

• https://developer.mozilla.org/en/Writing_Efficient_CSS
• http://code.google.com/intl/de-DE/speed/page-speed/docs/rendering.html

Pero también tienen en cuenta que la optimización de CSS es la micro-optimización y, finalmente, sólo irrelevante en la mayoría de los casos:

• http://meiert.com/en/blog/20090312/performance-of-css-selectors/

Answer 2

Probablemente no sea cierto; el motor de diseño es probable que construya una tabla hash.

Sin embargo, definitivamente no hará una diferencia notable, a menos que su página tenga una cantidad insana de elementos. (En cuyo caso tiene problemas peores)

Debe usar el selector que sea más legible.
Además, recuerde que alguien podría cambiar #footer a <span>.

Answer 3

Personalmente, no creo que el rendimiento sea un problema aquí, a menos que muchos estilos deban cambiarse dinamicamente.

En cualquier caso, los dos ejemplos son semánticamente diferentes ya que #footer cubrirá los casos que div#footer no. Así que, aparte del gusto personal, estamos hablando de dos cosas diferentes. Entonces, si realmente está usando ID como deberían ser, no hay ninguna diferencia.

Answer 4

La única vez que esto sería una práctica útil, en mi humilde opinión, es cuando tiene múltiples tipos de etiquetas usando la misma ID, que es de Por supuesto, no válido de todos modos. Sin embargo, si se le proporcionó un código HTML/CSS no válido para comenzar y no pudo corregirlo correctamente, usar TAGTYPE # ID podría ser útil.

Answer 5

Adjuntar la etiqueta a la identificación es más específico. Puedes crear una identificación en tu CSS que puedes aplicar a CUALQUIER elemento, pero si adjuntas el nombre de la etiqueta SOLO puedes usar esas reglas para ESO (a menos que menciones otros elementos, clases o identificadores con una coma) con esa identificación ver :

http://www.w3.org/TR/CSS2/selector.html#id-selectors

Answer 6

es difícil imaginar un uso válido para esta "característica" de CSS.

Supongamos que un formulario tiene un campo year.

input#year { 
    width: 4em; 
} 

Esto evitaría que la regla de la aplicación si, por ejemplo, el campo se representa como un select.

En cuanto al factor de rendimiento, creo que @Dave es el mejor desenmascarillado.