Estilos que Reaccionan al Estado

Los estilos estáticos no son suficientes. Un botón necesita verse diferente cuando está deshabilitado. Una tarjeta necesita resaltarse cuando está seleccionada. Un campo de formulario debería indicar errores. Svelte hace que las clases dinámicas sean sencillas.

Lo que Aprenderás

Aplicar clases de forma condicional con class:
Usar expresiones en atributos de clase
Combinar clases estáticas y dinámicas
Construir patrones comunes de UI

La Directiva `class:`

¿Qué es una Directiva?

En Svelte, una directiva es un atributo especial que le da al framework instrucciones sobre cómo manejar un elemento. Las directivas siempre comienzan con un prefijo como on:, bind:, o class:.

La directiva class: le indica a Svelte: "Agrega o elimina esta clase CSS dinámicamente dependiendo de si una condición es verdadera o falsa."

Cómo Funciona

Piénsalo como un interruptor de luz automático. Cuando selected es true, la clase se activa (on). Cuando selected es false, la clase se desactiva (off). Svelte se encarga de agregar y eliminar por ti.

Sintaxis básica:

<div class:className={condition}>

className - La clase CSS que deseas aplicar
condition - Un booleano (verdadero/falso) que determina si la clase debe estar activa

Si condition es true, la clase se agrega. Si condition es false, la clase se elimina.

Sintaxis Abreviada

Cuando el nombre de tu variable coincide exactamente con el nombre de tu clase, puedes usar una forma abreviada:

<!-- Long form -->
<div class:selected={selected}>

<!-- Shorthand (same thing!) -->
<div class:selected>

Ambas hacen lo mismo: cuando la variable selected es true, se aplica la clase selected.

Un Ejemplo Completo

La forma más sencilla de aplicar una clase condicional:

<!-- example -->
<script>
	let { selected = false } = $props()
</script>

<div class:selected>Content</div>

<style>
	.selected {
		background: lightblue;
	}
</style>

Cuando selected es true, se agrega la clase selected. Cuando es false, se elimina.

La sintaxis es class:className={condition}. Cuando el nombre de la variable coincide con el nombre de la clase, puedes usar la forma abreviada class:className.

Condiciones Explícitas

Cuando los Nombres no Coinciden

A veces el nombre de tu variable y el nombre de tu clase CSS son diferentes. Quizás tu variable se llama isActive pero tu clase CSS es .active. En estos casos, necesitas indicarle explícitamente a Svelte qué condición controla qué clase.

Sintaxis:

<div class:className={variableName}>

El nombre de la clase va en el lado izquierdo del =, y la variable/condición va en el lado derecho entre llaves.

Ejemplo Básico

<script>
	let isActive = $state(false)
</script>

<!-- Variable name: isActive, Class name: active -->
<button class:active={isActive}>Click me</button>

Cuando isActive es true, se aplica la clase active. La variable y la clase tienen nombres diferentes, por lo que necesitamos la sintaxis explícita ={isActive}.

Usar Expresiones

Puedes usar cualquier expresión que evalúe a verdadero o falso:

<script>
	let count = $state(0)
</script>

<!-- Apply 'warning' class when count exceeds 10 -->
<span class:warning={count > 10}>Count: {count}</span>

La expresión count > 10 se evalúa. Si el conteo es 11 o mayor, warning es true y la clase se agrega. Si el conteo es 10 o menor, la clase se elimina.

Otros ejemplos de expresiones:

class:visible={items.length > 0} - Mostrar cuando hay elementos
class:valid={email.includes('@')} - Verificación básica de email
class:even={index % 2 === 0} - Cada dos elementos

Múltiples Condiciones en un Elemento

Puedes aplicar múltiples directivas class: al mismo elemento:

<script>
	let isActive = $state(false)
	let hasError = $state(false)
	let count = $state(0)
</script>

<div class:active={isActive} class:error={hasError} class:disabled={!isActive && hasError}>
	Status
</div>

Lo que está pasando aquí:

