Foto de Jantine Durnbos en UnsplashEsto no es en modo alguno una crítica a los colegas, sino solo una breve lista de cosas importantes que yo mismo aprendí recientemente sobre CSS.No es ningún secreto que muchos desarrolladores no parecen pensar en CSS. Esto es fácil de notar en las discusiones en Internet y en conversaciones con amigos y colegas. Sin embargo, obtenemos mucho conocimiento precisamente de los colegas, y a veces entiendo que nadie me habló de algunos matices importantes de CSS, porque las personas simplemente no pasan tiempo estudiando este tema.
Para solucionar esto, investigué un poco y reuní una breve lista de conceptos que encuentro interesantes y útiles para una mejor comprensión y escritura de CSS.
Esta lista definitivamente no es exhaustiva. Contiene solo lo nuevo que aprendí en los últimos días y lo que quiero compartir, de repente ayudará a alguien más.Terminología
Como con cualquier lenguaje de programación, ciertos términos se usan para describir conceptos. Al ser un lenguaje de programación, CSS no es diferente, por lo que es importante aprender algo de terminología para simplificar la comunicación y solo para el desarrollo personal.
Combinador descendiente
¿Has visto la brecha entre los selectores en tu estilo? De hecho, tiene un nombre, es
un combinador descendiente.
Combinador descendienteDiseño, renderizado y composición.
Estos términos están relacionados con la representación en el navegador, pero son importantes porque algunas propiedades CSS afectan los diversos pasos de la canalización de representación.
1. Diseño
El paso de diseño es el cálculo de cuánto espacio ocupa un elemento en la pantalla. Cambiar la propiedad de 'diseño' en CSS (por ejemplo, ancho, alto) significa que el navegador tendrá que verificar todos los demás elementos y volver a dibujar la página, es decir, volver a pintar las áreas afectadas y superponerlas.
2. Dibujo (pintura)
Este proceso llena de píxeles todas las partes visuales de los elementos (colores, bordes, etc.). Los elementos generalmente se dibujan en varias capas.
Cambiar la propiedad 'pintar' no afecta el diseño, por lo que el navegador omite el paso de diseño, pero aún así hace el renderizado.
El renderizado a menudo toma más tiempo al renderizar.
3. Composición (compuesto)
La composición es el paso en el que el navegador debe dibujar las capas en el orden correcto. Dado que algunos elementos pueden superponerse, en este punto, el navegador verifica que los elementos se muestren en ese orden.
Si cambia la propiedad CSS, que no afecta ni al diseño ni a la representación, el navegador solo tiene que hacer la composición.
Para obtener más información sobre qué procesos desencadenan varias propiedades CSS, consulte
Activadores CSS .
Rendimiento CSS
El selector de descendientes puede ser costoso
Dependiendo del tamaño de su aplicación, usar solo el selector descendiente sin instrucciones específicas puede afectar los recursos. El navegador verificará el cumplimiento de cada elemento del descendiente, porque la relación no se limita al elemento primario y secundario.
Por ejemplo:
Ejemplo de selector descendienteEl navegador tendrá que evaluar todos los enlaces en la página antes de pasar a aquellos dentro de nuestra sección
#nav .
Una forma más eficiente es agregar un selector de
.navigation-link específico a cada enlace
<a> dentro de la sección
#nav .
El navegador lee selectores de derecha a izquierda
Parece que debería haber sabido esto antes, pero no lo sabía ... Al analizar CSS, el navegador analiza los selectores de derecha a izquierda.
Considere el siguiente ejemplo:
El navegador lee de derecha a izquierdaPasos:
- coincide con todos
<a> en la página;
- encuentre todo
<a> contenido en <li> ;
- tomar fósforos y reducirlos a los de
<ul> ;
- finalmente, filtre la selección anterior a las contenidas en el elemento con la clase
.container .
Al observar estos pasos, vemos que cuanto más específico sea el selector correcto, más eficiente será el navegador capaz de filtrar y aplicar propiedades CSS.
Para mejorar el rendimiento del ejemplo anterior, podríamos reemplazar
.container ul li a agregando algo como
.container-link-style en la etiqueta
<a> .
Si es posible, no cambie el diseño.
Los cambios en algunas propiedades CSS requieren actualizar todo el diseño.
Por ejemplo, las propiedades geométricas de
width ,
height ,
top ,
left requieren recalcular el diseño y actualizar el árbol de renderizado.
Si cambia estas propiedades en muchos elementos, tomará mucho tiempo calcular y actualizar su posición / tamaño.
Tenga cuidado con la complejidad de representación
Algunas propiedades CSS (como el desenfoque) son más caras que otras cuando se trata de renderizar. Piense en formas más efectivas para lograr el mismo resultado.
Propiedades CSS costosas
Algunas propiedades CSS son más caras que otras. Esto significa que la representación lleva más tiempo.
Algunas de las propiedades caras:
border-radiusbox-shadowfilter:nth-childposition: fixed
Esto no significa que no se puedan usar en absoluto, pero debe comprender que si un elemento usa algunas de estas propiedades y se representa cientos de veces, afectará el rendimiento.
Ordenar
El orden importa
Veamos tal CSS:
Y luego mira el código HTML:
El orden de los selectores en HTML no importa, pero en CSS sí.
Una buena forma de evaluar el rendimiento de CSS es utilizar las herramientas de desarrollador en un navegador.
En Chrome o Firefox, puede abrir las herramientas de desarrollador, ir a la pestaña Rendimiento y registrar lo que sucede cuando carga o interactúa con su página.
Captura de pantalla de la pestaña de rendimiento en ChromeRecursos
Al explorar el tema de este artículo, encontré algunas herramientas realmente interesantes, que se enumeran a continuación:
CSS Triggers es un sitio web que enumera algunas características de CSS y cómo afectan el rendimiento.
Uncss es una herramienta para eliminar estilos no utilizados de CSS.
Css-explicar es una pequeña herramienta que explica los selectores CSS.
Fastdom es una herramienta de lectura / escritura por lotes DOM para acelerar el rendimiento del diseño.
Eso es todo por ahora! Espero que esto tenga sentido!