2009-08-14 6 views
8

Ok por lo que en se está discutiendo otra pregunta algo, y fue mencionado este enlace:escritura CSS eficiente

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

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

Si se aplica, cuando dicen:

Evitar el selector descendiente!

El selector descendiente es el selector más caro en CSS. Es tremendamente caro, especialmente si una regla que utiliza el selector está en la etiqueta o categoría universal. Con frecuencia lo que realmente se desea es el selector secundario. El uso del selector descendente está prohibido en UI CSS sin la aprobación explícita del propietario del módulo de su skin.

* 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 el niño y el descendiente? El niño es un elemento dentro de otro, pero ¿no es lo mismo que un descendiente? Mientras escribo creo que podría haberlo descubierto. Un descendiente podría ser un niño/nieto/bisnieto/etc? ¿Y el niño solo tiene una profundidad?

Perdón por el estúpido nivel de mi pregunta ... solo me preguntaba, porque he estado usando constantemente descendientes en mi CSS para mi sitio. Pero sí, si esto no es sobre Firefox, toda esta pregunta es inútil ...

Si no se trata de Firefox, ¿alguien tiene un enlace a un artículo que explique la eficacia de Firefox o navegadores en general?

+2

Sí. Y los selectores hijos no funcionan en IE6, por lo que si ese soporte es imprescindible, estás bastante desanimado. – jason

Respuesta

6

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

Aplicar CSS en una página HTML promedio es una de las cosas más rápidas que ocurren al cargar la página.
Además, el artículo puede sugerir la forma más rápida de aplicar las reglas de CSS, pero ¿a qué costo? Por ejemplo, no sugieren tener más de una clase por regla:

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

Eso es casi escandalosa . 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, mantenimiento más difícil, duplicados css reglas, más difícil JavaScript (que cuesta mucho más que el CSS), etc.
Ellos sugieren no usar la completa riqueza de CSS selectores y reemplazar estos selectores con clases planas, lo cual es una pena.

+0

En realidad, el artículo da "treecell.indented" no ".treecell.idented" como "BAD". Está dando un ejemplo genérico de algo así como "p.indented" y el punto es "no califica las reglas clasificadas por clase con nombres de etiqueta". No dice nada sobre tener más de una clase por regla. –

+0

@pw - Estás en lo cierto. No puedo explicar cómo sucedió esto, pero el artículo tiene suficientes ejemplos de lo que las personas hacen diariamente en CSS, que no se recomienda en XUL. Con su permiso, dejaré la respuesta tal como está. :) – Kobi

7

¿Un descendiente podría ser un niño/nieto/bisnieto/etc? ¿Y el niño solo tiene una profundidad?

Sí, exactamente. Como un niño solo puede tener una profundidad, hay un espacio mucho más pequeño que el motor de representación tiene que buscar recursivamente para verificar si la regla coincide o no.

Y sí, ese artículo trata sobre Firefox y los navegadores en general. La mayoría (¿todo?) De lo que contiene se aplica a cualquier motor de renderizado de páginas.

1

Un "padre> hijo" está solo un paso hacia abajo, mientras que un "descendiente ancestro" podría estar uno o más pasos hacia abajo.

Mejor aún es usar etiquetas "#id" siempre que sea posible, de modo que haya menos búsqueda de DOM.

1

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

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.

2

...mientras escribo creo que podría haberlo descubierto. Un descendiente podría ser un niño/nieto/bisnieto/etc? ¿Y el niño solo tiene una profundidad?

Indeed.

Una cosa que puedo agregar en el lado de la eficiencia de las cosas es: No use * a menos que realmente lo diga. Es bastante intenso a medida que las reglas van y la mayoría de la gente puede escaparse simplemente especificando los elementos a los que realmente quieren apuntar.

+0

Lo aprendí al agregar un reinicio. ¡Pero gracias por reiterar! Ni siquiera me di cuenta de que algunos de los universales descritos en ese artículo eran posibles, pero tal vez eso era para mejor, jeje. –

+0

@Oli: Sé que fue una cita directa, pero la blasfemia se marcó, así que la edité. Ridículo, lo sé, pero no creo que quite nada de tu respuesta. –

1

El problema con el selector de elementos secundarios es que no es tan compatible. Por supuesto, esto podría haber sido corregido en navegadores IE más nuevos.

En cualquier caso, cuando se escribe CSS para una página web no va a ser tan importante. Dudo que incluso se notarían las fracciones de segundos que ahorrarías en la carga de la página. Este artículo parece más dirigido a personas que escriben cosas para el navegador real, no sitios web.

1

O'Reillys "Even Faster Web Sites" tiene un capítulo entero sobre esta titulado "La simplificación de los selectores CSS". Se hace referencia a su enlace en Mozilla.

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

  1. Sí, si hiciste esto lo más posible, tu HTML y CSS serían un desastre de estilos y posiblemente incluso más ineficientes debido al tamaño de archivo agregado. Depende del desarrollador elegir el mejor equilibrio. No agonizar sobre la optimización cada línea a medida que la escribes, haz que funcione y luego ve lo que puede ser beneficioso.

  2. Como se indicó en otra persona que comenta, el navegador tarda milisegundos en descubrir cómo aplicar los estilos en la carga de la página. Sin embargo, donde esto puede tener un impacto mucho mayor es con DHTML. Cada vez que cambia el DOM, el navegador vuelve a aplicar su hoja de estilo completa a la página. En este escenario, muchos selectores ineficientes podrían tener un impacto visible en su página (percepción de falta de respuesta/falta de respuesta).