Admito que no pienso a menudo en esta pregunta... ¿Qué tan eficiente es el CSS que escribimos y qué tan rápido se procesa el navegador?
Esto es lo que debería preocupar a los desarrolladores de navegadores (las páginas se cargan más rápido y los usuarios estarán más contentos). Mozilla tiene un artículo: sobre mejores prácticas . Por supuesto, Google también está muy preocupado por este problema y también tiene un artículo de este tipo: Optimizar la representación del navegador .
Echemos un vistazo a lo que defienden principalmente y luego analicemos su viabilidad.
derecha a izquierda
Un principio importante de cómo los navegadores leen los selectores CSS es que los leen de derecha a izquierda. Esto significa que para un selector como ul > li a[title="home"], primero se leerá a[title="home"]. Esta parte generalmente se llama "selector de clave" (¡se puede llamar "selector de destino" -_-!) La última parte del selector es también la etiqueta seleccionada.
Las identificaciones son las más eficientes, las universales son las más lentas.
Hay cuatro selectores de destino: ID, clase, etiqueta y carácter universal. Echemos un vistazo a sus respectivas eficiencias:
#main-navigation { } /* ID (más rápido) */
body.home #page-wrap { } /* ID */
.main-navigation { } /* Clase */
ul li a.current { } /* Clase *
ul { } /* Etiqueta */
ul li a { } /* Etiqueta */
* { } /* Universal (más lento) */
#content [title='home'] /* Universal */ Luego combinamos los conceptos de selectores de destino y de derecha a izquierda, y podemos saber que el siguiente selector no es eficiente:
#main-nav > li { } /* Parece rápido pero en realidad es muy lento*/
Aunque esto es un poco confuso... debido a que las ID son las más eficientes, los navegadores pueden encontrar rápidamente li por ID. Pero el hecho es que la etiqueta li se lee primero.
No lo modifiques con etiquetas.
No hagas esto hasta tu muerte:
ul#navegación-principal { }
Las identificaciones son únicas, por lo que no es necesario decorarlas con etiquetas, lo que las hace menos eficientes.
No lo uses para modificar clases si puedes evitarlo. La clase no es única, por lo que, en teoría, podrías usarla en diferentes etiquetas. Si lo desea, puede usar etiquetas para controlar diferentes estilos, por lo que es posible que necesite modificaciones en las etiquetas (por ejemplo: li.first), pero pocas personas hacen esto, así que no lo haga.
No hay absolutamente nada peor que usar un selector descendiente
David Hyatt:
El selector descendiente es el selector más caro en CSS y es prohibitivamente caro, especialmente cuando se coloca después de etiquetas y universales.
Al igual que las siguientes cosas, es un cáncer absoluto de eficiencia:
cuerpo html ul li a {}
Es más eficiente que un selector no se renderice que que el selector se renderice
No estoy seguro de si hay alguna evidencia mejor para esto, porque si tiene muchos selectores que no se pueden encontrar en una hoja de estilo CSS, puede parecer extraño, pero es importante tener en cuenta que de derecha a izquierda Para parafrasear un selector , una vez que no puede encontrarlo, deja de intentarlo. Sin embargo, si se encuentra, será necesario un mayor esfuerzo para explicarlo.
Solo piensa por qué escribes el selector así.
Piensa en esto:
#main-navigation li a { font-family: Georgia, Serif }
Probablemente no necesites comenzar con un selector (si solo quieres cambiar la fuente). Esto podría ser más eficiente:
#navegación principal {familia de fuentes: Georgia, Serif}
Sentido práctico
¿También grabó el artículo de Mozilla mencionado anteriormente? Han pasado diez años. El hecho es que las computadoras son más lentas que hace diez años (no es que lo haya entendido mal, o el autor quiera decir que la WEB actual se está volviendo cada vez más compleja). Siento que estas cosas parecían tomarse más en serio en aquel entonces. Hace diez años, yo era un chico guapo de 21 años. Por supuesto, no pensé que sabría nada sobre CSS allí. Así que no puedo contarles sobre la situación anterior... pero creo que la razón por la cual el tema de la eficiencia del renderizado no se tomó en serio es porque nunca ha sido un gran problema.
Estas son algunas de mis opiniones: Pase lo que pase, lo mencionado anteriormente tiene sentido y puedes hacerlo de acuerdo con el método anterior, porque no limita tu producción de CSS. Pero no hay que ser demasiado dogmático. Si eres un perfeccionista y no has considerado esas cosas antes, es hora de volver a revisar algunos de los estilos que has escrito antes para ver si hay margen de mejora. Si no encuentra que su sitio web obviamente se procesa lentamente, no le preste demasiada atención, solo preste más atención en trabajos futuros.
Súper rápido y cero practicidad.
Sabemos que las identificaciones son los selectores más eficientes. Cuando desee maximizar la velocidad de renderizado, puede configurar una ID para cada etiqueta individual y luego usar estas ID para escribir estilos. Eso sería súper rápido y súper ridículo. El resultado es una semántica extremadamente pobre y extremadamente difícil de mantener. No deberías ver esto hecho ni siquiera en el centro. Creo que esto sirve como recordatorio de que no debemos renunciar a la semántica y la mantenibilidad por un CSS eficiente.
Gracias a Jason Beaudoin por enviarme un correo electrónico sobre la idea. Si alguien sabe más sobre este tema, o si tiene consejos adicionales que utilice en el mismo sentido, ¡escuchémoslo!
Por cierto, debido a que muchas bibliotecas de JavaScript utilizan selectores de CSS, las cosas mencionadas anteriormente aún se aplican, el selector de ID sigue siendo el más rápido y los selectores descendientes y cosas similares son más lentas.
PD : Veamos quién se atreve a usar más de N selectores descendientes. . . También hay personas que se oponen a mi uso de identificación. . . Vaya jaja. . .