class:active={isActive} - Agrega la clase active cuando isActive es true
class:error={hasError} - Agrega la clase error cuando hasError es true
class:disabled={!isActive && hasError} - Agrega la clase disabled cuando AMBAS condiciones son true:
- !isActive significa "no activo" (el ! invierte el booleano)
- && significa "Y" (ambos lados deben ser verdaderos)
- Es decir: "deshabilitado cuando NO está activo Y tiene un error"

Las tres clases pueden aplicarse simultáneamente si todas sus condiciones son true. Se evalúan de forma independiente.

Combinar Estáticas y Dinámicas

Lo Mejor de Ambos Mundos

En aplicaciones reales, típicamente necesitas ambas:

Clases estáticas - Siempre aplicadas, definen la apariencia base
Clases dinámicas - Aplicadas de forma condicional, modifican la apariencia según el estado

Piensa en las clases estáticas como la base y en las clases dinámicas como las decoraciones que aparecen y desaparecen.

Cómo Funciona

Puedes usar el atributo class normal Y múltiples directivas class: en el mismo elemento:

<button
	class="btn btn-primary"          <!-- Static: always present -->
	class:loading={isLoading}        <!-- Dynamic: only when loading -->
	class:disabled={!isValid}        <!-- Dynamic: only when not valid -->
>

Svelte fusiona todo junto. El atributo class final será:

Cuando está inactivo y válido: "btn btn-primary"
Cuando está cargando y válido: "btn btn-primary loading"
Cuando no está cargando y es inválido: "btn btn-primary disabled"
Cuando está cargando y es inválido: "btn btn-primary loading disabled"

Ejemplo Completo

<script>
	let isLoading = $state(false)
	let isValid = $state(true)
</script>

<button class="btn btn-primary" class:loading={isLoading} class:disabled={!isValid}>
	{isLoading ? 'Saving...' : 'Save'}
</button>

<style>
	/* Base button styles - always applied */
	.btn {
		padding: 0.5rem 1rem;
		border-radius: 4px;
		border: none;
		cursor: pointer;
		transition: all 0.2s;
	}

	/* Primary variant - always applied */
	.btn-primary {
		background: #3b82f6;
		color: white;
	}

	/* Loading state - applied conditionally */
	.loading {
		opacity: 0.7;
		cursor: wait;
	}

	/* Disabled state - applied conditionally */
	.disabled {
		opacity: 0.5;
		cursor: not-allowed;
		background: #9ca3af;
	}
</style>

¿Por qué Combinarlas?

Separación de responsabilidades:

Las clases estáticas definen qué es el elemento (un botón, una tarjeta, una insignia)
Las clases dinámicas definen los cambios de estado (cargando, seleccionado, error)

Reutilización:

Los estilos base (.btn, .btn-primary) pueden reutilizarse en muchos botones
Los modificadores de estado (.loading, .disabled) funcionan con cualquier variante

Mantenibilidad:

Es fácil ver qué estilos son permanentes vs. condicionales
Los cambios en los estilos base no afectan la lógica de estado

Patrón Común: Base + Variante + Estado

<div class="card card-large" <!-- Base + Size variant -->
	class:selected={isSelected}
	<!-- State: selection -->
	class:featured={isFeatured}
	<!-- State: featured -->
	>
	<!-- content -->
</div>

Esto crea un sistema flexible donde puedes combinar estilos base, variantes y estados de forma independiente.

Expresión de Clase

Nombres de Clase Dinámicos con Template Literals

A veces no solo quieres agregar o eliminar una clase—quieres computar el nombre de la clase en sí. Esto es perfecto para variantes como insignias de estado, tamaños de botones o temas.

Cómo Funcionan las Expresiones de Template

Usar llaves {} dentro de un atributo de clase crea una expresión de template:

class="badge-{status}"

Svelte evalúa la variable dentro de {} e inserta su valor en el string. Si status es 'pending', el resultado es "badge-pending".

Ejemplo Completo

<script>
	let status = $state('pending') // 'pending' | 'confirmed' | 'cancelled'
</script>

<span class="badge badge-{status}">
	{status}
</span>

