sacha greif se preguntó abiertamente si CSS ha llegado a ser, ya sabes, demasiado grande. Con todas las ventajas que se han enviado en los navegadores en los últimos años, consultas de contenedor! sintaxis de color relativa! capas en cascada! propiedades lógicas! rangos en consultas de medios! transformaciones individuales! :has() selector! — y todo lo que está en el posible horizonte — CSS alterna! anidación! mezcla de colores! animaciones con enlaces de desplazamiento! estilos de alcance! — Definitivamente hay una curva de aprendizaje diferente para CSS en estos días para front-enders nuevos y experimentados por igual.

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 veterano como yo. Pero eso plantea la pregunta: ¿Qué CSS tienes que saber absolutamente?

Vincas Stonys recientemente tomó una puñalada en una lista. cris poner uno juntos basado en características lanzadas desde CSS3. Probablemente tenga una idea de lo que incluiría en una lista. Si tuviera que armar un Top 5 y limitarme solo a propiedades y selectores, sería algo como esto...

writing-mode

No puedo decir lo suficiente sobre el writing-mode propiedad. Lo que lo hace importante, especialmente desde una perspectiva de aprendizaje, es que lo prepara para principios inclusivos que dan cuenta de la elaboración de diseños, independientemente del idioma del usuario. Una buena comprensión de writing-mode va a conducir a una comprensión de propiedades y valores lógicosy estos, a su vez, sientan las bases para comprender el flujo de documentos y pensar 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 tener un conocimiento sólido del display propiedad. 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 esas características importantes.

Además, el display propiedad complementa perfectamente writing-mode. Es exactamente lo que necesitarás una vez writing-mode lo ha expuesto al flujo de documentos y direcciones lógicas. Necesitará una propiedad para cambiar el flujo normal de un elemento (como cambiar un elemento de bloque a uno en línea) o comenzar a diseñar las cosas (como crear un contexto de diseño flexible) y ahí es donde display entra en juego.

margin / padding / border

Ugh, estoy haciendo trampa aquí, pero piensa en aprender. margin, paddingy border juntos es algo inevitable. Todos son partes de El modelo de caja, todos ayudan con el espaciado y el estilo, y todos requieren familiarizarse con Unidades de longitud CSS. Saber para qué están diseñadas estas propiedades y cómo contribuyen al tamaño calculado de un elemento ciertamente le brinda mucho más control de estilo y disipa 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 estoy haciendo un poco de trampa. Sí, ::before y ::after son dos pseudo-elementos individuales, pero de nuevo, no puedo imaginar aprender sobre uno sin el otro. ¡Es un dos-fer!

Recuerdo lo alucinante que fue para mí saber que existían y que se pueden usar para crear de todo, desde geniales efectos de interfaz de usuario para completar Ilustraciones de single div. Abre nuevas posibilidades y proporciona un primer vistazo de cuán poderoso es realmente el CSS.

@media

Oof, 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 tengo que elegir una última cosa, sería preguntas de los medios. ¿Por qué? Porque es un ingrediente principal para crear diseños fluidos y flexibles y diferentes contextos de visualización. Consultas de contenedores podría terminar eliminando esto de mi lista a medida que madure, pero por ahora, @media es una gran base para el diseño receptivo.

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

Ah, y ni siquiera hemos mencionado cómo @media se relaciona con la accesibilidad, gracias a su capacidad para aplicar estilos basados ​​en las preferencias de un usuario (p.ej, prefers-reduced-motion). Entonces, además de crear diseños condicionales, las consultas de medios son un buen próximo paso para comprender el diseño inclusivo.

menciones honoríficas

Destilar CSS en una lista de cinco propiedades y selectores imprescindibles es difícil, especialmente ahora que CSS es más poderoso hoy que, 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 mis elecciones. Aprender CSS es más importante que memorizar una lista de propiedades. Es un viaje y creo que los cinco que elegí marcan un buen camino de aprendizaje que prepara el escenario para escribir buenas reglas de estilo y los próximos pasos para profundizar en CSS.

Muy bien, dime el tuyo!

¿No estás de acuerdo con mi lista? ¡Debería! Apuesto a que tienes algunas opiniones inteligentes y quiero ver cómo habrías completado una lista de los 5 principales.