CSS
Compara utility-first, Tailwind, CSS Modules, CSS-in-JS y estilos globales según composición, alcance, runtime, tooling y mantenimiento.
Una estrategia de styling decide dónde se expresan las reglas, cómo se reutilizan y cómo se controla la cascada. No cambia los fundamentos de CSS.
<button class="inline-flex items-center gap-2 rounded-lg px-4 py-3">
Guardar
</button>.button {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
border-radius: 0.75rem;
}<button class="button">Guardar</button>La clase representa una abstracción visual reusable.
<button class="inline-flex items-center gap-2 px-4 py-3 rounded-lg">
Guardar
</button>Cada clase expresa una decisión pequeña. La reutilización puede ocurrir en el componente del framework, no necesariamente en una clase CSS compuesta.
Sigue produciendo CSS sujeto a layout, cascade, inheritance y browser support.
<button class="bg-brand-600 hover:bg-brand-700 focus-visible:outline-2 disabled:opacity-50">
Guardar
</button>Las variants generan selectores y condiciones. El orden final depende de la herramienta, no del orden textual de cada clase en HTML como si fueran declarations inline.
<div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">Los breakpoints deben seguir respondiendo al contenido. Una utility no convierte automáticamente un breakpoint predefinido en la decisión correcta.
Una herramienta moderna puede generar container queries, dark mode, reduced motion, forced colors y otras condiciones.
El concepto sigue siendo CSS:
@container (width >= 30rem) { ... }
@media (prefers-reduced-motion: reduce) { ... }<div class="grid-cols-[minmax(0,2fr)_minmax(18rem,1fr)]">Son útiles para una relación específica, pero muchos valores arbitrarios repetidos indican tokens o abstracciones faltantes.
<div class="[&>h2]:mt-0">Permiten selectores locales complejos. Abusar de ellas puede recrear selectores acoplados dentro del markup.
En React:
export const Button = ({ children, variant = 'primary' }) => {
return (
<button className={buttonVariants({ variant })}>
{children}
</button>
);
};La reutilización vive en el componente y su API.
No extraigas una clase o componente solo porque una secuencia aparece una vez. Extrae cuando existe un concepto reusable.
Librerías de variants ayudan a mapear props a clases:
variant: primary | secondary | danger
size: compact | default
state: loading | disabledLa función debe evitar combinaciones contradictorias y conservar una fuente clara de defaults.
Combinar dinámicamente:
px-4 + px-6
text-sm + text-lg
hidden + flexpuede producir resultados dependientes del CSS generado. Una herramienta de merge ayuda, pero no debe reemplazar una API de variants bien diseñada.
No hardcodees la paleta del producto en cada arbitrary value. Conecta Tailwind o cualquier sistema de utilities con tokens semánticos.
bg-action-primary
text-on-action
border-subtleLos nombres exactos dependen de la configuración y versión de la herramienta.
import styles from './card.module.css';
<article className={styles.card} />Ofrece scope de nombres y permite escribir CSS completo. Es compatible con utilities para casos puntuales.
Aporta estilos según props y co-location. Evalúa:
No toda librería comparte el mismo costo.
<div style={{ '--progress': progress } as React.CSSProperties} />Son apropiados para valores dinámicos específicos. No soportan directamente pseudo-clases o media queries y no deberían reemplazar toda la stylesheet.
Cascade layers, nesting, scope, custom properties y container queries reducen varias razones históricas para depender de preprocesadores.
Sass todavía aporta mixins, loops y tooling cuando el proyecto realmente los necesita.
Pregunta:
¿Por qué el orden de clases en class="px-4 px-6" no garantiza que px-6 gane?
Porque ambas clases corresponden a reglas en una stylesheet; el resultado depende de la cascada y del orden generado de esas reglas, no del orden del atributo class.
Rendimiento, containment y content-visibility explica cómo limitar trabajo de style, layout y paint.