<style>
	.badge {
		padding: 0.25rem 0.5rem;
		border-radius: 4px;
		font-size: 0.875rem;
		font-weight: 600;
		text-transform: uppercase;
	}

	.badge-pending {
		background: #fef3c7;
		color: #92400e;
	}

	.badge-confirmed {
		background: #d1fae5;
		color: #065f46;
	}

	.badge-cancelled {
		background: #fee2e2;
		color: #991b1b;
	}
</style>

Cómo funciona:

La clase badge siempre se aplica (estilos base)
La expresión de template badge-{status} crea dinámicamente:
- badge-pending cuando status === 'pending'
- badge-confirmed cuando status === 'confirmed'
- badge-cancelled cuando status === 'cancelled'

Múltiples Variables

Puedes combinar múltiples variables:

<script>
	let size = $state('large')     // 'small' | 'medium' | 'large'
	let theme = $state('dark')     // 'light' | 'dark'
</script>

<!-- Generates: "button-large-dark" -->
<button class="button-{size}-{theme}">
	Click me
</button>

Cuándo Usar Expresiones de Template vs. `class:`

Usa class: cuando:

Agregues o elimines una sola clase basándote en un booleano
Ejemplo: class:active={isActive}

Usa expresiones de template cuando:

El nombre de la clase depende del valor de una variable
Trabajas con enums o valores de tipo string
Ejemplo: class="btn-{variant}" donde variant puede ser 'primary', 'secondary', etc.

Ternario en el Atributo de Clase

Situaciones de Una u Otra Opción

A veces necesitas elegir entre dos nombres de clase completamente diferentes según una condición. El operador ternario (? :) es perfecto para esto.

¿Qué es un Operador Ternario?

El operador ternario es una forma abreviada de la sentencia if/else:

condition ? valueIfTrue : valueIfFalse

Leyéndolo en voz alta: "Si la condición es verdadera, usa valorSiVerdadero; de lo contrario, usa valorSiFalso."

Ejemplo Básico

<script>
	let isExpanded = $state(false)
</script>

<div class={isExpanded ? 'panel expanded' : 'panel collapsed'}>
	<button onclick={() => (isExpanded = !isExpanded)}>
		{isExpanded ? 'Collapse' : 'Expand'}
	</button>
	<p>Content here...</p>
</div>

<style>
	.panel {
		overflow: hidden;
		transition: max-height 0.3s ease;
		border: 1px solid #e5e7eb;
		padding: 1rem;
		border-radius: 4px;
	}

	.expanded {
		max-height: 500px;
	}

	.collapsed {
		max-height: 50px;
	}
</style>

Desglosándolo:

Cuando isExpanded es true: class="panel expanded"
Cuando isExpanded es false: class="panel collapsed"

¿Por Qué No Usar `class:`?

Podrías usar directivas class::

<div class="panel" class:expanded={isExpanded} class:collapsed={!isExpanded}>

Pero el ternario es más limpio cuando las condiciones son mutuamente excluyentes (una U otra, nunca ambas).

Múltiples Clases en el Ternario

Puedes incluir múltiples clases en cada rama:

<script>
	let mode = $state('edit') // 'edit' | 'view'
</script>

<div class={mode === 'edit' 
	? 'container editable border-blue' 
	: 'container readonly border-gray'
}>
	<!-- content -->
</div>

Combinando con Clases Estáticas

Combina estático y ternario para máxima flexibilidad:

<script>
	let isOnline = $state(true)
</script>

<div class="user-status {isOnline ? 'online' : 'offline'}">
	<span class="indicator"></span>
	{isOnline ? 'Available' : 'Away'}
</div>

<style>
	.user-status {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}
	
	.indicator {
		width: 8px;
		height: 8px;
		border-radius: 50%;
	}
	
	.online .indicator {
		background: #10b981;
	}
	
	.offline .indicator {
		background: #6b7280;
	}
</style>

Múltiples Clases Dinámicas

Cuando las Cosas se Complican

Cuando tienes muchas clases dinámicas que administrar, construir un string de clases manualmente se vuelve complicado. Necesitas un enfoque programático.

Usando $derived con Arrays

La runa $derived de Svelte 5 crea valores computados que se actualizan automáticamente:

