¿Qué CSS debes saber en 2022? | trucos CSS

Sasha Greif se preguntó abiertamente si CSS se había vuelto demasiado grande. Con todas las ventajas que se han entregado a los navegadores en los últimos años: ¡solicitudes de contenedores! sintaxis de color relativo! capas de cascada! propiedades lógicas! Rangos en consultas de medios !Transformaciones individuales! :has() ¡selector! — y todo lo que está en el horizonte posible — CSS alterna!anidación! mezcla de colores! animaciones de desplazamiento!

Puede haber habido un momento en que era posible conocer la mayoría de las propiedades de CSS y cómo funcionan. Esos días quedaron atrás, al menos para un viejo como yo. Pero esto plantea la pregunta: ¿Qué CSS es absolutamente necesario saber?

Vincas Stonys recientemente lista de aciertos. Chris armó uno basado en las funciones lanzadas después de CSS3. Probablemente tengas una idea de lo que incluirías en una lista. Si tuviera que juntar el Top 5 y limitarme solo a propiedades y selectores, podría verse así...

writing-mode

No puedo decir lo suficiente sobre writing-mode Lo que lo hace importante, especialmente desde una perspectiva de aprendizaje, es que lo prepara para los principios generales que explican la creación de diseños independientemente del idioma del usuario. writing-mode conducirá a una comprensión de las propiedades y valores lógicos, y estos a su vez sientan las bases para comprender el flujo de documentos y el pensamiento en términos de block, inline, starty end en lugar de direcciones físicas.

display

Me cuesta creer que alguien pueda escribir un buen CSS sin una comprensión sólida de display Es tanto una propiedad como un marco para crear diseños. No hay Flexbox o CSS Grid sin él, lo que lo convierte en una especie de guardián para comprender estas características importantes.

Es más, display propiedad complementa perfectamente writing-modeEsto es exactamente lo que necesitarás una vez writing-mode exponerlo al flujo de documentos e instrucciones lógicas. Necesitará una propiedad para cambiar el flujo normal de un elemento (como cambiar un elemento de bloque a en línea) o para comenzar a organizar las cosas (como crear un contexto de diseño flexible), y aquí es donde display entra en acción.

margin / padding / border

Ugh, estoy haciendo trampa aquí, pero considera aprender margin, paddingy border juntos es de alguna manera inevitable. Todos son parte del patrón de caja, todos ayudan con el espaciado y el estilo, y todos requieren familiaridad con Unidades de longitud CSSSaber para qué son estas propiedades y cómo contribuyen al tamaño calculado de un elemento ciertamente le da mucho más control sobre el estilo y aclara cualquier confusión sobre por qué un elemento tiene el tamaño que tiene: ¡un dolor de cabeza común de CSS!

::before y ::after

Otro en el que hago un poco de trampa. Sí, ::before y ::after son dos pseudo-elementos separados, pero de nuevo, no puedo imaginar aprender sobre uno sin el otro. ¡Es justo dos!

Recuerdo lo alucinante que fue para mí saber que existen y que se pueden usar para crear de todo, desde geniales efectos de interfaz de usuario hasta ilustraciones div individuales terminadas. Esto abre nuevas posibilidades y da una primera mirada a lo poderoso que es realmente el CSS.

@media

Uf, ya estoy en mi quinto y último elemento de la lista y siento que todavía hay muchas bondades de CSS que pertenecen aquí. Pero si tuviera que elegir una última cosa, serían las solicitudes de los medios. ¿Por qué? Porque es un ingrediente premium para crear diseños fluidos y flexibles y diferentes contextos de visualización. Las solicitudes de contenedores pueden eliminar esto de mi lista a medida que madura, pero por ahora, @media es un gran ejemplo de diseño receptivo.

Más allá de eso, @media es un buen primer paso hacia los condicionales CSS. Si estamos escribiendo una consulta basada en el tipo de dispositivo que se utiliza (p. screen o print) o cuando la ventana del navegador cumple con ciertos criterios (p. ej. width >= 768px), en @media La sintaxis es increíblemente útil para crear diseños optimizados para diferentes condiciones.

Ah, y ni siquiera hemos mencionado cómo @media aborda la accesibilidad, gracias a su capacidad para aplicar estilos en función de las preferencias del usuario (p. prefers-reduced-motionEntonces, además de crear diseños condicionales, las consultas de medios son un buen siguiente paso para comprender el diseño inclusivo.

Menciones honoríficas

Destilar CSS hasta una lista de cinco propiedades y selectores requeridos es difícil, especialmente ahora que CSS es más poderoso hoy de lo que era, digamos, incluso hace cinco años. Hay una serie de otros elementos que realmente quería incluir, como (sin ningún orden en particular):

• calc()
• has()
• color
• font
• overflow
• position (especialmente esto)
• z-index

Pero mantengo mi elección. Aprender CSS es más importante que memorizar una lista de propiedades. Es un viaje, y creo que los cinco que he elegido crean un buen camino de aprendizaje que sienta las bases para escribir buenas reglas de estilo y los próximos pasos para inmersiones más profundas en CSS.

¡Vale, dime el tuyo!

¿No estás de acuerdo con mi lista? ¡Deber! Apuesto a que tienes algunas opiniones inteligentes y quiero ver qué redondearías en una lista de los 5 principales.