> Faqs > ¿Cómo organizas el código de Tailwind para mejorar la mantenibilidad y no repetir código?

¿Cómo organizas el código de Tailwind para mejorar la mantenibilidad y no repetir código?

Me han hecho esta pregunta en Youtube y me parece interesante para dejar la respuesta aquí:

Se basa en organizar el código de CSS y HTML de modo que se maximice la mantenibilidad del sitio, no se ensucie tanto el HTML, se escriba el código de las clases una única vez y se separe el código por responsabilidades, para no tenerlo todo junto y difícil de encontrar cada cosa. La pregunta es:

Se usa un solo archivo de css para diferentes páginas de un sitio web?... O también se puede generar un css por página como para dar más orden. Pues me parece mejor hacer el código en archivos css que poner todas esas etiquetas en el html

Respuestas

Voy a dividir la respuesta en dos bloques, la organización habitual con CSS común y cuando usamos Tailwind CSS.

CSS común

En lo que respecta a la organización del CSS, lo común es tener el CSS separado en archivos individuales, donde cada archivo tiene un componente, por ejemplo, los botones, iconos, navegador, lista "x" o "y"... En ese caso usamos una herramienta que nos permita importar el contenido y luego producir todos esos archivos separados en un único archivo de CSS que es el que se enlaza en todas las páginas web.

Las herramientas que podrías usar para componer ese archivo CSS con los estilos de la web podrían ser:

Además cabe decir que cuando usas CSS básico generalmente no tienes el código dividido por páginas HTML, porque generalmente la mayoría sería común a todo el sitio y al fin y al cabo el CSS no suele ser tan pesado como para partirlo, a no ser que tuvieras partes de tu aplicación muy complejas y muy independientes.

Usando Tailwind CSS

Pero en el caso de Tailwind no se hacen tanto esos componentes CSS, o no son necesarios siempre. Primero porque generalmente los estilos los traes de clases de utilidad de Tailwind y no eres tú el que escribe el CSS, sino lo genera el framework en función de las clases de utilidad que hayas usado en tu proyecto.

Esa situación ensucia el HTML y tienes complicado la mantenibilidad en el momento que tengas que repetir muchas veces los mismos estilos, por ejemplo cada vez que usas un botón, o cada vez que colocas una lista o una tarjeta de producto, por poner algunos ejemplos.

Entonces tienes varias posibilidades, las más comunes serían:

  1. Usar el @apply para crear tus propios componentes como cuando trabajas con CSS básico.
  2. Usar componentes de Javascript, web components, vue, react y similares, de modo que las clases de tailwind las colocas siempre en un único componente, que luego reutilizas a lo largo del sitio.
  3. Usar un sistema de templates en el backend, que también suele tener una mecanica de componetización, de modo que nuevamente las clases de tailwind las escribes una única vez en el template del componente y lo reutilizas a lo largo de todo el sitio.
Miguel Angel
2492 117 166 8