Lo que es mejor en CSS: div.algo o simplemente .algo

Question

En CSS, al establecer un estilo en un div (por ejemplo) hay algún beneficio en incluir el 'div' que no sea para darle más precisión para la coincidencia. ¿Es más rápido para el navegador representar tal vez?

decir es:

div.something { font-size: 1em; } 

mejor que

.something { font-size: 1em; } 

por cualquier otra razón que para reducirlo a sólo divs?

(La razón por la que pido es que se me ocurrió hace poco con un sitio prominente que incluye las 'DIV, pero la mayoría tienden para no molestar)

ACTUALIZACIÓN:

Gracias por todas las respuestas. La conclusión es que la velocidad es un factor que no se nota, por lo que vale la pena ignorarlo. Y el consenso sobre la mejor práctica es que incluir la etiqueta es más limpio: la regla general debería ser mantener el CSS lo más "ajustado" posible para el estilo requerido.

Answer 1

Además de los diferentes semántica de ambos selectores, lee esto: Speed of CSS

Answer 2

Bueno, si quieres que otras etiquetas con el mismo nombre de clase tengan otro aspecto, puede ser una buena idea hacerlo.

Siempre incluyo el nombre de la etiqueta para una mejor legibilidad y estoy seguro de que no anularé otras reglas si comparten un nombre de clase.

Answer 3

Bueno, creo que el único propósito es como dijiste "para limitarlo a solo divs". Para que <p class="something"> se comporte igual o no que el div ...

Answer 4

Creo que este problema es muy similar al concepto de programación generalmente bien conocido de limitación de alcance: limita el alcance de tus variables y otros recursos al mínimo .

Del mismo modo, si sabes que un estilo solo se usará con divs con esa clase, tiene sentido limitar el "alcance de la clase" a los divs. Hace menos lío y hace que sus hojas de estilo sean algo más fáciles de mantener.

Answer 5

si desea utilizar una clase en algo más que divs, sólo puede utilizar una clase general como

.something{} 

pero el más específica una clase es, la más prominente es, independientemente del orden, es decir:

#someID div.something { background: green; } 
div.something { background: blue;} 
.something { background: red; } 

Desde el primero es el más específico:

<div class="something"> this will be blue </div> 
<div id="someID"> 
    <div class="something"> 
    this will be green 
    </div> 
</div> 
<p class="something">this will be red</div> 

Answer 6

Agregar div al inicio del selector crea una dependencia adicional entre la regla css y el documento html. Cambiar el tipo de elemento de repente también requiere que cambie el CSS, sin una buena razón.

Para el escenario en el que necesita especificar el tipo de elemento para discernir entre dos reglas, sugeriría cambiar los nombres de clase en su lugar. No esperes que div sea siempre un div. Puede tener más sentido como p o fieldset o etiqueta.

Evite las dependencias innecesarias.

Las reglas de baja especificidad CSS son un problema, pero agregar el tipo de elemento no es la solución. Si mi .price se cambió a div.price, la probabilidad de coincidencias involuntarias se redujo solo marginalmente. Sería mucho mejor que el espacio de nombres con un #id externo.

Answer 7

Agregar el selector de elementos (div) a la regla aumenta la specificity de la norma, por lo que es más importante que un selector de clase genérica (.something)

También hace que su CSS más legible. Si todos los selectores de su clase no están pre-relacionados con elementos, significa que sus clases son ambiguas y podrían aplicarse a cualquier elemento. (Esta podría ser la intención, pero con mayor frecuencia no lo es)

Como se indicó anteriormente, hay una compensación de velocidad mediante el uso de nombres de elementos, pero apenas se nota.

Answer 8

Las clases deben estar bien estructuradas, ser funcionales y atómicas. A veces es bueno para reducirlo a element.name si cree que tendrá situaciones como

div.highlight { 
    background: #FF00FF; 
} 

span.highlight, p.highlight { 
    color: #FF00FF; 
} 

De lo contrario habría que hacer algo como

.highlight { 
    color: #FF00FF; 
} 

div.highlight { 
    background; #FF00FF; 
    color: inherit; 
} 

Creo que, como regla general del pulgar, que las definiciones de una clase deberían funcionar para todos los elementos que se le aplican. Si hay una situación específica en la que tendría que anular las definiciones predeterminadas de una clase que debería, para empezar, al menos defina una nueva clase para que no se rompa la presentación en otros elementos.

Usted también tiene que trabajar fuera cuando para evitar este tipo de dependencias estructurales en sus selectores, al igual que

div#main div.section h1.title span.link { } 

pero sería mejor escribir simplemente

div#main span.link {} 

Answer 9

No lo hará haga una diferencia a menos que reutilice la clase something en otro lugar, y por supuesto no tiene conflictos que se deben resolver usando el esquema de prioridad de CSS. Si este es el caso, div.something tiene una prioridad más alta que .something ya que es más específico. Eche un vistazo a Calculating a selector's specificity desde el CSS2 Specification.