2012-03-12 12 views
6

¿Tiene un efecto adverso en el rendimiento de un navegador asignar el nombre de clase al atributo de clase css de un elemento si la clase nunca se definió realmente?Efecto de aplicar el nombre de clase CSS que no existe

No es raro usar nombres de clase para selectores con JQuery. Normalmente uso una clase que solo se usa para seleccionar elementos y nunca definir la clase en ningún lugar.

Supongo que la mayoría de los buscadores buscarían la definición de clase css y de alguna manera podría cortocircuitar la búsqueda si el estilo estuviera definido?

Tengo entendido que los estilos CSS se compilan juntos antes de que se representen los elementos de la página. Es por eso que es importante mantener todas las definiciones de CSS juntas y no dividirlas con etiquetas de scripts, ya que hace que la mayoría de los navegadores vuelvan a compilar el CSS cada vez que se entremezclan con otras definiciones. Las implicaciones de esto pueden ser lo suficientemente graves como para permitir que la página se renderice antes de aplicar el estilo.

Sin embargo, en la práctica, supongo que la diferencia de rendimiento entre definir o no definir una clase CSS es despreciable, en su caso.

+0

No estoy seguro del efecto de no definir una clase, he usado una clase explícitamente con Jquery de la misma manera que te refieres y nunca encontré ningún problema. La única entrada que tengo no es con rendimiento sino usabilidad. Si estuvieras usando un IDE como Visual Studio u otros, el IDE arrojaría un error si la clase nunca se definió e intentas usarla, incluso con Jquery solamente. Gran pregunta por cierto. – ityler22

+0

No pensé en intellisense ... buen punto :) –

+0

Meses después ... este tema surgió en una reunión con mi gerente. Él es técnico pero no técnico. Preguntó ... si está definiendo estas clases para aplicarlas a los elementos ... ¿Cómo sabe que ha definido/aplicado la clase correctamente? Su punto era que puede identificar uno y exactamente uno control con una identificación ASP, obtendrá un error de compilación. Sin embargo, si tengo Jquery datepicker case 1 y 2 y trato de usar diferentes selectores de clase (es decir, diferentes fechas min/max) no hay error de tiempo de compilación. Parece obvio, pero fue un punto válido de mi jefe. –

Respuesta

6

La manera más fácil de pensar en esto es recordar que el CSS se aplica al HTML, no el HTML llamando a los selectores CSS.

Cuando el navegador analiza el archivo CSS, lee un selector de derecha a izquierda para ver dónde aplicar los estilos. Por ejemplo, .foo ul {} verificaría todas las etiquetas ul en una página, y luego verificaría si están contenidas en .foo. Debido a que se analiza de esta manera, las clases adicionales no utilizadas en su HTML no importan. Solo busca los identificadores y las clases especificados en el CSS.

1

Como el atributo de clase es un atributo de HTML, se puede insertar sin problemas si no es invocado por el CSS o Javascript. Puede sentarse allí felizmente solo sin efectos secundarios. No necesita ser seleccionado por CSS, solo JS lo puede usar.

Este artículo podría ayudar a entender más:

class (HTML attribute) @ sitepoint.com

Cuestiones relacionadas