Escribir CSS eficiente

Question

Ok por lo que en se está discutiendo otra pregunta algo, y este vínculo se mencionó:

https://developer.mozilla.org/en/Writing_Efficient_CSS

En ese artículo, dicen algunas cosas que no sabían, pero antes de que me pregunte por ellos, yo debería preguntar esto ... se aplica eso a CSS interpretado por Firefox? Perdona mi noobness, pero no estaba seguro de lo que entiende por Mozilla interfaz de usuario. (No me hagas daño!)

Si se aplica, cuando dicen:

  

Evitar el selector descendiente!

     

El selector descendiente es el más   selector de caras en el CSS. Está   terriblemente caro, especialmente si una   regla mediante el selector está en la etiqueta   o categoría universal. Con frecuencia lo   que realmente se desea es que el niño   selector. El uso del descendiente   selector está prohibido en la interfaz de usuario sin CSS   la aprobación explícita de la piel de   propietario del módulo.

* BAD - treehead treerow treecell { }
* BETTER, BUT STILL BAD (see next guideline) - treehead > treerow > treecell { }

El selector descendiente es sólo un espacio? Y entonces ¿cuál sería la diferencia entre ser niño y descendiente? El niño es un elemento dentro de otro, pero no es eso lo mismo que descendiente? Mientras escribo yo creo que podría haber imaginado. Un descendiente podría ser un niño / nieto / bisnieto / etc? Y el niño es sólo una profunda?

Lo siento de nuevo para el nivel de estúpido de mi pregunta ... pregunto, porque he estado constantemente utilizando descendientes en mi CSS para mi sitio. Pero sí, si no se trata de Firefox entonces toda esta cuestión no tiene sentido ...

Si no es sobre Firefox, ¿alguien tiene un enlace a un artículo que explica la eficacia de Firefox o navegadores en general?

Answer 1

En primer lugar - las sugerencias en este artículo son no para páginas HTML - que son específicamente para el Mozilla UI - XUL , por lo puede ser la mejor práctica para XUL, pero no para html.

La aplicación de la CSS en una página HTML media es una de las cosas más rápidas que suceden durante la carga de la página.
Además, el artículo puede sugerir la manera más rápida de aplicar reglas CSS, pero a qué costo? Por ejemplo, no sugieren tener más de una clase por regla:

  

BAD - .treecell.indented {}
  BUENO - .treecell-sangría {}

Esto es casi escandalosa . Todo ello puede conducir a CSS más rápido, pero a quién le importa? Asumiendo que ya tiene .treecell y .indented, siguiendo estas sugerencias conduce a complicada lógica , el mantenimiento difícil, css duplicado reglas, más difícil JavaScript (que cuesta mucho más que el CSS), etc. .
Sugieren no utilizar toda la riqueza de CSS selectores y la sustitución de estos selectores con las clases planas, lo cual es una lástima.

Answer 2

  

Un descendiente podría ser un niño / nieto / bisnieto / etc? Y el niño es sólo una profunda?

Sí, exactamente. Puesto que un niño sólo puede ser uno de profundidad, hay un espacio mucho más pequeño que el motor de renderizado tiene que buscar de forma recursiva para comprobar si la regla coincide o no.

Y sí, ese artículo se trata tanto Firefox como navegadores en general. La mayoría (todos?) De lo que es en ella se aplica a cualquier motor de renderización de páginas.

Answer 3

  

... ya que estoy escribiendo yo creo que podría haber imaginado. Un descendiente podría ser un niño / nieto / bisnieto / etc? Y el niño es sólo una profunda?

En efecto.

Una cosa que puedo añadir en el lado de la eficiencia de las cosas es: No utilizar * a menos que realmente serio . Es bastante intensa como reglas van y la mayoría de la gente podría salirse simplemente especificando los elementos que realmente desean dirigirse.

Answer 4

Un "padre> niño" es sólo un paso hacia abajo, mientras que un "ancestro descendiente" puede haber uno o más pasos hacia abajo.

Aún mejor es utilizar las etiquetas "#id" siempre que sea posible de manera que hay menos DOM búsqueda.

Answer 5

La interfaz de usuario es CSS para estilizar la parte interna del navegador -. El diálogo de configuración, extensiones de las interfaces, etc.

Los descendientes y los niños son diferentes, los niños son mucho más específicos y dan lugar a mucho menos tener que ser considerado.

Answer 6

El problema con el selector niño es que no está tan bien apoyado. Por supuesto, esto podría haber sido fijado en los nuevos navegadores IE.

En cualquier caso, al escribir CSS para una página web que no va a ser tan grande de un acuerdo. Dudo que las fracciones de segundos se ahorraría en carga de la página, incluso se notarán. En este artículo se parece más dirigido hacia la gente que escribe cosas para el navegador real, no sitios web.

Answer 7

aún más rápido Sitios Web" tiene un capítulo entero en esta titulado "Los selectores CSS Simplificación". Se hace referencia a su enlace en Mozilla.

Creo que dos puntos que vale la pena tener en cuenta.

1. Sí, si se hizo esta medida de lo posible, el código HTML y CSS sería un lío de estilos y posiblemente incluso más ineficiente debido al tamaño del archivo añadido. Es responsabilidad del desarrollador para elegir el mejor equilibrio. No agonizan por la optimización de cada línea como usted lo escribe, que funcione a continuación, ver lo que puede ser beneficioso.

2. Como dijo otro comentarista, que toma los milisegundos del navegador para averiguarlo cómo aplicar sus estilos al cargar la página. Sin embargo, el impacto que esto puede tener mucho más grande es con DHTML. Cada vez que cambie el DOM, el navegador re-aplica la hoja de estilo toda la página. En este escenario muchos selectores ineficientes podrían tener un impacto visible en su página (percibida lagginess / falta de respuesta).

Answer 8

La documentación de velocidad página de Google (un complemento de Firefox / Firebug) incluye un buena página en CSS eficiente .