¿Es p.error mejor o peor que .error?¿El selector de CSS específico del elemento está dañado?
He leído que los selectores específicos de elementos son malos y deben usarse solo si realmente los necesita pero nadie parece saber por qué. Quiero decir que entiendo que .error es mejor para la reutilización del código, pero ¿hay alguna razón específica por la que no deba abordar la clase con el elemento siempre?
.error es más eficiente que p.error.
Para entender por qué esto es más eficiente, le recomiendo que lea this article en css tricks.
El razonamiento también se explica aquí: [No permitir elementos sobrecalificados] (https://github.com/stubbornella/csslint/wiki/Disallow-overqualified-elements). –
Los selectores CSS se leen de derecha a izquierda. Entonces p.error tiene un paso adicional al .error. Esto puede resultar en un conjunto más pequeño o no, depende de su marcado.
Sin embargo, esto es una micro micro optimización. No habrá un golpe de rendimiento a menos que hablemos de una gran cantidad de selectores.
Aquí está un gran artículo sobre los selectores CSS que elabora sobre la forma en que se evalúan: http://css-tricks.com/efficiently-rendering-css/
Como regla general, cuantos menos selectores tenga que evaluar un navegador, mejor.
p.error no es necesariamente "peor" que .error, si .error se utiliza para varias etiquetas. p.ej. div.error (ver una nota al pie en la parte inferior).
Pero si sólo se usa en un párrafo de todos modos, y luego tener p.error se acaba de hacer el trabajo del navegador más difícil es decir
En primer lugar, tendrá que encontrar todos los elementos con el atributo de clase error y luego filtrar éstos tan solo por tener etiquetas que son p.
He aquí una lectura interesante en Optimize browser rendering en el sitio de velocidad de página de Google.
Pie Nota
Sin embargo, si es necesario utilizar una clase en múltiples etiquetas, es probablemente mejor sólo para poner en los estilos CSS que se aplican a esas etiquetas en lugar de intentar separarla. p.ej.
.error
{
color:red;
}
h1
{
font-size:2em;
}
p
{
font-size:0.8em;
}
<h1 class="error">Bad Heading!</h1>
<p class="error">bad!</p>
Por lo tanto, ese tipo de derrotas la necesidad de prefijar las clases con las etiquetas de todos modos.
Espero que esto ayude!
No, no es malo, pero no siempre puede ser necesario
herramientas como Page Speed de Google y YSlow! referirse a este tipo de selectores como "más cualificados", tal vez ahí es donde está escuchando el "es malo" parte de - reading material
Tomemos por ejemplo p#myid - un ID siempre debe ser único en una página de todos modos, por lo tanto no no es necesario para calificarlo con el elemento p.una ID ya tiene el peso más alto cuando se está contando la especificidad, así que de nuevo es totalmente redundante agregar la parte extra para intentar agregar más especificidad.
Sin embargo, con nombres de clase como su ejemplo, a veces puede ser deseable agregar el calificador ya que puede desear que la clase sea reutilizable en diferentes elementos de tipo pero tenga diferentes propiedades dependiendo de si es div o p para ejemplo, el "calificativo" entonces hace que el selector de poco más específica
.error {background: red; margin: 5px;}
p.error {margin: 2px;}
el código anterior significa que puede utilizar la clase error en cualquier elemento y tendrá 5PX márgenes sin embargo si se establece la clase de error sobre un elemento p el segundo selector está haciendo algo, está superando los márgenes de la primera pero sigue obteniendo el color de fondo
Así que hacen un trabajo, pero con demasiada frecuencia se ve demasiada gente que califica todos sus elementos cuando no es necesario ... por ejemplo, si solo aplica esa clase .error a un elemento p entonces no necesitarías el segundo selector.
La regla de oro es hacer que el selector sea único lo más rápido posible comenzando desde el lado derecho del mismo.
El motivo es la especificidad. Por ejemplo ...
lo tanto, si tiene acceso de clase y etiqueta, ese estilo tiene una especificidad de 2 (1 + 1).
Más tarde, si intentas diseñar todos los elementos .error, pero tienes un estilo conflictivo en los elementos p.error, la mayor especificidad ganará. Esto puede causar algunos dolores de cabeza más adelante. Es por eso que quizás no desee usar siempre tag + class.
(Dicho esto, especificidad resuelve muchos más problemas de los que crea, y generalmente es considerado como bastante impresionante.)
Tener un selector muy específico, no será de mal desempeño, pero si hay una gran cantidad de las declaraciones aplicables para un elemento, entonces la ejecución tendrá éxito. La única preocupación de lo contrario es que aumenta el no. de bytes que se descargarán para cargar la hoja de estilo. Confíe en mí, Cada carácter adicional en HTML pasado es malo y se reducirá a la velocidad de carga de la página.
Durante cascada CSS se aplica por los navegadores de hoy en día, el siguiente es el proceso que se produce para cada propiedad CSS para cada elemento de la página web:
Reunir todas las declaraciones de la propiedad de todo el fuentes. Esto incluye estilos de navegador predeterminados y estilo de usuario personalizado, así como hojas de estilo de autor. Si hay más de uno, proceda con 2.
Ordenar las declaraciones de importancia y origen en el siguiente orden (de menor a mayor prioridad):
El que tenga la prioridad más alta gana. Si más de uno tiene la misma prioridad, proceda con 3.
Clasifique por especificidad del selector. El que tiene el selector más específico gana. Si no hay ganador claro, proceda a 4.
¡El que sale último en la fuente gana!
Si la cascada no establece una propiedad CSS de un elemento, el navegador va a caer de nuevo a usar una propiedad heredada de los padres del elemento (esto sólo ocurre para algunas propiedades), de lo contrario la propiedad se establece en el valor predeterminado de CSS.
De acuerdo con el proceso anterior, si utiliza muchos selectores más específicos, habría una opción hecha después de al menos 3 niveles de profundidad. Por lo tanto, cuanto más el no. de las declaraciones que podrían ser aplicables a un elemento, menor será el rendimiento.
Por lo tanto, Debe ser tan específico como tenga sentido.
'.error' podría ser más rápido que' p.error', pero p.error es más preciso y siempre tendrá mi preferencia. ¿Qué pasa si tienes un 'body> div.error'? Eso coincidirá con '.error' cuando solo quisiste unir' p.error' ... Lo mismo ocurre con las clases html: siempre incluyo 'html' en el selector, porque nunca sabes (?) Qué elementos tienen qué clases en cualquier parte del documento. – Rudie