<script>
	let size = $state('medium')
	let variant = $state('primary')
	let isLoading = $state(false)

	let buttonClasses = $derived(
		['btn', `btn-${size}`, `btn-${variant}`, isLoading && 'loading']
			.filter(Boolean)
			.join(' ')
	)
</script>

<button class={buttonClasses}> Click me </button>

Desglosándolo:

Array de clases: ['btn', 'btn-medium', 'btn-primary', false]
.filter(Boolean): Elimina los valores falsy (false, null, undefined, strings vacíos)
- Resultado: ['btn', 'btn-medium', 'btn-primary']
.join(' '): Une los elementos del array con espacios
- Resultado: "btn btn-medium btn-primary"

Cómo funciona isLoading && 'loading':

Si isLoading es true: Se evalúa como 'loading' (el string)
Si isLoading es false: Se evalúa como false (se filtra)

Esto se denomina evaluación de cortocircuito en JavaScript.

Enfoque con Función Auxiliar

Crea una función reutilizable para gestionar clases:

<script>
	// Utility function
	function classNames(...classes) {
		return classes.filter(Boolean).join(' ')
	}

	let isActive = $state(true)
	let isDisabled = $state(false)
	let hasError = $state(false)
</script>

<button class={classNames(
	'btn',
	isActive && 'active',
	isDisabled && 'disabled',
	hasError && 'error'
)}>
	Click
</button>

Por qué esto es mejor:

Código limpio y legible
Fácil de agregar/eliminar clases
Puede extraerse a un archivo de utilidades y reutilizarse

Avanzado: Objetos Condicionales

Para escenarios aún más complejos:

<script>
	function cn(baseClasses, conditionalClasses) {
		const all = [
			baseClasses,
			...Object.entries(conditionalClasses)
				.filter(([_, condition]) => condition)
				.map(([className]) => className)
		]
		return all.join(' ')
	}

	let isActive = $state(true)
	let isLoading = $state(false)
	let hasError = $state(false)
</script>

<button class={cn('btn btn-primary', {
	'active': isActive,
	'loading': isLoading,
	'error': hasError
})}>
	Submit
</button>

Beneficios:

Las clases base siempre están incluidas
Las clases condicionales están claramente mapeadas a sus condiciones
Muy legible para componentes complejos

Ejemplo del Mundo Real: Tarjeta Dinámica

<script>
	let { 
		size = 'medium',
		variant = 'default',
		interactive = false,
		selected = false,
		disabled = false 
	} = $props()

	let cardClasses = $derived(
		[
			'card',
			`card-${size}`,
			`card-${variant}`,
			interactive && 'interactive',
			selected && 'selected',
			disabled && 'disabled'
		].filter(Boolean).join(' ')
	)
</script>

<article class={cardClasses}>
	<slot />
</article>

