Tips de CSS que podrían ayudarte

Por Michael Reyes Seiffert

Hoy en día, todavía hay personas que sufren mucho diseñando, os voy a compartir 3 formas de hacer columnas en CSS para que vean las diferencias entre flex, grid y css a la antigua. Flex está más pensando para un alineamiento de bloques, por así decir, mientras que Grid está pensado más como tablas, ¿en qué casos será mejor usar uno u otro? No creo que haya algo super definido, por lo tanto, me resulta irrelevante, lo importante es que se vea como tu quieres y que esté mínimamente ordenado.

Pero hoy lo que quiero compartir son algunos tips para que puedan mejorar en CSS:

Existe más de una forma de hacer las cosas

¿Te atascaste y no sale el diseño que necesitas? Dale una vuelta. Por ejemplo, necesitas un círculo con una imagen dentro, puedes utilizar un background y un border-radius, y ya quedaría centrado, pero ¿y si esa imagen la recibes de backend? Lo mejor sería utilizar la etiqueta <img>, para no enguarrar el html con css en línea, pero si simplemente le pones la propiedad border-radius, se deformará si no es un cuadrado perfecto. Por lo tanto, podrías crear un wrapper con un overflow: hidden para que todo el contenido que sobresalga no se vea, ¿suena complicado? Otra solución más actual sería utilizar el object-fit, que quedaría así:

1
2
3
4
5
6
7
8

  <img src="{url}" />

  img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
  }

¿Qué fácil es así no?

Practica en tu tiempo libre

En el ejemplo anterior, era bastante fácil ponerle simplemente un object-fit y para tu casa, pero deberías practicar con las otras formas, ya que en algún momento podrían pedirte un nuevo cambio que sea que dentro de la imagen aparezca una palabra clave, tal que así:

Ya se nos fastidió la solución anterior, pero ¿recuerdan la otras soluciones? Mencioné un wrapper, puede que de esa forma se ajuste mejor lo que queremos hacer ahora, creo que es una buena idea para hacer un ejercicio, para practicar, ¿te apetece hacerlo y compartirlo con nosotros?

Analiza las páginas web y aplicaciones móviles

Cuando entres a una página web, analízala sin mirar el código fuente, como, por ejemplo, la “nueva” versión de Twitter. Nada más entrar, puedes ver que está dividido en 3 grandes bloques: el menú a la izquierda, los posts en el centro y el buscador/tendencias a la derecha (marcados en rojo). Esto se podría hacer de las tres formas que mencioné al principio (3 formas de hacer columnas en CSS), pero justo en el caso de twitter es más complejo, ya que las columnas laterales son fijas y la del centro es la que hace scroll. Por lo tanto, sería algo como que esas dos columnas tienen un position:fixed o todo lo contrario, el bloque del centro tiene un height: 100vh, con un overflow-y. Con la experiencia, lo conseguirás diferenciar por algunos detalles, por ejemplo, que si hubiera sido la segunda opción, el scroll lo hubiera tenido el bloque del centro, cuando realmente está a la derecha del navegador

Todo eso han sido conclusiones mías sin mirar el código fuente. De hecho, cada vez que veo algo que me llama la atención, lo primero que hago es pensar como se podría hacer y ya después lo hago o busco como hacerlo.

Seguro que a alguno de ustedes les llamó la atención la parte de “aplicaciones móviles” en el título, ya que a simple vista no sabes si está hecho con CSS o no, pero es totalmente irrelevante, si se puede hacer con los widgets de flutter (por ejemplo) se puede hacer con CSS.