Consejos de CSS que me hubiera gustado saber cuando comencé a programar web

A pesar de que css no es aceptado como un lenguaje de programación por muchos desarrolladores, tengo que confesar que fue una de las herramientas que me causaron más dolor de cabeza a lo largo de mi carrera, y atribuyó esto a que, a diferencia de otros lenguajes de programación, si en CSS escribes mal una regla, simplemente no funciona, no hay
errores que te digan qué estás haciendo mal o si tienes algún error de sintaxis, o peor aún, puede ser que tu regla esté funcionando pero no veas los resultados que esperabas en el navegador, sin explicaciones del por qué se comporta de esa manera.

Para las personas que no están familiarizadas con CSS, css es un la herramienta que hace de las páginas web una obra de arte visual, nos permite modificar la forma en la que se muestran los elementos como el color o tamaño de la letra, el espacio entre párrafos, tamaño de imágenes e inclusive nos permite crear animaciones. La sintaxis de CSS es muy sencilla, se ve similar a lo siguiente:

selector {
  regla: valor;
  regla-multivalor: valor1 valor2 valorN;
}

selector:pseudo-selector {
  regla: valor;
}

selector::pseudo-elemento {
  regla: valor;
}

En dónde:

• selector: Es el elemento que al que se le va a aplicar la regla de estilo, existen múltiples selectores, algunos de ellos son, id (#), clase (.), selector universal (*), o selectores de etiqueta (h1, p, div), entre otros.
• regla: Las reglas de CSS se utilizan para saber que "propiedad" del elemento se debe modificar, por ejemplo, la regla puede ser sobre el color de la tipografía, sobre los márgenes, o la almohadilla (padding) de los elementos.
• valor: Es el valor que se le va a aplicar a cada "propiedad", por ejemplo, si modificamos la regla de color de tipografía, el valor será un color hexadecimal.
• pseudo-selector: Considera éstos como modificadores acorde al estado del elemento, por ejemplo, si el usuario coloca el puntero del mouse sobre un elemento, éste cambia su estado a hover y nosotros podemos definir qué reglas necesitamos para cuando el elemento se encuentre en ese estado.
• pseudo-elementos: Éstos son elementos que se crean automáticamente por los navegadores y envuelven el contenido del elemento HTML, agregando un bloque antes (before) y un bloque después (after), por lo general, estos elementos son invisibles porque el contenido que se crea está vacío por default, sin embargo, son muy útiles para agregar efectos adicionales como etiquetas flotantes, o un clon de nuestro elemento con estilos diferentes.

Nota: Hay reglas que solo aplican a ciertos elementos, por ejemplo, la regla list-style solo puede ser utilizada un elementos de tipo lista (ol o ul).

Ahora que estamos un poco en contexto, les compartiré algunos tips que me hubiera gustado saber cuando comencé a trabajar con CSS.

Entendiendo la regla "Display"

La propiedad display es una de las propiedades más importantes, nos permite modificar la forma en la que los elementos se muestran en el DOM, permitiéndonos colocar elementos uno tras otro o simplemente modificando propiedades como la altura y el ancho de los elementos.

Los valores más importantes son:

• block: Utiliza el 100% del largo del DOM y se expande a lo largo dependiendo del contenido, si no tiene contenido, su altura es 0. Estas propiedades se pueden cambiar con las reglas width y height y sus variantes min y max (min-height, max-height, min-width, max-width).
• inline-block: A diferencia de los display: block, en vez de utilizar el 100% del DOM, este crece a los ancho acorde al contenido que tiene dentro. El comportamiento del tamaño vertical es similar.
• flex: Una de las reglas que me hubiera gustado conocer cuando incié con CSS, se encarga de "envolver" el contenido del elemento y te permite modificar de qué manera de muestra con ayuda de otras propiedades, te permite cambiar las dimensiones del contenedor, ajustar el contenido al centro, al inicio, al final o simplemente rellenar el contenedor con el contenido que tenga (en ambos sentidos, horizontal y vertical)
• grid: Otra regla que me hubiera gustado conocer en mis inicios, te permite colocar el contenido del elemento en formato de tabla, ajustando los hijos como si fueran un sistema de celdas y columnas.

Entendiendo la regla "Position"

Uno de los conceptos que más me costó trabajo entender, fue la regla position, hace referencia a la forma en la que un elemento se posiciona o se dibuja en el DOM. La mayoría del tiempo tendremos que modificar la posición de los elementos para lograr efectos increíbles, sin embargo, mal utilizada puede destruir por completo el layout de nuestra aplicación.

Antes de comenzar tenemos que saber que todos los elementos tienen la posición static que permite el flujo normal de los elementos, a partir de allí viene una nota importante:

la regla position no solo afecta el flujo de posición del elemento actual, sino también de los elementos hijo.

Una vez que se modifica la posición de un elemento, se pueden utilizar las reglas: left, right, top o bottom para ayudar a colocar el elemento en donde sea que se requiera.

Los valores que regularmente encontraremos son:

• static: Es el valor por defecto de todos los elementos.

• absolute: Permite romper el flujo normal y permite posicionar el elemento utilizando el contenedor padre (o DOM si es que no hay un contenedor padre) como referencia para colocar el elemento.

• relative: Permite colocar el elemento en relación directa con el elemento padre.

• fixed: Permite que el elemento se quede fijo en una posición, independientemente de que se se utilice scroll.

Prioridad de reglas CSS

La prioridad de las reglas CSS puede salvarte de muchas horas de frustración, existe un juego de prioridades que siempre se van a seguir:

1. Regla: !important: La regla !important se utiliza para forzar que un elemento tenga un estilo, aunque puede ser útil en algunas ocasiones, es importante evitar el uso de esta regla, ya que tenemos darle mantenimiento en ocasiones futuras puede ser muy difícil. Ejemplo:

   p {
     color: green !important;
   }

1. Estilos in-line: Los estilos in-line son aquellos que colocan directamente en el elemento html, y tienen prioridad sobre todas las reglas, a excepción de un !important. Ejemplo:

   <p style="color: red;">

1. Mayor especificidad: La especificidad es un término que se refiere a que tan específico es el selector de una regla css, por ejemplo, teniendo el siguiente html:

   <div class="product-detail">
     <ul class="product-properties">
       <li class="product-property">...</li>
     </ul>
   </div>

Los ejemplos de especificidad:

   /* Especificidad de 3, mayor prioridad */
   .product-detail .product-properties .product-property {}

   /* Especificidad de 2 */
   .product-properties .product-property {}

   /* Especificidad de 1 */
   .product-property {}

1. Última línea: Las reglas se suelen aplicar de arriba hacia abajo, es decir que la regla que se encuentre más abajo, sobreescribirá las que se encuentren antes, a excepción de que caiga en los puntos anteriormente mencionados. Ejemplo:

   p {
     color: red;
   }

   a {
     color: white;
   }

   p {
     /* Este valor sobreescribe el que se definió en la primera regla. */
     color: green;
   }

Preprocesadores

Los preprocesadores son herramientas que nos permiten escribir reglas css de manera muy sencilla, tienen ciertas funciones que permiten crear css reutilizable y mantenible, un ejemplo de preprocesador de css (y mi favorito) es sass/scss, te permite escribir css con la misma sintaxis, pero con muchas facilidades, como anidar selectores, también te permiten crear variables, funciones con estilos repetitivos, etc.

Las reglas creadas con preprocesadores tienen que ser convertidas a css antes de que puedan ser utilizadas, pero los mismos preprocesadores te dan estas facilidades.

Para hacer una comparación de scss vs css utilizaré el siguiente ejemplo:

<div class="product">
  <ul class="product-properties">
    <li>...</li>
  </ul>
</div>

Suponiendo que quisiéramos crear estilos para cada uno de los elementos del ejemplo, en css tendríamos algo similar a:

.product {
  /* reglas de producto */
  color: #222222;;
}

.product .product-properties {
  /* reglas de las propiedades de producto */
}

.product .product-properties li {
  /* reglas de cada elemento de la lista de propiedades de producto */
}

.product .product-properties li:hover {
  /* reglas de cada elemento de la lista de propiedades de producto hover */
  background-color: #222222;
  color: #ff22ff;
}

.product .product-properties li.active {
  /* reglas de cada elemento de la lista de propiedades de producto activo */
  background-color: #222222;
  color: #ff22ff;
}

Utilizando sass, se vería similar a esto:

$primary-color: #222222;
$text-color: #ff22ff;

.product {
  /* reglas de producto */
  color: $primary-color;

  &-properties {
    /* reglas de las propiedades de producto */

    li {
      /* reglas de cada elemento de la lista de propiedades de producto */

      &:hover,
      &.active {
        background-color: $primary-color;
        color: $text-color;
      }
    }
  }
}

En donde, al ser convertido a css, obtendremos el mismo resultado, pero a nivel sitáxis evitamos repetir selectores y a demás utilizamos variables para definir ciertos atributos que pueden cambiar con el tiempo y sin tener que modificar mucho nuestros archivos css.

Arquitectura de estilos 7-1

Al igual que el backend y las tecnologías de fontend, los estilos también pueden ser manejados por una arquitectura, permitiendo que proyectos medianos y grandes sean mantenibles a lo largo del tiempo, estas arquitecturas se adaptan perfectamente con los preprocesadores y aunque puede haber variantes, me gustaría hablar un poco de la arquitectura 7-1 que me ha funcionado perfectamente.

En resumen, la arquitectura 7-1 es un juego de 7 directorios con responsabilidades definidas y un archivo que se encarga de concentrar todos los estilos de estos directorios, este último será incluido en nuestro archivo HTML o bien será exportado como punto de salida para nuestras aplicaciones.

Consta de construir el siguiente árbol de archivos:

sass
|
|– abstracts/
|   |– _variables.scss    # Sass Variables
|   |– _functions.scss    # Sass Functions
|   |– _mixins.scss       # Sass Mixins
|   |– _placeholders.scss # Sass Placeholders
|
|– base/
|   |– _reset.scss        # Reset/normalize
|   |– _typography.scss   # Typography rules
|   …                     # Etc.
|
|– components/
|   |– _buttons.scss      # Buttons
|   |– _carousel.scss     # Carousel
|   |– _cover.scss        # Cover
|   |– _dropdown.scss     # Dropdown
|   …                     # Etc.
|
|– layout/
|   |– _navigation.scss   # Navigation
|   |– _grid.scss         # Grid system
|   |– _header.scss       # Header
|   |– _footer.scss       # Footer
|   |– _sidebar.scss      # Sidebar
|   |– _forms.scss        # Forms
|   …                     # Etc.
|
|– pages/
|   |– _home.scss         # Home specific styles
|   |– _contact.scss      # Contact specific styles
|   …                     # Etc.
|
|– themes/
|   |– _theme.scss        # Default theme
|   |– _admin.scss        # Admin theme
|   …                     # Etc.
|
|– vendors/
|   |– _bootstrap.scss    # Bootstrap
|   |– _jquery-ui.scss    # jQuery UI
|   …                     # Etc.
|
`– main.scss              # Main Sass file

Si bien, la estructura se explica por sí sola, me gustaría recapitular un poco sobre las responsabilidades de cada directorio:

• abstract: Contiene archivos cuya funcionalidad es mantener los elementos reutilizables en términos de estilos, también suele contener clases de utilerías.
• base: Contiene los estilos necesarios para dejar nuestra aplicación normalizada ante todos los navegadores, hace mucho énfasis en los márgenes, almohadillas y tipografía.
• components: En esta carpeta crearemos cuantos archivos necesitemos, cada archivo contendrá los estilos de un fragmento de código que pudiese ser reutilizado en diversas partes de la aplicación, por ejemplo, una tarjeta, los botones de la aplicación, los mensajes de feedback, entre otros.
• layout: En esta carpeta colocaremos aquellos estilos de los elementos centrados en la navegación de la página, como lo son sidebars, header y footer.
• pages: En esta carpeta se crean los estilos que deben ser aplicados a una página en concreto, por ejemplo, estilos que lleva la sección de landing page y que no tiene la sección de productos, y viceversa.
• themes: En caso de que quieras brindar la posibilidad de cambiar la interfaz de usuario dependiendo del rol o simplemente personalizar los colores, el fondo u otros elementos, puedes crear estos estilos en la carpeta de temas.
• vendors: En caso de que tu aplicación utilice librerías externas como bootstrap, materializecss o element-ui puedes importar los estilos de esas librerías en esta carpeta.
• main.scss: También llamado app.scss, el archivo no contiene ninguna regla css, su función es importar los archivos que se vayan creando en las subcarpetas mencionadas anteriormente.

Media Queries

Una de las ventajas del desarrollo web, es que puede ser transportado fácilmente a dispositivos móviles con solo modificar estilos, esto permite adaptar el contenido del DOM a cualquier tamaño. Los media-queries son reglas css que nos permiten modificar los estilos cuando el viewport (el tamaño de la pantalla en la que se visualiza el DOM) cumpla con ciertos requisitos, por ejemplo, si el viewport es mayor a 300px de ancho, o si el DOM está siendo visualizado en alguna tablet.

Los media-query tienden a verse similar a esto:

@media (max-width: 600px) {
  .selector {
    display: none;
  }
}

En dónde la función @media puede contener las medidas sobre las cuales aplicará las reglas que se encuentren en el cuerpo de la función.

Es un poco complicado hacer un estudio de todas las posibles variantes de tamaño de dispositivo, pero te puedo recomendar ir a la documentación de librerías o frameworks de fronted, como lo son bootstrap o semantic-ui, ellos tienen una tabla de medias que puedes utilizar de referencia para adaptar tus estilos a computadoras con definición muy grande, regular, tablets y celulares.

Animaciones

Desde el lanzamiento de CSS3, hacer animaciones es muy sencillo, basta con conocer la propiedad transition o bien animation y la función @keyframes, la primera es una forma sencilla en la que CSS esuchará los cambios en las reglas de CSS, haciendo una animación pequeña entre el valor de inicio y valor final del cambio.

Un ejemplo sencillo es:

.card {
  display:block;
  width: 100px;
  height: 150px;
  transition: all .3s ease-out;
}

.card:hover {
  width: 200px;
  height: 250px;
}

En dónde, al posicionar el puntero del mouse sobre los elementos con la clase card, estos aumentaran su tamaño de 100x150 a 200x250, y css aplicará una transición de 300 milisegundos entre estos cambios de tamaño. El atributo ease-out es un alias para el comportamiento de la animación (curva), nos dice que inicie rápido pero que al final la animación sea lenta, existen muchas posibles curvas de comportamiento de animaciones, te invito a darles una revisada aquí.

La segunda forma de hacer animaciones es a través de la función @keyframes y la regla animation. Un @keyframes define una serie de pasos que se tienen que cumplir, esta se define utilizando un rango de 0% a 100%, en donde 0% es el inicio de la animación y 100% es el final. Se pueden crear tantos pasos sean necesarios, los @keyframes se definen de la siguiente manera:

@keyframes nombre-del-keyframe {
  0% { /* css que se va a aplicar */ }
  30% { /* css que se va a aplicar */ }
  68%, 72% { /* css que se va a aplicar */ }
  100% { /* css que se va a aplicar */ }
}

Finalmente, podemos hacer uso de los keyframes con la propiedad animation:

.card {
  animation: nombre-del-keyframe 2s ease-out; 
}

En dónde especificamos que utilizará el @keyframe que se acaba de crear, la duración será de 2 segundos y la curva de animación será con inicio rápido y término lento (ease-out).

Conclusión:

CSS es muy divertido una vez lo entiendes, con él puedes crear páginas fabulosas, en ésta guía te compartí los tips que me hubiera gustado saber cuando inicié a utilizar css con el fin de que tu curva de aprendizaje sea muy suave, que comiences a conocer las herramientas que se utilizan hoy en día (preprocesadores) y también un tip rápido para comiences a animar tus proyectos, esos pequeños detalles le un plus enorme a tu aplicación y una experiencias muy agradable a los usuarios.

Te invito a que me compartas tus experiencias con CSS, y si consideras que se puede mejorar el contenido, tu comentario es muy valioso para mi.

¡Hasta la próxima!.