<style>
	.card { /* base styles */ }
	.card-small { padding: 0.5rem; }
	.card-medium { padding: 1rem; }
	.card-large { padding: 1.5rem; }
	
	.card-default { background: white; }
	.card-primary { background: #eff6ff; }
	
	.interactive { cursor: pointer; transition: transform 0.2s; }
	.interactive:hover { transform: translateY(-2px); }
	
	.selected { border: 2px solid #3b82f6; }
	.disabled { opacity: 0.5; pointer-events: none; }
</style>

Este patrón escala de manera excelente a medida que tu componente crece en complejidad.

Aplicar en BookIt

Apliquemos todo lo que aprendiste a componentes reales de BookIt. Estos ejemplos muestran cómo las clases dinámicas crean interfaces de usuario pulidas e interactivas.

Selección de Tarjeta de Servicio

Una tarjeta de servicio que los usuarios pueden seleccionar, con estilos especiales para servicios destacados:

<!-- filename: src/lib/components/ServiceCard.svelte -->
<script>
	let { service, selected = false, featured = false, onclick } = $props()
</script>

<article 
	class="card" 
	class:selected 
	class:featured
	role="button"
	tabindex="0"
	{onclick}
>
	{#if featured}
		<span class="badge">Popular</span>
	{/if}
	
	<h3>{service.name}</h3>
	<p class="description">{service.description}</p>
	<p class="price">${service.price}</p>
	<p class="duration">{service.duration} minutes</p>
</article>

<style>
	.card {
		position: relative;
		padding: 1.5rem;
		border: 2px solid transparent;
		border-radius: 8px;
		background: white;
		cursor: pointer;
		transition: all 0.2s ease;
	}
	
	.card:hover {
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	}

	/* Selected state - shows user's choice */
	.card.selected {
		border-color: #3b82f6;
		background: #eff6ff;
	}

	/* Featured state - highlights popular services */
	.card.featured {
		border-color: #f59e0b;
		box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
	}
	
	/* Both selected AND featured */
	.card.selected.featured {
		border-color: #3b82f6;
		box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
	}
	
	.badge {
		position: absolute;
		top: -8px;
		right: 1rem;
		background: #f59e0b;
		color: white;
		padding: 0.25rem 0.75rem;
		border-radius: 12px;
		font-size: 0.75rem;
		font-weight: 600;
	}
	
	.price {
		font-size: 1.5rem;
		font-weight: 700;
		color: #1f2937;
		margin-top: 1rem;
	}
</style>

Características clave:

class:selected - Retroalimentación visual de la elección del usuario
class:featured - Resalta los servicios populares
Ambas pueden estar activas simultáneamente
Transiciones suaves para una sensación profesional

Errores en Campos de Formulario

Un campo de texto que muestra errores de validación con retroalimentación visual clara:

<!-- filename: src/lib/components/TextField.svelte -->
<script>
	let { 
		label, 
		error = '', 
		value = $bindable(''),
		required = false,
		...rest 
	} = $props()
	
	// Derived state: has an error if error string is not empty
	let hasError = $derived(error.length > 0)
</script>

<div class="field" class:has-error={hasError}>
	<label>
		{label}
		{#if required}
			<span class="required">*</span>
		{/if}
	</label>
	
	<input 
		bind:value
		{...rest} 
	/>
	
	{#if hasError}
		<span class="error-message">
			<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
				<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
				<path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
			</svg>
			{error}
		</span>
	{/if}
</div>

<style>
	.field {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		margin-bottom: 1rem;
	}
	
	label {
		font-weight: 500;
		color: #374151;
	}
	
	.required {
		color: #ef4444;
	}
	
	.field input {
		padding: 0.5rem 0.75rem;
		border: 1px solid #d1d5db;
		border-radius: 4px;
		font-size: 1rem;
		transition: all 0.2s;
	}
	
	.field input:focus {
		outline: none;
		border-color: #3b82f6;
		box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
	}

	/* Error state - only applied when hasError is true */
	.field.has-error input {
		border-color: #ef4444;
		background: #fef2f2;
	}
	
	.field.has-error input:focus {
		box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
	}

	.error-message {
		display: flex;
		align-items: center;
		gap: 0.25rem;
		color: #ef4444;
		font-size: 0.875rem;
	}
</style>

Cómo funciona:

$derived calcula automáticamente hasError cuando cambia error
class:has-error={hasError} aplica el estilo de error de forma condicional
El borde y el fondo rojo solo aparecen cuando hay un error
El mensaje de error incluye un ícono para una mejor experiencia de usuario

Estados del Botón

Un componente de botón versátil con múltiples variantes, tamaños y estados:

<!-- filename: src/lib/components/Button.svelte -->
<script>
	let {
		variant = 'primary',
		size = 'medium',
		loading = false,
		disabled = false,
		fullWidth = false,
		onclick,
		...rest
	} = $props()
</script>

<button 
	class="btn btn-{variant} btn-{size}" 
	class:loading 
	class:full-width={fullWidth}
	disabled={disabled || loading}
	{onclick}
	{...rest}
>
	{#if loading}
		<span class="spinner"></span>
	{/if}
	<slot />
</button>

<style>
	/* Base button - always applied */
	.btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		border: none;
		border-radius: 6px;
		font-weight: 500;
		cursor: pointer;
		transition: all 0.2s ease;
	}
	
	.btn:hover:not(:disabled) {
		transform: translateY(-1px);
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}
	
	.btn:active:not(:disabled) {
		transform: translateY(0);
	}

	/* Variants - dynamic via template expression */
	.btn-primary {
		background: #3b82f6;
		color: white;
	}
	
	.btn-primary:hover:not(:disabled) {
		background: #2563eb;
	}
	
	.btn-secondary {
		background: #6b7280;
		color: white;
	}
	
	.btn-secondary:hover:not(:disabled) {
		background: #4b5563;
	}
	
	.btn-outline {
		background: transparent;
		color: #3b82f6;
		border: 2px solid #3b82f6;
	}
	
	.btn-outline:hover:not(:disabled) {
		background: #eff6ff;
	}

	/* Sizes - dynamic via template expression */
	.btn-small {
		padding: 0.25rem 0.75rem;
		font-size: 0.875rem;
	}
	
	.btn-medium {
		padding: 0.5rem 1rem;
		font-size: 1rem;
	}
	
	.btn-large {
		padding: 0.75rem 1.5rem;
		font-size: 1.125rem;
	}

	/* State modifiers - conditional via class: directive */
	.btn:disabled {
		opacity: 0.5;
		cursor: not-allowed;
		transform: none;
	}

	.loading {
		cursor: wait;
		pointer-events: none;
	}
	
	.full-width {
		width: 100%;
	}

	/* Loading spinner */
	.spinner {
		width: 1em;
		height: 1em;
		border: 2px solid currentColor;
		border-top-color: transparent;
		border-radius: 50%;
		animation: spin 0.6s linear infinite;
	}

	@keyframes spin {
		to {
			transform: rotate(360deg);
		}
	}
</style>

Ejemplos de uso:

<!-- Primary button, medium size (defaults) -->
<Button onclick={handleSave}>Save Booking</Button>

<!-- Secondary variant, large size -->
<Button variant="secondary" size="large">Cancel</Button>

<!-- Loading state -->
<Button loading={isSubmitting}>Submit</Button>

<!-- Disabled state -->
<Button disabled={!isValid}>Continue</Button>

<!-- Full width button -->
<Button fullWidth>Book Now</Button>

Lo que hace esto poderoso:

Las expresiones de plantilla (btn-{variant}, btn-{size}) crean nombres de clase dinámicos
La directiva class: (class:loading, class:full-width) maneja el estado
Las clases estáticas (.btn) proveen los estilos base
Todo funciona junto de manera fluida

Errores Comunes

1. Olvidar los Dos Puntos

El Problema:

<!-- ❌ This sets a STATIC class named "selected" -->
<!-- It's always there, doesn't change -->
<div class="selected">
	Content
</div>

La Solución:

<!-- ✅ This conditionally applies the class -->
<!-- It appears/disappears based on the variable -->
<script>
	let selected = $state(false)
</script>

<div class:selected>
	Content
</div>

Por qué importa: Sin los dos puntos, simplemente tienes una clase CSS normal. La magia de class: es que es reactiva—se actualiza cuando cambia tu estado.

2. Condiciones en Conflicto

El Problema:

<script>
	let hasSuccess = $state(false)
	let hasError = $state(false)
</script>

<!-- ❌ Both could be true at the same time! -->
<div class:success={hasSuccess} class:error={hasError}>
	Message
</div>

Si ambas son verdaderas, el elemento obtiene class="success error". Tu CSS podría entrar en conflicto:

.success { color: green; }
.error { color: red; }  /* Which color wins? */

La Solución:

<script>
	let status = $state('idle') // 'idle' | 'success' | 'error'
</script>

<!-- ✅ Only one can be true at a time -->
<div 
	class:success={status === 'success'} 
	class:error={status === 'error'}
>
	Message
</div>

O usa expresiones de plantilla:

<div class="message message-{status}">
	Message
</div>

3. Definiciones de Estilo Faltantes

El Problema:

<script>
	let active = $state(false)
</script>

<!-- ❌ Applying a class that isn't styled -->
<div class:active>
	Content
</div>

<style>
	/* Oops! .active is never defined */
	div {
		padding: 1rem;
	}
</style>

La clase se aplica al DOM, pero nada ocurre visualmente porque no hay estilos para .active.

La Solución:

<script>
	let active = $state(false)
</script>

<div class:active>
	Content
</div>

<style>
	/* ✅ Define the styles */
	div {
		padding: 1rem;
		transition: background 0.2s;
	}
	
	.active {
		background: #eff6ff;
		border-left: 4px solid #3b82f6;
	}
</style>

Nota: Svelte advertirá sobre selectores CSS no utilizados, pero las clases dinámicas generadas mediante expresiones de plantilla (class="btn-{variant}") no activarán advertencias, ya que Svelte no puede rastrearlas en tiempo de compilación.

4. Errores tipográficos en nombres de clases

El problema:

<div class:isActive>  <!-- Variable name: isActive -->
	...
</div>

<style>
	.is-active {  /* ❌ Class name: is-active (with dash) */
		/* Won't match! */
	}
</style>

La solución:

<!-- Either match exactly -->
<div class:is-active={isActive}>  <!-- ✅ Explicit mapping -->

<!-- Or rename the variable -->
<script>
	let is_active = $state(false)  /* Can't use dashes in JS */
</script>
<div class:active={is_active}>  <!-- ✅ Simpler -->

5. Complicar en exceso los casos simples

El problema:

<!-- ❌ Too complex for a simple boolean -->
<script>
	let selected = $state(false)
	let classes = $derived(selected ? 'card selected' : 'card')
</script>

<div class={classes}>...</div>

La solución:

<!-- ✅ Much cleaner -->
<script>
	let selected = $state(false)
</script>

<div class="card" class:selected>...</div>

Regla general: Usa class: para booleanos simples y clases computadas para lógica compleja.

Resumen

Las clases dinámicas permiten que los estilos reaccionen al estado. Usa class:name para condicionales simples, expresiones de plantilla para nombres de clase computados y funciones auxiliares para combinaciones complejas.

Puntos clave:

class:name={condition} para clases condicionales
Atajo class:name cuando la variable coincide con el nombre de la clase
class="btn-{variant}" para nombres de clase computados
Combina clases estáticas y dinámicas libremente

Próximos pasos

El ServiceCard tiene buen aspecto. Continúa con Estilizar el formulario de reserva para crear una experiencia de formulario pulida.

Estilos que Reaccionan al Estado

Lo que Aprenderás

La Directiva class:

¿Qué es una Directiva?

Cómo Funciona

Sintaxis Abreviada

Un Ejemplo Completo

Condiciones Explícitas

Cuando los Nombres no Coinciden

Ejemplo Básico

Usar Expresiones

Múltiples Condiciones en un Elemento

Combinar Estáticas y Dinámicas

Lo Mejor de Ambos Mundos

Cómo Funciona

Ejemplo Completo

¿Por qué Combinarlas?

Patrón Común: Base + Variante + Estado

Expresión de Clase

Nombres de Clase Dinámicos con Template Literals

Cómo Funcionan las Expresiones de Template

Ejemplo Completo

Múltiples Variables

Cuándo Usar Expresiones de Template vs. class:

Ternario en el Atributo de Clase

Situaciones de Una u Otra Opción

¿Qué es un Operador Ternario?

Ejemplo Básico

¿Por Qué No Usar class:?

Múltiples Clases en el Ternario

Combinando con Clases Estáticas

Múltiples Clases Dinámicas

Cuando las Cosas se Complican

Usando $derived con Arrays

Enfoque con Función Auxiliar

Avanzado: Objetos Condicionales

Ejemplo del Mundo Real: Tarjeta Dinámica

Aplicar en BookIt

Selección de Tarjeta de Servicio

Errores en Campos de Formulario

Estados del Botón

Errores Comunes

1. Olvidar los Dos Puntos

2. Condiciones en Conflicto

3. Definiciones de Estilo Faltantes

4. Errores tipográficos en nombres de clases

5. Complicar en exceso los casos simples

Resumen

Próximos pasos

La Directiva `class:`

Cuándo Usar Expresiones de Template vs. `class:`

¿Por Qué No Usar `class:`?