Bloqueos y complejidad en selectores

⛔ Bloqueos y complejidad en selectores

BEM es una forma de escribir clases en CSS. Viene de Bloque Elemento y Modificador

• Si no le damos la debida atención al CSS se puede volver complejo a lo largo del tiempo
  • Complejo de mantenimiento en equipo
  • Complejidad para el navegador
• Entre más pequeño sea nuestro CSS, mejor
• Entre menos complejos sean los selectores que usemos, el navegador tendrá que hacer un menor esfuerzo
• Anidar selectores genera más trabajo al navegador .menu > div > img
• Podemos ayudar al navegador usando BEM
  • Nos dará mayor contexto de que bloques estamos editando
  • No daremos selectores complejos por lo cual facilitaremos el trabajo del navegador
• Nuestro código debería tener como máximo 1 solo selector, 1 sola clase y tratar de evitar los id’s

• Si deseamos priorizar un recurso en el critical render path lo que deberíamos hacer es ponerlo en una etiqueta img

RESUMEN: El CSS puede bloquear recursos importantes como una imagen de un logo. Tambien debemos estar conscientes de no dar selectores complejos para hacer que el navegador haga un menor esfuerzo

Jonathan Alvarez: Este tipo de selector no sólo es muy complejo, no es humano
Estefany Aguilar: 😐

Increible curso!

Aca dejo un enlace de como con node y puppeter extraer el css critico del coverage . https://www.youtube.com/watch?v=GIYp3qG1520

En una pagina compleja ya terminada, utilizando frameworks de css como bootstrap, materialize, etc…

**¿Hay alguna herramienta que se pueda utilizar para generar un css con las clases que se utilizan?

¿Que tan recomendado es utilizar estos frameworks para el desarrollo? **

Jaja siempre como que me había dado pereza agregar el logo desde el CSS. Ahora ya se que desde el HTML estoy mejorando la percepción de carga que tienen los usuarios 🤑👌

CSS es algo a lo que si no se le presta atención desde el principio, se volverá algo muy complejo a lo largo del proyecto.

Entre más pequeño sea el CSS y menos complejos sean los selectores, mucho mejor. Entre más cortos y directos sean nuestros selectores, mucho mejor.

Máximo 1 selector, 1 sola clase, evitamos usar ID.

Idealmente el logo tendría que ser una de las primeras cosas en cargar en las páginas.

Hay muchos selectores demasiado complejos y que ni siquiera se estan utilizando

input:not([type='submit']):not([type='checkbox'])

Y si hacemos un preload de la imagen cargada mediante CSS? En el ejemplo práctico de que sea una imagen principal.

el curso está excelente!!, no obstante finalizando la sección de CSS me queda un sinsabor el que no se le haya dedicado una clase al Critical CSS (above-the-fold) 🤔 … continuamos …

👌