{children}
0 Comentarios
Goober es una librería CSS-in-JS muy ligera pensada para escribir estilos directamente desde JavaScript en proyectos con React, Preact y otros entornos JSX. Sirve para crear componentes estilizados, generar clases dinámicas, definir estilos globales, trabajar con temas y extraer CSS crítico en renderizado del lado del servidor. Su gran atractivo es claro: ofrece una API familiar, inspirada en soluciones como Emotion o styled-components, pero con un tamaño mucho más reducido. En esta guía vas a ver qué es, cuándo usarla, cómo instalarla y cómo aplicarla paso a paso en un proyecto real sin complicarte más de la cuenta.
Goober es una solución de estilos en JavaScript que permite escribir CSS dentro de tus componentes. En lugar de separar por completo la lógica del componente y sus estilos en archivos distintos, puedes mantenerlos cerca y crear piezas de interfaz más encapsuladas, reutilizables y fáciles de mantener.
La propia documentación lo presenta como una solución CSS-in-JS de menos de 1 KB, una de las ideas que mejor explican su posicionamiento: hacer lo esencial de CSS-in-JS con el menor peso posible.
Esto no significa que sea una versión “recortada” sin utilidad. Significa que está pensada para cubrir los casos más habituales: componentes estilizados, estilos dinámicos, uso de props, temas, animaciones, estilos globales, compatibilidad con distintos entornos y soporte para SSR.
¿Por qué interesa esto? Porque en frontend moderno cada kilobyte cuenta. Si estás construyendo una landing, una app ligera, una librería de componentes o un proyecto donde el rendimiento es prioritario, no siempre necesitas una herramienta enorme para resolver algo que puede hacerse con una API más pequeña.
Goober encaja justo ahí: cuando quieres una experiencia parecida a styled-components o Emotion, pero con menos impacto en el bundle final.
Goober sirve para gestionar estilos de interfaz desde JavaScript. En la práctica, te ayuda a construir componentes visuales que se comportan de forma coherente, aceptan variantes y se pueden reutilizar sin arrastrar hojas CSS difíciles de controlar.
No sustituye al diseño, ni a la arquitectura de componentes, ni a una buena organización del sistema visual. Pero sí puede simplificar mucho la forma en la que conectas estilos con estado, props y temas.
La función más reconocible es styled. Con ella puedes crear un componente a partir de una etiqueta HTML, por ejemplo button, div, section o span.
import { styled } from 'goober';
const Button = styled('button')`
background: #111827;
color: white;
border: 0;
border-radius: 8px;
padding: 12px 18px;
cursor: pointer;
&:hover {
opacity: 0.9;
}
`;
La ventaja para principiantes es que el patrón se entiende rápido: defines un componente, le das estilos y lo reutilizas.
No siempre necesitas crear un componente nuevo. A veces solo quieres generar un className para aplicarlo a un elemento concreto. Para eso existe css.
import { css } from 'goober';
const cardClass = css`
border: 1px solid #e5e7eb;
padding: 24px;
border-radius: 12px;
`;
function Card({ children }) {
return
{children}; }
Este enfoque es útil cuando ya tienes componentes definidos y solo quieres añadir estilos de forma controlada.
Goober también permite trabajar con piezas más amplias del sistema visual. Puedes definir estilos globales con createGlobalStyles, animaciones con keyframes y temas reutilizables para mantener coherencia entre botones, tarjetas, layouts o estados de interfaz.
Esto es importante porque un proyecto no vive solo de componentes aislados. Necesitas una base común: colores, tipografías, espaciados, estados hover, estilos de body, resets básicos… y conviene gestionarlo de forma limpia.
Goober no intenta ser la herramienta más completa del mercado. Su propuesta es otra: ser ligera, directa y suficiente para muchos casos reales.
La ventaja más evidente es su tamaño. Frente a librerías más pesadas, Goober apuesta por una base mínima. Esto puede ayudar a reducir el JavaScript que envías al navegador, especialmente en proyectos donde el rendimiento, el tiempo de carga y la experiencia móvil importan.
¿Vas a notar siempre una diferencia enorme? Depende del proyecto. Pero en webs comerciales, landings, dashboards sencillos o componentes compartidos, cada decisión suma. Lo vemos constantemente en proyectos donde diseño, desarrollo y SEO técnico se cruzan: menos peso suele traducirse en una base más sana.
Goober no está limitado a React. Puede utilizarse con Preact y otros entornos que trabajen con una función compatible para crear elementos. Esa flexibilidad es una de sus características diferenciales frente a algunas alternativas más atadas a un ecosistema concreto.
Esto lo hace interesante para equipos que buscan una solución pequeña y portable, o para proyectos en los que Preact se usa precisamente para reducir peso.
Aunque sea ligera, la librería permite trabajar con estilos dinámicos basados en props. Por ejemplo, un botón puede cambiar de color según su variante, tamaño o estado.
const Button = styled('button')`
background: ${(props) => props.primary ? '#2563eb' : '#e5e7eb'};
color: ${(props) => props.primary ? 'white' : '#111827'};
`;
También puedes apoyarte en temas para no repetir valores visuales por todo el proyecto. La clave está en no abusar: los estilos dinámicos son útiles, pero si cada componente calcula demasiadas variantes, la interfaz se vuelve difícil de mantener.
Goober incluye extractCss, una función pensada para extraer el CSS crítico en escenarios de SSR. Esto es especialmente útil en frameworks o configuraciones donde el HTML se genera en el servidor y quieres entregar los estilos necesarios desde el primer render.
Dicho de forma sencilla: ayuda a que la página llegue al navegador con los estilos importantes ya preparados, reduciendo problemas visuales iniciales.
Instalar Goober es sencillo. Lo importante no es solo añadir el paquete, sino recordar que necesitas configurarlo antes de usar styled.
Puedes instalarlo con tu gestor de paquetes habitual:
npm install goober
Con Yarn:
yarn add goober
Con pnpm:
pnpm add goober
A partir de ahí, ya puedes importar sus funciones principales desde goober.
Antes de usar styled, debes ejecutar setup. En React, lo habitual es pasarle React.createElement.
import React from 'react';
import { setup } from 'goober';
setup(React.createElement);
Este paso le indica a Goober cómo debe crear los elementos virtuales. Si se te olvida, los componentes estilizados no funcionarán como esperas. Es uno de esos detalles pequeños que conviene dejar configurados una sola vez, en el punto de entrada de la aplicación o en un archivo de configuración de estilos.
Una vez configurado, puedes crear tu primer componente:
import { styled } from 'goober';
const Title = styled('h1')`
font-size: 32px;
line-height: 1.2;
color: #111827;
`;
export function Hero() {
return
; }
Y ya está. No hay que hacer magia rara. Es CSS escrito dentro de una plantilla literal, asociado a un componente.
En React, Goober resulta especialmente cómodo si vienes de styled-components o Emotion, porque el patrón mental es muy parecido.
Imagina una tarjeta básica:
const Card = styled('article')`
border: 1px solid #e5e7eb;
border-radius: 16px;
padding: 24px;
background: white;
`;
const CardTitle = styled('h2')`
margin: 0 0 8px;
font-size: 20px;
`;
const CardText = styled('p')`
margin: 0;
color: #4b5563;
`;
Esto te permite construir interfaces donde cada pieza lleva sus estilos principales consigo. Para un equipo pequeño, o para una web que evoluciona por bloques, puede ser mucho más manejable que una hoja CSS enorme llena de clases que nadie se atreve a tocar.
Uno de los usos más prácticos es crear variantes:
const Badge = styled('span')`
display: inline-flex;
border-radius: 999px;
padding: 4px 10px;
font-size: 13px;
background: ${(props) => props.success ? '#dcfce7' : '#fee2e2'};
color: ${(props) => props.success ? '#166534' : '#991b1b'};
`;
Así puedes hacer:
Publicado
Requiere revisión
Para proyectos reales, nuestro consejo es definir pocas variantes y bien nombradas. Mejor primary, secondary, success o danger que diez combinaciones ambiguas.
Cuando usas props solo para estilos, puede ocurrir que esas props acaben en el HTML final. Por ejemplo, primary no es un atributo válido para un botón HTML estándar. Para evitar ruido o warnings, conviene controlar qué propiedades se pasan al DOM.
Goober incluye soporte para shouldForwardProp, que permite filtrar props. Es una solución útil cuando tienes componentes con variantes visuales internas que no deberían aparecer como atributos HTML.
Este punto puede parecer menor, pero en interfaces medianas se nota. Un HTML más limpio también facilita depuración, testing y mantenimiento.
Goober funciona muy bien con Preact porque ambos comparten una filosofía parecida: ofrecer mucho con poco peso.
En Preact, la configuración inicial suele hacerse pasando h a setup.
import { h } from 'preact';
import { setup } from 'goober';
setup(h);
A partir de ahí, el uso de styled, css, keyframes o estilos globales es muy parecido al que tendrías en React.
Esta compatibilidad es especialmente interesante si estás construyendo widgets, microfrontends, pequeñas aplicaciones embebidas o interfaces donde el tamaño final es una prioridad clara.
Goober puede encajar muy bien en:
Landings y microsites donde el rendimiento es importante.
Componentes reutilizables que deben ser ligeros.
Proyectos con Preact.
Interfaces embebidas dentro de otras plataformas.
Aplicaciones donde quieres CSS-in-JS sin asumir una dependencia grande.
En Overant solemos valorar este tipo de decisiones cuando una web necesita una base técnica ligera, mantenible y preparada para crecer. Si estás replanteando tu presencia digital y buscas un equipo que combine criterio técnico, diseño y captación orgánica, podemos ayudarte desde nuestro servicio de diseño web en Alicante.
No necesitas aprender toda la API el primer día. Pero sí conviene entender las piezas principales.
styled sirve para crear componentes con estilos asociados. Puedes usar etiquetas HTML o componentes personalizados. Es la API más parecida a styled-components.
const Section = styled('section')`
max-width: 1120px;
margin: 0 auto;
padding: 64px 24px;
`;
Úsala cuando el estilo forma parte de la identidad del componente.
css genera nombres de clase. Es útil cuando no quieres crear un componente nuevo o cuando necesitas componer clases.
const hidden = css`
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
`;
Es una herramienta sencilla, directa y bastante práctica.
keyframes permite declarar animaciones:
import { keyframes, styled } from 'goober';
const fadeIn = keyframes`
from { opacity: 0; }
to { opacity: 1; }
`;
const Box = styled('div')`
animation: ${fadeIn} 200ms ease-in;
`;
Conviene usar animaciones con moderación. Mejor pocas, consistentes y con intención.
createGlobalStyles sirve para estilos que afectan a toda la página: body, tipografías base, resets, selección de texto, etc.
import { createGlobalStyles } from 'goober/global';
const GlobalStyles = createGlobalStyles`
body {
margin: 0;
font-family: system-ui, sans-serif;
background: #f9fafb;
}
`;
La idea no es meter aquí todos los estilos del proyecto, sino la base compartida.
extractCss permite obtener el CSS generado durante el renderizado para incluirlo en la respuesta del servidor. Es relevante si usas SSR y quieres evitar que la página aparezca sin estilos durante un instante.
Si trabajas con frameworks como Next.js, este punto requiere una configuración más cuidadosa. No es difícil, pero tampoco conviene improvisarlo copiando cualquier snippet sin entender dónde se inyecta el CSS.
La comparación natural es con styled-components y Emotion. Son alternativas muy conocidas, con comunidades grandes y muchas funcionalidades. Entonces, ¿por qué elegir una opción más pequeña?
La diferencia más clara está en el tamaño. Goober prioriza una huella mínima, mientras que styled-components y Emotion ofrecen ecosistemas más amplios.
En una app compleja puede que el peso de la librería no sea el principal cuello de botella. Pero en una web donde cada recurso importa, elegir una dependencia más ligera puede ayudar. No es la única métrica, pero sí una métrica que merece atención.
Si ya conoces styled-components, Goober te resultará familiar. La idea de crear componentes con styled('button') o escribir CSS en template literals se aprende rápido.
Para principiantes, esto reduce la barrera de entrada. No necesitas entender una arquitectura compleja para empezar; puedes crear un botón, una tarjeta y una sección en pocos minutos.
Aquí viene el matiz importante: Goober no pretende cubrir absolutamente todo lo que ofrecen Emotion o styled-components.
Puedes echar en falta ciertas utilidades avanzadas, integraciones más maduras, patrones específicos o herramientas de depuración más completas. También hay diferencias en APIs concretas, como algunas funciones auxiliares que sí existen en otras librerías.
Por eso no conviene venderlo como “mejor en todo”. No lo es. Es mejor cuando lo que necesitas encaja con su filosofía.
Elige Goober si buscas ligereza, una API simple, compatibilidad con Preact o una forma directa de usar CSS-in-JS sin cargar una solución grande.
Opta por Emotion o styled-components si tu proyecto depende de funcionalidades avanzadas, si tu equipo ya tiene una base sólida con esas herramientas o si necesitas un ecosistema más amplio y documentado alrededor.
La mejor decisión no es la más popular: es la que encaja con tu contexto.
Usar una librería ligera no garantiza automáticamente un proyecto ligero. La forma de trabajar importa mucho.
Evita crear componentes con demasiadas responsabilidades visuales. Un botón no debería saberlo todo sobre el layout de la página. Una tarjeta no debería controlar media interfaz.
Piensa en piezas pequeñas, predecibles y combinables.
Los estilos dinámicos son cómodos, pero no todo tiene que depender de props. Si una variante no cambia nunca, quizá puede ser un estilo estático.
Esto mejora legibilidad y reduce complejidad. Y sí, a veces nos venimos arriba metiendo props para todo. Mejor frenarse un poco.
Define colores, espaciados, radios y tamaños de forma consistente. Aunque el proyecto sea pequeño, tener un pequeño sistema de tokens evita decisiones arbitrarias.
const theme = {
colors: {
primary: '#2563eb',
text: '#111827',
muted: '#6b7280'
},
radius: {
md: '8px',
lg: '16px'
}
};
Luego puedes usar esos valores en tus componentes y mantener coherencia visual.
No elijas herramientas solo por intuición. Mide. Revisa el tamaño final del bundle, analiza qué dependencias pesan más y comprueba si la mejora se nota en el rendimiento real.
La optimización sin medición es, muchas veces, solo una opinión con buena pinta.
Como cualquier herramienta, Goober tiene pequeñas trampas para quien empieza.
Es el error clásico. Si usas styled, debes haber ejecutado antes setup con la función adecuada, como React.createElement en React o h en Preact.
Lo mejor es centralizarlo en un archivo de configuración que se cargue una vez.
Si usas props como primary, variant o size solo para estilos, revisa si acaban renderizadas en el DOM. Para evitarlo, usa mecanismos de filtrado como shouldForwardProp.
Tu HTML será más limpio y evitarás warnings innecesarios.
Los estilos globales deberían ser la base, no el cajón desastre. Si algo pertenece a un botón, ponlo en el botón. Si pertenece a toda la aplicación, entonces sí tiene sentido llevarlo a createGlobalStyles.
Separar bien estos niveles evita proyectos difíciles de escalar.
En SSR no basta con que los estilos funcionen en cliente. Deben generarse y entregarse correctamente desde el servidor. Si no configuras bien la extracción de CSS crítico, puedes encontrarte con parpadeos visuales o estilos que llegan tarde.
Aquí conviene revisar la integración con calma y probar tanto desarrollo como producción.
Vamos a construir un componente sencillo: una tarjeta de llamada a la acción con variantes.
Primero, pensamos en la estructura:
export function CtaCard({ title, text, highlighted }) {
return (
{text}
Solicitar información
Tenemos una tarjeta, un título, un texto y un botón. Nada más.
Ahora definimos los estilos:
const Card = styled('article')`
border-radius: 20px;
padding: 32px;
border: 1px solid ${(props) => props.highlighted ? '#2563eb' : '#e5e7eb'};
background: ${(props) => props.highlighted ? '#eff6ff' : '#ffffff'};
`;
const Title = styled('h2')`
margin: 0 0 12px;
font-size: 24px;
color: #111827;
`;
const Text = styled('p')`
margin: 0 0 20px;
color: #4b5563;
`;
La prop highlighted permite cambiar el aspecto sin crear otro componente distinto.
Añadimos un botón con estado hover:
const Action = styled('button')`
border: 0;
border-radius: 10px;
padding: 12px 16px;
background: #2563eb;
color: white;
cursor: pointer;
&:hover {
background: #1d4ed8;
}
`;
Con esto ya tienes un componente reutilizable, fácil de leer y suficientemente flexible para una landing o una sección comercial.
Sí, puede servir, pero depende de las necesidades del proyecto. Si tu aplicación requiere una solución CSS-in-JS ligera y tu equipo controla bien la arquitectura de componentes, puede funcionar correctamente. Si necesitas funcionalidades muy avanzadas, tooling específico o un ecosistema enorme, quizá te convenga una alternativa más completa.
Sí, Goober puede utilizarse con TypeScript. De hecho, la documentación contempla TypeScript dentro de sus características. Aun así, si vas a crear componentes con muchas variantes y props personalizadas, conviene tiparlas bien para evitar errores y mejorar la experiencia de desarrollo.
Puede reemplazarlo en muchos casos, sobre todo si usas styled-components para patrones básicos: componentes estilizados, props, temas, animaciones y estilos globales. Pero no siempre será un reemplazo directo si dependes de APIs concretas o de integraciones avanzadas. Antes de migrar, revisa qué partes de styled-components estás usando de verdad.
Sí, Goober incluye soporte para SSR mediante extracción de CSS crítico con extractCss. Ahora bien, necesitas configurarlo correctamente en tu entorno. En frameworks con SSR, como Next.js, la integración debe probarse bien para asegurarte de que los estilos llegan en el primer render.
Sí, merece la pena considerarlo si buscas una solución CSS-in-JS ligera, clara y compatible con proyectos modernos. No es la opción más completa ni pretende serlo, pero precisamente ahí está su gracia: hace lo necesario con muy poco peso. Para principiantes, también puede ser una buena puerta de entrada al CSS-in-JS porque su API es fácil de entender.
Y una aclaración rápida: Goober no es un componente visual, ni un modal, ni una plantilla. Es una librería para gestionar estilos. Puedes usarla para diseñar un modal, claro, pero su función es ayudarte a escribir y aplicar CSS desde JavaScript.
Goober merece la pena cuando quieres una herramienta de CSS-in-JS ligera, práctica y con una API familiar. Es especialmente interesante en proyectos con React o Preact donde el tamaño del bundle importa, en componentes reutilizables, en webs con foco en rendimiento y en equipos que prefieren mantener estilos cerca de la lógica visual del componente.
No es la respuesta universal para todos los proyectos frontend. Si necesitas un ecosistema enorme, herramientas avanzadas o compatibilidad directa con patrones muy específicos de otras librerías, quizá Emotion o styled-components encajen mejor. Pero si buscas simplicidad, velocidad y una curva de aprendizaje amable, Goober es una opción muy seria.
Nuestra recomendación es sencilla: pruébalo en un componente real, mide su impacto y valora si su forma de trabajar encaja con tu proyecto. Muchas veces, una herramienta pequeña y bien elegida aporta más valor que una solución gigante usada solo al 20%.
¿Qué te ha parecido este artículo?