3

Me pregunto que interpreta más rápido un navegador:

  1. Agregar selector con una clase por aparte para dar estilo diferente a un objeto, por ejemplo

    <div class="my-box">
      <p class="color-red"> El parrafo que esta en el div es rojo</p>
    </div>
    
  2. indicarle al navegador que el párrafo que esta en el div con la clase my-box sea rojo, de la siguiente manera

    .my-box p {
        color: red;
    }
    
  3. si lo hago incluso mas largo, por ejemplo le digo que el párrafo que está en my-box que está en el bloque-1 de la page-lading, por ejemplo

    .page-landing .bloque-1 .my-box p {
        color: red;
    }
    

Me preguntaba si este tipo de jerarquía vuelve más rápida o lenta la lectura de estilos del navegador.

2 respuestas 2

2

Existe algo llamado "Cálculo del valor de especificidad de CSS". La Especificidad según lo estipulado por el W3C se calcula separando, primero Los Selectores de CSS y las reglas en cuatro categorías o grupos, y luego asignando a cada grupo una clasificación que asigna un valor ponderado. Para fines de representación gráfica, la primera agrupación categorizada en el lado izquierdo tiene un valor de especificidad más alto y, a medida que las agrupaciones se mueven de izquierda a derecha, los valores de especificidad continúan disminuyendo, y la última agrupación tiene el menor valor de especificidad. La especificidad se basa únicamente en la forma del selector. Veamos:

introducir la descripción de la imagen aquí

  • Si el elemento tiene un estilo en línea, automáticamente 1 gana (1,0,0,0 puntos)
  • Por cada valor de ID, aplicar 0,1,0,0 puntos.
  • Para cada valor de clase (o pseudo-clase o selector de atributo), aplique 0,0,1,0 puntos
  • Para cada referencia de elemento, aplicar 0,0,0,1 punto.

En general, puede leer los valores como si fueran solo un número, como 1,0,0,0 es "1000", y así claramente gana una especificidad de 0,1,0,0 o "100". Las comas están ahí para recordarnos que esto no es realmente un sistema "base 10", ya que técnicamente podría tener un valor de especificidad de 0,1,13,4 como, y que "13" no se deriva como un sistema base 10 lo haría.

Al crear su hoja de estilo CSS, debe mantener la menor especificidad posible. Según mis cálculos esta sentencia sería la más rápida.

.my-box p {
    color: red;
}
1
  • Exelente Muchas Gracias Commented el 6 may. 2019 a las 23:41
0

La jerarquia de interpretación de estilos es asi:

1- Primero interpreta las instrucciones que finalizan con "!important" , estas se sobreponen a cualquier instruccion dada en cualquier otra parte de tu proyecto.

2- Despues esta el selector del ID 3- Despues las CLASS 4- Los estilos propios de la etiqueta

Por ultimo si dos reglas tienen el mismo peso , toma la ultima regla especificada.

Espero te sirva. Saludos

1
  • Lo que indicas esta bien, pero en realidad creo que se sale del contexto de la pregunta, sin embargo muchas gracias Commented el 6 may. 2019 a las 23:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.