¿Cuáles son sus primeras 4 propiedades CSS?

Eso es todo Donnie d’Amato preguntó en una publicación reciente:

Se le pidió que construyera un sitio web, pero solo use 4 propiedades CSS, ¿cuáles son estas propiedades?

Esto realmente hace que el equipo de CSS-Tricks hable. Esta es la versión nerd de «Si solo puedes llevar un álbum contigo en una isla remota …» y todos tienen una vista diferente, lo cual es genial porque muestra la artesanía desordenada y no lineal Piense como un desarrollador front-end.

Parece algo muy simple, ¿verdad? Pero como dijo Donnie, esto requiere alguna estrategia. Por ejemplo, digamos que el espacio es alto en su lista de prioridades. Quieres usarlo margin? padding? Tal vez tiendas a diseñar y continuar gap Como parte de la dirección de FlexBox … pero tienes que prometer display Como una de tus elecciones. ¡Eso puede comer tu elección muy rápido!

Nuestras respuestas son muy consistentes, pero a medida que avanza la discusión, todos nos mezclamos con diferentes prioridades. Compartiré la reacción «intestinal» de todos porque me gusta su reacción original. Creo que verás que siempre hay un compromiso en la mezcla, pero estos compromisos revelan la tarjeta de una persona, bajo restricciones demasiado estrictas en el caso de que creen que es más importante.

---

Juan Diego Rodríguez

Juan y yo nos acercamos a la misma opción, y veremos un poco:

• font: Tipos de compensación es una prioridad y obtenemos muchas propiedades constituyentes utilizando esta mierda única.
• padding: Un pequeño relleno hace que las cosas respiren y ayuda visualmente a separarse.
• background: Otra taquigrafía, con muchas posibilidades de estilo en un paquete pequeño.
• color: Más jerarquías visuales.

Pero tuvo algún debate consigo mismo en el proceso:

Considerar el cambio color y place-itemsporque funciona en elementos de bloque. grid necesidad displaya pesar de).

Ryan Trimble

Ryan bajo estructura:

• display: Esto abre un mundo de diseño, pero lo más importante flex.
• flex-direction: Es una buena idea considerar un diseño multidireccional que se puede ajustar fácilmente a través de consultas de medios.
• width: Esto ayuda a limitar elementos y texto y separa los contenedores flexibles.
• margin: Esto es para la relación de separación gapy también nos permite centrarnos fácilmente.

Ryan no pudo evitar ir más allá del alcance:

Para soporte de tema automático de color, no se requieren atributos CSS adicionales: <meta name="color-scheme" content="dark light">

Danny Black

Cada equipo necesita un comodín:

En cambio, creo que elegiré font,,,,, paddingy color. Ni siquiera elegiría cuarto.

• font: Si estás familiarizado, esto no es sorprendente Escritura de Danny.
• padding: Ryan es el único que evita hasta ahora padding ¡Como la elección central!
• color: Lástima, esto no está horneado fontTela de lana

También señalé que Danny cuestionó rápidamente su decisión de usar las cuatro opciones:

Creo que necesitamos width Lograr una buena longitud de línea.

Miedo

Esta es la primera lista directa de inclinación Cuadrícula de CSS,permitir grid Abreviado para seleccionar un sistema de diseño completo:

• font: Esta es una persona popular, ¿verdad?
• display: Producción grid Disponible
• grid: Esto requiere display método
• color: Espolvorear el color de texto, puede ayudar

¡Me gusta Ryan y Sunkanmi pensando en la estructura, aunque por diferentes razones, de diferentes maneras!

Zell Liew

En las propias palabras de Zell: «Es realmente simple aquí, es muy simple».

• font: El contenido sigue siendo la información más importante.
• max-width: Asegúrese de que la métrica tipo esté bien.
• margin: Déjame jugar con espaciado.
• color: Esto asegura que no haya un contraste negro/blanco puro que lastime los ojos. También me gusta el fondo, pero solo tenemos cuatro opciones.

Pero, como él explica, hay algunos matices en estas elecciones: «Pero cambiaré color para background En los sitios con información más compleja, se requiere la partición correcta. En ese caso, también cambiaré margin y padding. «

Amit Sheen

Directamente en las opciones de Amit:

• font
• color
• background
• color-scheme

Estas opciones se impulsan principalmente al querer combatir el estilo de agente de usuario predeterminado:

El problema es que si solo tenemos cuatro propiedades, terminamos confiando en gran medida en el agente de usuario y lo único que quiero cambiar es la fuente. Pero cuando usamos, agregemos algunos controles de color. No estoy seguro de cuántos de ellos he usado realmente, pero es mejor usarlos.

Geoff Graham

Bueno, ahora que ves las opciones para todos los demás, todavía no soy tan emocionante. Verás mucha superposición aquí:

• font: Tablandia para siete atributos para estilos de texto de masaje.
• color: Parece que esto será muy conveniente construir una jerarquía visual y distinguir un elemento de otro.
• padding: No puedo no tener espacio para respirar entre el cuadro de contenido del elemento y su borde interno.
• color-scheme: Buen tema mínimo que funciona bien color Y apoyo light-dark() Función.

Obviamente, estoy escribiendo. Esto podría ser algo muy bueno, y también podría limitar mis limitaciones en términos de diseño. Realmente tengo que luchar contra el impulso de usar display Porque siempre me parece muy útil ser imposible y organizar cosas con elementos de bloque.

---

¡Es tu turno!

¡La mente curiosa quiere saber! Que cuatro atributos ¿Lo llevarás contigo en una isla desierta?