5 prácticas cuestionables usando CSS y/o preprocesadores

Llevo algunos años usando CSS y unos pocos menos usando preprocesadores para la escritura de CSS. Incluso he cometido el sacrilegio de escribir CSS con JavaScript usando styled-components. Después de esta frase de abuelo cebolleta, debo reconocer que, como todos, en el camino he cometido infinidad de errores que ni preprocesadores como Less o styled-components han evitado. ¿He aprendido algunas cosas de estos errores, malas prácticas o prácticas cuestionables? La respuesta es sí, y las razones son básicamente dos:

  1. Leer sobre arquitecturas CSS y aplicarlas, aunque no sea en su totalidad.
  2. Haber trabajado en equipo con maquetadores web o front-end developers (de los que disfrutan, también, con HTML y CSS).

Ninguna de las razones tiene que ver con tecnologías como styled-components o SASS. Más bien es un regreso a las cavernas de CSS.

¿Es recomendable adoptar una arquitectura CSS actualmente?

Pues en un proyecto grande habría que decir que "seguro". En proyectos pequeños hay quien piensa que no es necesario. A mi parecer, los proyectos pequeños es un buen lugar para comenzar a usar estas arquitecturas si nunca has usado una e, inconscientemente, adquirir un flujo de trabajo natural con estas arquitecturas, aunque no sea en su totalidad.

¿Cuáles son esas arquitecturas de las que hablas?

Pienso que las más importantes a lo largo de los años han sido:

  1. Object Oriented CSS, conocida por OOCSS.
  2. Scalable and Modular for CSS, conocida por SMACSS.
  3. Block Element Modifier, conocida por BEM.
  4. Inverted Triangle CSS, conocida por ITCSS.

De éstas se ha escrito muchísimo, tanto en inglés como en español. Solo hay que darse una vuelta por Google y comprobarlo.

Entonces ¿cuáles son esas prácticas cuestionables?

Vamos a ver las que considero más relevantes.

Cómo realizar un select aleatorio con el ORM Doctrine

En estos tiempos en los que absolutamente todo está más que medido, programado y tageado para poder ofrecerte contenido relacionado al que estes disfrutando en este o cualquier momento, que te resulte interesante, sin dejarlo al azar, y sigas pinchando, perdón, clickando en enlaces de esa web que estás viendo (¿alguién pincha, perdón, clicka en esos enlaces?) pues a mi me da por querer obtener una serie de items de forma aleatoria. ¿El objetivo? ninguno en particular, simplemente el azar, el caos absoluto.

Resumiendo, usando la típica función RAND() de PHP o MySQL o pasando por algo similar al random en Java o JavaScript, obtener una serie items, pero de la base de datos. Así, a lo bruto, sin pensar si tiene alguna relación una cosa con otra.

En concreto, lo que quiero es hacer una consulta a la base de datos, en este caso es MySQL, y obtener 3 items aleatorios de una tabla. MySQL (y seguro que otros gestores de base de datos) nos provee de una función, que ya he mencionado, RAND(), que usado junto al comando ORDER BY nos debería devolver los items desordenados.

Pues parece sencillo ¿no? Pues sí, pero resulta que estoy usando Doctrine, que es un ORM y que el puñetero no lo entiende:

[Syntax Error] line 0, col 48: Error: Expected known function, got 'RAND'

Ale, ya tenemos el problema. Pero bueno, hay varias soluciones. Pero yo voy a dejar aquí la mia que es la que más me gusta hasta que me convenzan de lo contrario.

La validación de fechas con JavaScript es un coñazo

Hace unas semanas me encontré con una tarea en el trabajo que consistía en validar campos de formularios con JavaScript. Ya ya, existe el atributo pattern de HTML que hace esta tarea mucho más fácil, pero en este caso era, más que un requisito, una exigencia del cliente. No quería validarlo con estos atributos. Prefería hacerlo con JavaScript, así que hubo que remangarse. En ese momento pensé que ¡¡la validación de formularios con JavaScript siempre vuelve!!

Uno de las validaciones más costosos fue la de la fecha de nacimiento. Siguiendo la recomendación de un montón de artículos que leí (¡¡mentira!!, fue el diseñador quien lo propuso así) para introducir la fecha de nacimiento, es mejor dividir cada elemento de la fecha en los tres elementos que forman dicha fecha: día, mes y año. Así que tampoco podía usar un elemento de entrada tipo date. Así que, desde este punto, creé un componente HTML con tres elementos HTML select para cada elemento de la fecha.

Imagen del componente fecha de nacimiento

Con esto en mente, para validarlo, debía obtener el valor de los tres elementos y formar una fecha, formato cadena, y que esta tuviera sentido. Comprobar que esa fecha se corresponde con una fecha real del pasado.

Explicado así, no parecía una tarea demasiado compleja. Pues resultó ser algo muuuucho más coñazo. Me encontré con varios problemas a la hora de validar la fecha y quiero dejar aquí escrito ese testimonio. ¿Quereís saber cuales fueron? Pues vamos allá.

Mixins y functions en styled-components

Al igual que en SASS, en styled-components también podemos usar funciones y mixins como herramientas que nos ayuden a realizar tareas con el mismo objetivo que con el pre-procesador.

Para estas herramientas he creado las carpetas styled-components-utils/mixinsstyled-components-utils/functions dentro del proyecto. En cada una de ellas he creado un fichero index.js que me sirve de bootstrap para los mixins y funciones.

De esta forma, en el caso que el número de mixins y funciones comience a ser muy elevado, evito que los ficheros crezcan de forma desmesurada, haciendo complicado la búsqueda y lectura.

Por lo demás, el funcionamiento de estas utilidades para crear estilos, es similar a otros pre-procesadores CSS, en este caso, utilizando una sintaxis JavaScript de lo más moderna. Vamos a ver.

Creando un componente básico con React, styled-components y storybook

En la guía anterior, Entorno de desarrollo por componentes con React, styled-components y storybook, dejé preparado el PC con las herramientas necesarias para poder desarrollar componentes en un ecosistema JavaScript. También creé un proyecto con estas herramientas e hice la prueba para ver si todo funcionaba correctamente.

En esta guía, mi intención es crear un componente muy básico para aprender a manejarme en este ecosistema JavaScript paso a paso

El primer problema con el que me encuentro es que el entorno creado con la herramienta create-react-app que instalé, genera un arquetipo de aplicación y para esta guía mis necesidades son otras. Así que empezaré por la configuración del proyecto.

Dejo el enlace al repositorio de la aplicación por si alguién más quiere echarle un ojo y/o clonarlo.