A la hora de crear un diseño para un sitio web es importante tener en cuenta nuestro objetivo principal y los detalles que son necesarios e imprescindibles, así como los detalles que podemos asumir como prescindibles y que no son necesarios para nosotros.
No es lo mismo desarrollar una plataforma a medida para una empresa, donde el diseño no es un aspecto prioritario (se prioriza su funcionalidad), que una aplicación o web que debe ser rompedora en su diseño y destacar de la competencia con una interfaz muy personalizada.
Objetivo
Muchos desarrolladores acostumbran a utilizar una herramienta según lo fácil o cómoda que es a la hora de desarrollar, olvidando que quizás no se ajusta bien a sus objetivos principales (o en el futuro se complicará a la hora de profundizar o diferenciarse).
Para entender esto bien, tenemos que conocer las categorías de herramientas que existen y cuál se adapta mejor a nuestro caso. Para ello, lo mejor es echar un vistazo a esta piramide invertida donde vemos varias categorías:
Se diferencian 5 niveles:
- Nivel 1: CSS, la tecnología base para hacer diseños web.
- Nivel 2: Frameworks de CSS: herramientas que nos hacen más cómodo y rápido trabajar con CSS.
- Nivel 3: Preprocesadores: herramientas que nos permiten automatizar tareas relacionadas con CSS.
- Nivel 4: Librerías JS: herramientas que se adaptan muy bien a Javascript o frameworks específicos.
- Nivel 5: Cátalogo de componentes: herramientas con componentes prefabricados listos para usar.
Observa que cada uno de estos niveles o categorías, a medida que se acerca a la parte inferior (pico) de la piramide, más cercano está a CSS. Por el contrario, el otro extremo se aproxima más a Javascript.
Categorías
Veamos paso a paso cada una de estas categorías:
Tecnología base (CSS)
1️⃣ La tecnología base es el núcleo de CSS, el cuál te permite realizar prácticamente cualquier cosa, directamente en el navegador, sin uso de dependencias o librerías externas. A medida que nos alejemos de este nivel, necesitaremos menos conocimiento de CSS, pero casi siempre será necesario tener una mínima base de CSS.
Cuando interesa:
- ✅ Usarlo si se requiere personalización y control total
- ✅ Usarlo si se tiene un equipo o devs experimentados con CSS
- ❌ No usarlo si reducir el tiempo de desarrollo es prioritario
Frameworks de CSS
2️⃣ La finalidad de los frameworks de CSS es limitar las posibilidades y poder realizar lo mismo que hacíamos con CSS, pero mucho más rápido y tardando menos en conseguirlo. Para ello, nos centramos en patrones o detalles que son muy comunes en una web y ya están algo definidos.
En esta categoría tenemos frameworks como Bootstrap o TailwindCSS, entre muchos otros. Mientras que Tailwind requiere ciertos conocimientos de CSS, Bootstrap está más orientado a copiar una cierta estructura HTML más rígida. Existen algunos frameworks más minimalistas como PicoCSS, u otros sistemas como OpenProps, donde este último actua más bien como una serie de tokens de diseño en variables CSS para poder utilizar en tu sitio.
Cuando interesa:
- ✅ Usarlo si necesitas velocidad de desarrollo y consistencia visual
- ✅ Usarlo si trabajas con un equipo o devs no especializados en diseño
- ❌ No usarlo si la diferenciación de diseño es muy importante
Preprocesadores
3️⃣ Los preprocesadores o transformadores, son herramientas que se encargan de leer código y convertirlo o transformarlo a CSS, generalmente añadiendo o modificándolo para añadir o automatizar tareas repetitivas o tediosas y reducir el trabajo que debe hacer el desarrollador.
Los casos más populares son Sass, PostCSS o LightningCSS, aunque pueden haber algunos con menor presencia. Ten en cuenta que aunque mucha gente no sabe utilizar estas herramientas, es la base o núcleo de librerías o catálogos de los siguientes niveles.
Cuando interesa:
- ✅ Usarlo si trabajas en proyectos grandes que requieren modularidad
- ✅ Usarlo si no trabajas en un proyecto con frameworks de Javascript
- ❌ No usarlo si el stack del proyecto ya incluye soluciones avanzadas
Librerías Javascript
4️⃣ Existen una multitud de herramientas para crear diseños de una forma que se integre mejor con el mundo de la programación Javascript. Algunas de las herramientas de esta categoría hacen un uso intensivo de Javascript, otras lo hacen de forma más ligera, pero todas reinterpretan la forma de escribir CSS para adaptarla mejor a una aplicación o proyecto Javascript.
Librerías populares podrían ser el extinto Styled Components (deprecated), Emotion, PandaCSS, Vanilla Extract, ECSStatic o incluso estrategias como CSS Modules, que aunque no son una librería per se, existe integrado en librerías, preprocesadores o herramientas como Vite.
Cuando interesa:
- ✅ Usarlo en proyectos Javascript como React o similares
- ✅ Usarlo si necesitas estilos dinámicos que se adapten a Javascript
- ❌ No usarlo si el rendimiento es importante
Catálogo de componentes
5️⃣ En el mundo empresarial es muy común que el diseño no sea una prioridad y se busquen componentes que ya tengan la funcionalidad y, al menos un diseño minimo, listos para copiar y pegar. En ese caso, es muy posible que te interesen las soluciones de este nivel.
Sistemas como DaisyUI, shadcn, Shoelace, Material UI, Ant Design o Primefaces son algunos de los más conocidos.
Cuando interesa:
- ✅ Usarla si necesitas una interfaz pulida, prefabricada y lista para usar
- ✅ Usarla si el foco está en funcionalidad y consistencia, no en diseño
- ❌ No usarla si requieres un diseño a medida o muy personalizado
