div # name vs #name

Question

Sé que en una hoja de estilo div # name y #name hacen lo mismo. Personalmente me he acostumbrado a usar div # name para la mayoría del estilo que hago, con el razonamiento de que es un poco más rápido, y significa que puedo identificar elementos HTML más fácilmente mirando el CSS.

Sin embargo, todos los grandes sitios web que parecen mirar a su uso #nombre sobre div # Nombre (desbordamiento de pila incluida)

De hecho me resulta muy difícil encontrar muchos sitios web en absoluto que el uso div # nombre sobre #nombre

¿Hay alguna ventaja en hacer #name que me falta? ¿Hay alguna razón para usarlo sobre el nombre div # que aún no conozco?

Answer 1

Dado que las identificaciones tienen que ser únicas en la página, la mayoría de las identificaciones que se encontrarían solo aparecerán una vez en su hoja de estilo, por lo que tiene sentido no molestarse en incluir el elemento en el que aparecería. Excluirlo también ahorra algunos caracteres en su hoja de estilo, que para sitios grandes que se visitan millones y millones de veces al día, ahorra bastante ancho de banda.

Existe la ventaja de incluir el nombre del elemento en el caso en que una división con ID "nombre" podría aparecer de forma diferente que un span con ID "nombre" (donde mostraría una división en un tipo de página y un intervalo en otro tipo de página). Sin embargo, esto es bastante raro, y nunca me he encontrado personalmente con un sitio que haya hecho esto. Por lo general, solo usan diferentes ID para ellos.

Es cierto que incluir el nombre del elemento es más rápido, pero la diferencia de velocidad entre incluirlo y excluirlo en un ID selector es muy, muy pequeño. Mucho más pequeño que el ancho de banda que el sitio está guardando al excluirlo.

Answer 2

Dado que div parte de div#name no es necesario (porque ID son únicos por página), crea archivos CSS más pequeños para eliminarlo. Los archivos CSS más pequeños significan solicitudes HTTP más rápidas y tiempos de carga de páginas.

Y como señaló NickC, la falta de div permite cambiar la etiqueta HTML del elemento sin romper la regla de estilo.

Answer 3

Usando #nombre única:

Bueno, la primera ventaja obvia sería que una persona de editar el código HTML (plantilla o lo que sea) no se rompería CSS, sin saberlo, al cambiar un elemento.

Con todos los nuevos elementos HTML5, nombres de los elementos se han convertido mucho más intercambiables para el propósito de la semántica solo (por ejemplo, cambiar un <div> para ser un más semántica <header> o <section>).

Usando div # nombre:

Usted dijo "con el razonamiento de que es un poco más rápido". Sin algunos hechos concretos de los propios desarrolladores de motores de renderizado, dudaría en siquiera hacer esta suposición.

En primer lugar, es probable que el motor almacene una tabla hash de elementos por ID. Eso significaría que no es probable que la creación de un identificador más específico tenga un aumento de velocidad.

En segundo lugar, y más importante, tales detalles de implementación variarán de navegador a navegador y podrían cambiar en cualquier momento, por lo que incluso si tuviera datos, probablemente no debería permitir que esto influya en su desarrollo.

Answer 4

una cuestión de mantenibilidad y legibilidad del código.

al declarar element#foo, el estilo de código se vuelve rígido: si se desea cambiar la estructura del documento o reemplazar los tipos de elementos, también habría que cambiar las hojas de estilo.

si declaramos #foo cumpliremos mejor con los principios de 'separación de preocupaciones' y 'KISS'.

Otro tema importante es que los archivos CSS se minizan por un par de caracteres, que pueden acumularse a muchos de los caracteres en hojas de estilo grandes.

Answer 5

Dado que un id. Como #name debe ser exclusivo de la página, no hay ninguna razón para ponerlo. Sin embargo, div#name tendrá una precedencia más alta, que puede (o no) ser deseada. Consulte this fiddle donde el siguiente #name no anula el css de div#name.

Answer 6

Uso el nombre div # porque el código es más legible en el archivo CSS.

también estructurar mi CSS como esto:

ul 
{ 
    margin: 0; 
    padding: 0; 
} 
ul.Home 
{ 
    padding: 10px 0; 
} 
ul#Nav 
{ 
    padding: 0 10px; 
} 

asi que estoy empezando genérica y específica y se pondrá más adelante.

Simplemente tiene sentido para mí.

Answer 7

yo supongo que la inclusión del nombre del elemento en el selector de ID en realidad sería más lento – los navegadores suelen elementos de hash con id atributos para el elemento más rápido mirar hacia arriba. Agregar el nombre del elemento agregaría un paso adicional que podría ralentizarlo.

Una de las razones por las que podría querer usar el nombre del elemento con identificación es si necesita crear un selector más fuerte. Por ejemplo, usted tiene una hoja de estilo de base con:

#titlebar { 
    background-color: #fafafa; 
} 

Pero, en unas pocas páginas, que incluyen otra hoja de estilo con algunos estilos que son únicas a esas páginas. Si quería anular el estilo en la hoja de estilo de base, se podría reforzar su selector:

div#titlebar { 
    background-color: #ffff00; 
} 

Este selector es más específico (tiene un mayor specificity), por lo que va a sobrescribir el estilo de base.

Otra razón por la que desearía usar el nombre del elemento con id sería si las páginas diferentes usan un elemento diferente para la misma identificación.Por ejemplo, usando un lapso en lugar de un enlace cuando no hay ningún vínculo apropiado:

a#productId { 
    color: #0000ff; 
} 
span#productId { 
    color: #cccccc; 
} 

Answer 8

Asociar el nombre div: http://jsfiddle.net/wWUU7/1/

CSS:

<style> 
div[name=DIVNAME]{ 
color:green; 
cursor:default; 
font-weight:bold; 
} 

div[name=DIVNAME]:hover{ 
color:blue; 
cursor:default; 
font-weight:bold; 
} 
</style> 

HTML:

<div name="DIVNAME">Hover This!</div> 

Lista de selectores CSS: http://www.w3schools.com/cssref/css_selectors.asp